How to change appointment color based on the number of appointment count in a day?
This knowledge base article explains the way to change appointment color based on the number of appointment count in a day.
Step 1: Create a default schedule and define the queryCellInfo event by referring the instructions given in the below UG link.
https://help.syncfusion.com/js/schedule/customization#scheduler-customization-using-querycellinfo
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2014, 4, 5),
appointmentSettings: {
applyTimeOffset: false,
dataSource: dManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule"
},
queryCellInfo: "colorChange"
});
Step 2: Within the queryCellInfo scheduler event, number of appointments rendering in each day can be calculated and based on it each appointment’s background colour can be changed as shown below.
function colorChange(args) {
if (args.requestType == "appointment") {
var collection = new ej.DataManager(this._processed).executeLocal(new ej.Query().where(ej.Predicate(this._appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, new Date(args.appointment[this._appointmentSettings["startTime"]]).setHours(0, 0, 0, 0)).and(this._appointmentSettings["endTime"], ej.FilterOperators.lessThanOrEqual, new Date(args.appointment[this._appointmentSettings["endTime"]]).setHours(23, 59, 59, 59))));
if (collection.length > 1) {
args.element.css("background", "red");
args.element.css("border-color", "red");
}
}
}
Step 3: Run the sample, May 5, 2014 has more than one appointment, therefore those appointments default colour is customized to Red as shown below.
Figure 1: More than one appointments color is customized.
Sample:
