)
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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: ejSchedule |
Published Date: February 25, 2016 |
Last Revised Date: May 28, 2019

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

<style>
  .customstyle1
         {
            background: url('13.2.0.29/themes/web/images/schedule/cake.png');
            height: 35px;
            width: 35px;
      background-repeat: no-repeat !important; 
         }
  .customstyle2 
         {
            background: url('13.2.0.29/themes/web/images/schedule/basketball.png');
            height: 35px;
            width: 35px;
      background-repeat: no-repeat !important;   
        }
</style>

 

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.

 
<script type="text/javascript">
        $(function () {
            $("#Schedule1").ejSchedule({
                width: "100%",
                height: "525px",
                currentDate: new Date(2014, 4, 5),
                appointmentTemplateId: "#appointmenttemplate",
                appointmentSettings: {
                    dataSource: [
                         {
                             Id: 100,
                             Subject: "Bering Sea Gold",
                             StartTime: new Date(2014, 4, 5, 10, 00),
                             EndTime: new Date(2014, 4, 5, 12, 00),
                             IsHoliday: true,
                             CustomStyle: "customstyle1",
                             Description: "",
                             AllDay: false,
                             Recurrence: false
                         },
                         {
                             Id: 101,
                             Subject: "What Happened",
                             StartTime: new Date(2014, 4, 6, 13, 00),
                             EndTime: new Date(2014, 4, 6, 15, 00),
                             IsHoliday: true,
                             CustomStyle: "customstyle2",
                             Description: "",
                             AllDay: false,
                             Recurrence: false
                         }
                    ]
                }
            });
        });
    </script>
 

 

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.

 
<script id="appointmenttemplate" type="text/x-jsrender">
        {{if IsHoliday }}
   <div style="height:100%">
            <div style='float:left; width:70px;'>
  <div class={{: CustomStyle }}></div>
      <div> 
   {{: Subject }} 
      </div>
   </div> 
            </div>    
  {{else !IsHoliday}}   
      <div> 
  {{: Subject }} 
      </div>   
        {{/if}}
</script>
 

 

Step 5: Run the sample and view the custom styles getting applied to the appointments as depicted in the below image,

Appointments with custom styles

Figure 1: Appointments with custom styles

ADD COMMENT
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.

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon