BoldDeskWe are launching BoldDesk on Product Hunt soon. Learn more & follow us.
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.
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;'>●</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;'>●</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
This is great. Thank you for this!
Andrew, You are most welcome.