We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customize Month

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.


3 Replies

SR Swathi Ravi Syncfusion Team May 1, 2023 10:16 AM UTC

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 {

    height20px !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 {

    height20px !important;

    backgroundnone !important;

    borderunset !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



AN Andrew May 2, 2023 02:06 AM UTC

This is great. Thank you for this!



VD Vinitha Devi Murugan Syncfusion Team May 2, 2023 07:10 AM UTC

Andrew, You are most welcome.


Loader.
Live Chat Icon For mobile
Up arrow icon