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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: ASP.NET MVC |
Control: Schedule |
Published Date: November 13, 2018 |
Last Revised Date: May 23, 2019

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

Figure 1: Adding second appointment in another appointment range.

 

Second appointment is not rendered, due to the presence of another appointment in same range

Figure 2: Second appointment is not rendered, due to the presence of another appointment in same range.

 

Sample Link:

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-1612299465

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
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.

Up arrow icon

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

Live Chat Icon For mobile