How to limit the appointments per slot?

1 min read

The following steps shows the way to limit the appointments per slot.

Step 1: Create a scheduler default sample and bind the beforeAppointmentCreate event as shown below

$("#Schedule1").ejSchedule({
                width: "100%",
                height: "525px",
                currentDate: new Date(2014, 4, 5),
                appointmentSettings: {
                    dataSource: dManager,
                    id: "Id",
                    subject: "Subject",
                    startTime: "StartTime",
                    endTime: "EndTime",
                    description: "Description",
                    allDay: "AllDay",
                    recurrence: "Recurrence",
                    recurrenceRule: "RecurrenceRule"
                },
                beforeAppointmentCreate: "OnBeforeAppointmentCreate"
            });

Step2: Define the beforeAppointmentCreate event function OnBeforeAppointmentCreate as shown below, where the rendering of more than one appointments in the same slot will be prevented.

function OnBeforeAppointmentCreate(args) { // this function will be called while saving an appointment
            var schObj = $("#Schedule1").ejSchedule('instance');
            if (ej.isNullOrUndefined(args.appointment[0]))
                obj = args.appointment;
            else
                obj = args.appointment[0];
            var predicate = ej.Predicate(schObj._appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, new Date(obj.StartTime)).and(schObj._appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, new Date(new Date(obj.EndTime)));
            // if newly rendered appointment range has another appointment it will be retrieved here
            var newAppList = new ej.DataManager(schObj._processed).executeLocal(new ej.Query().where(predicate));
            if (newAppList.length > 0) // 0 indicates no more appointment should render in the same time range
                args.cancel = true;
        }

Sample: https://jsplayground.syncfusion.com/fxcjy1mv

Step3: Run the above sample and no two appointments can be rendered in the same time range.

Adding second appointment in another appointment range