How to limit the appointment per slot in EJMVC Scheduler Horizontal mode ?

2 mins read

This knowledge base article explains the way to prevent the rendering of more appointments in same range.

Step 1: Create an MVC application with default scheduler code example by referring the following knowledge base link.

https://www.syncfusion.com/kb/3606/how-to-add-the-ejmvc-schedule-control-in-the-mvc-application

Also, define the scheduler with Resources-Grouping option and BeforeAppointmentCreate, BeforeAppointmentChange, ResizeStop, DragStop client-side events as shown below.

@(Html.EJ().Schedule("Schedule1")
        .Width("100%")
        .Height("525px")
        .CurrentDate(new DateTime(2016, 11, 18))
        .Orientation(Orientation.Horizontal)
        .ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom")
            .BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom"))
        .Resources(res =>
        {
            res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(true)
            .ResourceSettings(flds => flds.Datasource((System.Collections.IEnumerable)ViewBag.Owners).Text("text").Id("id").GroupId("groupId").Color("color")).Add();
        })
        .Group(gr =>
        {
            gr.Resources(ViewBag.Resources);
        })
            .AppointmentSettings(fields => fields.Datasource(ViewBag.dataSource)
            .ApplyTimeOffset(false)
            .Id("Id")
            .Subject("Subject")
            .StartTime("StartTime")
            .EndTime("EndTime")
            .Description("Description")
            .AllDay("AllDay")
            .Recurrence("Recurrence")
            .RecurrenceRule("RecurrenceRule")
            .ResourceFields("OwnerId"))
)

Step 2: When any CRUD action is performed on an appointment, scheduler events will raise where we can access the updated collection details which is passed to the overlap client-side function to check any other appointment availability on rendering range as shown below.

function renderingCustom(args) {
        var schObj = $("#Schedule1").ejSchedule('instance');
        if (ej.isNullOrUndefined(args.appointment[0]))
            app = args.appointment;
        else
            app = args.appointment[0];
        if (args.type == "beforeAppointmentChange")
            app = args.appointment.changed[0];
        var count = overlap(app, args.type);
        if (args.type != "resizeStop" && args.type != "dragStop" && count > 0) {
            args.cancel = (count > 0);
        } else if (count > 1) {
            args.cancel = (count > 1);
        }
    }

Step 3: In overlap client-side function, appointment’s resource id, start and end time is used to find the presence of existing appointment within the new appointment’s rendering range as shown below.

function overlap(app, type) {
        var obj = $("#Schedule1").ejSchedule('instance');
        var startDate = app[obj._appointmentSettings["startTime"]];
        var endDate = app[obj._appointmentSettings["endTime"]];
        var resourceId = app["OwnerId"];
        var predicate = ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, startDate).
            and(ej.Predicate(obj._appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, startDate)).
            and(ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.lessThan, endDate)).
            or(ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, startDate).
                and(ej.Predicate(obj._appointmentSettings["endTime"], ej.FilterOperators.greaterThan, startDate)));
        var filterApp = new ej.DataManager(obj._processed).executeLocal(new ej.Query().where(predicate));
        if (obj._tempResource.length > 0) {
            var resPredicate = ej.Predicate(obj._appointmentSettings["resourceFields"], ej.FilterOperators.contains, resourceId);
            var filterResApp = new ej.DataManager(filterApp).executeLocal(new ej.Query().where(resPredicate));
        }
        var overlapCount = 0;
        if (obj._tempResource.length > 0) {
            overlapCount = (type == "beforeAppointmentChange" && filterResApp.length == 1 && filterResApp[0].Id == app.Id) ? 0 : filterResApp.length;
        }
        else {
            overlapCount = filterApp.length
        }
        return overlapCount;
    }

Step 4: Run the sample and no two appointments can be rendered in the same time range as shown below.

Adding second appointment in another appointment range