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

Restrict event duration

Thread ID:





148210 Oct 10,2019 07:42 AM UTC Oct 16,2019 01:48 PM UTC ASP.NET Core - EJ 2 6
Tags: Scheduler
Giorgi Dalakishvili
Asked On October 10, 2019 07:42 AM UTC


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 [Syncfusion]
Replied On 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. 

Giorgi Dalakishvili
Replied On 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 ?

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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. 

Giorgi Dalakishvili
Replied On 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?

Replied On 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

Balasubramanian Sattanathan [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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
Live Chat Icon