How to customize the event background color in Agenda view ?
This knowledge base article explains the way to customize the event background in Agenda view.
Step 1: Create a Core application with Scheduler by referring the following user guide link.
https://ej2.syncfusion.com/aspnetcore/documentation/schedule/getting-started/
Also, include the event template support by referring the following online sample link.
https://ej2.syncfusion.com/aspnetcore/Schedule/EventTemplate#/material
<ejs-schedule id="schedule" height="550px" currentView="Agenda" selectedDate="new DateTime(2018, 2, 15)" popupOpen="OnPopupOpen"> <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings> <e-schedule-views> <e-schedule-view option="Agenda" eventTemplate="#event-template"></e-schedule-view> </e-schedule-views> </ejs-schedule>
Step 2: Define the HTML template to customize the events look and feel as shown in the following code example.
<script id="event-template" type="text/x-template">
<div class='template-wrap' style='background:${getColor(data.Category)}'>
<div class="subject" style='padding-left:7px'>${Subject}</div>
<div class="time" style='padding-left:7px'>Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div>
</div>
</script>
<script>
Step 3: In getColor function, event background colour is returned, based on the event Category field as shown in the following code example.
function getColor(category) {
if (category == "Assigned")
return '#ea7a57'
else
return '#7fa900'
};
Step 4: Run the sample, event with different Category field will be highlighted in red as shown below.
Figure 1: Event with customized background.
Please refer the example from the following GitHub link.
Example – Agenda_with_customized_events
