How to customize the event background color in Agenda view ?
This article explains how to customize the event background in Agenda view.
Step 1: Create a Core application with Scheduler by referring to the following user guide link.
https://ej2.syncfusion.com/aspnetcore/documentation/schedule/getting-started/
Also, include the event template support by referring to 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 event's 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 the getColor function, the event's background color is returned based on the event's 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 to the example from the following GitHub link: Agenda_with_customized_events
