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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add custom CSS class for each appointments in the Scheduler?

Platform: JavaScript |
Control: ejSchedule |
Published Date: February 25, 2016 |
Last Revised Date: March 1, 2016

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.

Sample Location: http://jsplayground.syncfusion.com/4lbvfdvy

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





You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon