We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to limit the appointments per slot?

Platform: JavaScript |
Control: ejSchedule |
Published Date: June 30, 2017 |
Last Revised Date: June 30, 2017

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



                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;


                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: http://jsplayground.syncfusion.com/fxcjy1mv


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

Figure 1: Adding second appointment in another appointment range.

Figure 2: Second appointment is not rendered, due to the presence of existing appointment in that time cell.


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon