Restrict event duration

[Giorgi Dalakishvili]

Hello,

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.

[Karthigeyan Krishnamurthi]

Hi Giorgi, 

 

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. 

https://www.syncfusion.com/downloads/support/forum/148210/ze/ScheduleCoreApplication296038268.zip 

 

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. 

 

Regards, 

Karthi 

 

[Giorgi Dalakishvili]

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 ?

[Karthigeyan Krishnamurthi]

Hi Giorgi, 

 

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. 

https://ej2.syncfusion.com/aspnetcore/Schedule/TimeScale#/material 

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/timescale/?no-cache=1#setting-different-time-slot-duration 

 

Regards, 

Karthi 

 

[Giorgi Dalakishvili]

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?

[holdbackeverything]

 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

[Balasubramanian Sattanathan]

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')

 

Sample : https://www.syncfusion.com/downloads/support/forum/148210/ze/ScheduleCoreApplication-19004605.zip 

 

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

  

Regards, 

Balasubramanian S