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

2 mins read

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

Did you find this information helpful?

Yes

Did not find the solution Contact Support

Comments (0)

Please to leave a comment

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

Access denied