The following steps shows the way to add the custom style for each appointments in the schedule control.
Step 1: Create a schedule sample with local JSON data. Also, add and refer the required scripts and stylesheets to it by referring the following link.
Step 2: Create the necessary custom style classes to be applied for the appointments.
Step 3: Define the appointmentTemplateId property for Scheduler which accepts the id value of the template design block. Also, add 2 custom fields namely IsHoliday and CustomStyle for each appointments in the appointment dataSource collection. IsHoliday field holds the value true or false, to depict whether that day is holiday or not. CustomStyle field holds the css class name to be applied for that particular appointment.
Step 4: Now, define the template block for appointments using script tag as mentioned below. Within the template block, check whether one of the appointment field IsHoliday is true or false and based on its value, apply the custom style.
Step 5: Run the sample and view the custom styles getting applied to the appointments as depicted in the below image,
Figure 1: Appointments with custom styles
This page will automatically be redirected to the sign-in page in 10 seconds.