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
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
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
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); } } },
|