In this demo, different working days are assigned by passing the workDays
collection for each doctor to show their available dates. On each of their available dates, their daily available time range is also depicted by mentioning the startHour
and endHour
for each doctor. These values needs to be provided along with the resource dataSource
by mapping the appropriate fields namely workDaysField
, startHourField
and endHourField
.
Here, we have customized the background cell color of the available times of each doctor using renderCell
event to denote that, only those timeslots are available for booking appointments. All other cells are simply read-only and no appointments can be booked on it. Also, if the applicable timeslot already contains an appointment, then no more appointments can be added to that cell which has been prevented by making use of the isSlotAvailable
function within the actionBegin
event checking for eventCreate
and eventChange
request type. The resource header is customized by making use of the resourceHeaderTemplate
option.