Customize Month

[Andrew]

Is there a way to change/customize how events are shown in the month view? When all my events are populated for the month, it looks visually overwhelming.

Is there a way to shrink the event height (so more events can show up) and maybe change the solid color background to a colored dot to the left of it? Kinda like the Google Calendar month view?

Any ideas on how to accomplish this would be great!

Thanks.

[Swathi Ravi]

Hi Andrew,

Sample: https://stackblitz.com/edit/ej2-js-schedule-month-view-customization?file=index.html

Api: https://ej2.syncfusion.com/javascript/documentation/api/schedule/views/#eventtemplate

Demo: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/schedule/event-template.html

Is there a way to change/customize how events are shown in the month view? When all my events are populated for the month, it looks visually overwhelming.

You can customize the events by using the Schedule’s eventTemplate, as shown in the below shared snippet.

[index.html]

<script id="event-template" type="text/x-template">

    <div class='template-wrap' >

        <div class="subject"><span style='font-size:18px; color:blue;'>&#9679;</span>${Subject}</div>

        <div class="time" >Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div>

    </div>

</script>

Is there a way to shrink the event height (so more events can show up) and maybe change the solid color background to a colored dot to the left of it? Kinda like the Google Calendar month view?

You can adjust the height of the events by using the below mentioned css class.

[index.html]

.e-schedule .e-month-view .e-appointment {

    height: 20px !important;

}

And you can add the dot to the left of the event by using the eventTemplate, as shown in the below shared snippet.

[index.html]

<style>

   

.e-schedule .e-month-view .e-appointment {

    height: 20px !important;

    background: none !important;

    border: unset !important;

    color: #000000;

}    

</style>

 

<script id="event-template" type="text/x-template">

    <div class='template-wrap' >

        <div class="subject"><span style='font-size:18px; color:blue;'>&#9679;</span>${Subject}</div>

        <div class="time" >Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div>

    </div>

</script>

[index.js]

  var viewsCollection = [

        { option: 'Month', eventTemplate: '#event-template' }

    ];

Regards,

Swathi Ravi

[Andrew]

This is great. Thank you for this!

[Vinitha Devi Murugan]

Andrew, You are most welcome.