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
close icon

Allow double booking for events with different room

Hi,

I've created a scheduler where the events have a custom property called "room". I want to make it so that if two events with the same room are overlapping, it prevents double booking. I've figured out how to do this with the isSlotAvailable method, but I also want events with different rooms to be able to book in the same slot. Is there a way to check the properties of both events to see if they have the same room value, and then allow double booking if they are different rooms?

Thanks in advance,

Majid


3 Replies

SR Swathi Ravi Syncfusion Team January 4, 2023 04:25 PM UTC

Hi Majid,


You can achieve your requirement with the help of actionBegin event as shown in the below shared snippet.


Sample: https://stackblitz.com/edit/hlbppq?file=index.js


[index.js]

actionBegin: function (args) {

        if (args.requestType == 'eventCreate') {

            var schedule = document.querySelector('.e-schedule').ej2_instances[0];

            let details = {

                StartTime: args.data[0].StartTime,

                EndTime: args.data[0].EndTime,

                RoomType: args.data[0].RoomType

            }

            let filteredEvents = schedule.eventBase.filterEvents(

                details.StartTime,

                details.EndTime

            );

            let room = filteredEvents.filter(dd => dd.RoomType == details.RoomType)

            if (filteredEvents.length > 0 && room.length > 0) {

                alert("Event is already filled");

                args.cancel = true;

            }

            else {

                console.log(details);

            }

        }

    },

 



Regards,

Swathi Ravi



MA Majid replied to Swathi Ravi January 4, 2023 11:16 PM UTC

Hi Swathi,

Thanks, the code you provided works well. However, I also want a similar functionality when the event is resized or dragged around on the calendar. How would I do this?


Thanks in advance, 

Majid



SR Swathi Ravi Syncfusion Team January 5, 2023 01:45 PM UTC

Majid,


You can prevent the event rendering on the same date range while drag and resize like the below shared snippet.


Sample: https://stackblitz.com/edit/hlbppq-6jgv6a?file=index.js


[index.js]

actionBegin: function (args) {

        var schedule = document.querySelector('.e-schedule').ej2_instances[0];

        if (args.requestType == 'eventCreate' || args.requestType == 'eventChange') {

            var data = args.requestType === 'eventCreate' ? args.data[0] : args.data;

            let details = {

                StartTime: data.StartTime,

                EndTime: data.EndTime,

                RoomType: data.RoomType,

            }

            let filteredEvents = schedule.eventBase.filterEvents(

                details.StartTime,

                details.EndTime

            );

            let room = filteredEvents.filter(dd => dd.RoomType == details.RoomType)

            if (filteredEvents.length > 0 && room.length && data.Id != filteredEvents[0].Id && filteredEvents[0].RoomType == details.RoomType) {

                args.cancel = true;

                alert("Event is already filled");

            }

            else {

                console.log(details);

            }

        }

    },

 


Loader.
Live Chat Icon For mobile
Up arrow icon