This sample illustrates the usage of different types of events such as normal, spanned and all-day. Here, the Schedule acts as a leave planner for an employee to plan his upcoming leaves as well as to keep track of his previously taken time-offs and leaves.

More Details...


Schedule requires only the startTime and endTime fields as mandatory to be mapped from datasource and provided with proper datetime values to display the normal events in it. The normal events can be categorized into 3 types based on its time range and all-day type.

Event Description
Normal events The events that has its start and end time duration on the same date. These events are depicted in green color in the above sample.
Spanned events The events on which its start and end time spans over multiple days and usually displays together with all-day events. These events are depicted in orange color which can be seen by navigating to the next date period and are depicted in orange color.
All-day events The events that are defined as all-day in its event object by setting isAllDay to true. It usually renders at the date header section of the Schedule where no time-cells are present. These events are depicted in purple color.