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

Restrict event duration


I want to use Scheduler control to allow users to select available time slots. Because of this I want to restrict event duration to specific duration. Is it possible to do that with the Scheduler control so that when they click on an available time they can't change the event duration? Also, is it possible to restrict that the event does not start in the middle of the slot? For example if the event duration is limited to 30 minutes I want to allow events to start only either at full hours or at 30 minutes past hour.

6 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team October 11, 2019 11:05 AM UTC

Syncfusion greetings. 
In the below sample, work hours will be highlighted from 10 – 12 on week days and popup can’t be opened by clicking the remaining cells. Date and time field will be disabled while opening the editor in the work hour cells. 
function onRenderCell(args) {
        if (args.elementType == 'workCells' && args.element.classList.contains('e-work-hours')) {
            ej.base.addClass([args.element], ['cell-color']);
    function onPopupOpen(args) {
        var isCellClick = args.target.classList.contains('cell-color');
        var isEventClick = args.target.classList.contains('e-appointment')
        if ((args.type === 'QuickInfo' || args.type === 'Editor')) {
            var start = document.querySelector('.e-start.e-datetimepicker');
            start.ej2_instances[0].readonly = true;
            start.disabled = true;
            var end = document.querySelector('.e-end.e-datetimepicker');
            end.ej2_instances[0].readonly = true;
            end.disabled = true;
            if (isCellClick) {
                args.cancel = false;
            } else if (isEventClick) {
                args.cancel = false;
            } else {
                args.cancel = true;
Kindly share more details regarding your requirement “restrict the event in the middle of the slot” to proceed further. 

GD Giorgi Dalakishvili October 11, 2019 12:25 PM UTC

Ok, let me explain. I want to build a scheduler which will allow patient to book appointments with a doctor. The doctor works from 10-18 and I want to restrict it so that the appointment can only start at 10, 11, 12 ... 17 so that the client can't create an appointment starting at 10:15 or 15:40 and so on. Also, I want the event duration to be readonly and only allow appointments of exactly one hour. Can this be done with the scheduler control ?

KK Karthigeyan Krishnamurthi Syncfusion Team October 14, 2019 06:05 AM UTC

Thanks for the update. 
Kindly use time scale option in our previous sample with interval as 60 and slotCount as 1 to achieve your requirement. 

GD Giorgi Dalakishvili October 15, 2019 09:15 AM UTC

Thanks. That helps but in the new event popup after someone selects time from the dropdown the start and end time fields are editable so they can type anything they want. Can these fields be made read only so that the only way to choose time is the time selector dropdown? Or can I just hide the "Mode Details" button in the small new event popup?

HO holdbackeverything October 16, 2019 01:50 AM UTC

 was a recruiter for a bit, and found a ton of great plugins that I use in my sales career. I use:

Lusha- generates emails/phone numbers (about 50% of the time it's personal email/phone, so keep that in mind you may be calling someone's cell phone) tutuapp

Adapt prospector- generates business emails/phone numbers (sometimes appvalley

BS Balasubramanian Sattanathan Syncfusion Team October 16, 2019 01:48 PM UTC

Hi Giorgi, 
Thanks for your update. 
Based on your requirement, we have modified the previously shared sample using popupOpen event. 

document.querySelector('.e-start.e-datetimepicker').disabled = true;
document.querySelector('.e-start-container .e-date-icon').classList.add('e-disabled')
document.querySelector('.e-end.e-datetimepicker').disabled = true;
document.querySelector('.e-start-container .e-date-icon').classList.add('e-disabled')


Kindly try above sample and let us know any further assistance on this. 
Balasubramanian S 

Live Chat Icon For mobile
Up arrow icon