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?

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.

CSS

 

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

 

 

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
6395 02/25/2016 03/01/2016 JavaScript ejSchedule
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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