How To? Lock Day to prevent addition of any more events. but allow existing events to be edited.

Question

Is there a way to set a day as "locked" so that only certain users could add new events to that day? (ie if the schedule is deemed to be full, or maybe it's a holiday or training day).

Similar to the Block Dates & Times.. but leaves all the current events in place, allow them to be edited, but no new events added.

My vision would be a little lock icon at the top of the day that could be clicked on and off, or set by logic.

Tony · Accepted Answer

Thanks.. it seems to work, but does not seem to respect the Locked checkbox.. can't create anything new with it checked or unchecked.  Is that the expected behaviour?

Nevitha Ravi · Answer

Hi Tony, 

Greetings from Syncfusion Support. 

We have prepared a sample to lock/unlock today from appointment creation using actionBegin event which can be referred through the below link. In that sample we have check box to lock/unlock today, you can pass the locking and your date to be locked to the actionBegin event. 
https://stackblitz.com/edit/react-lock-today-from-appointment-creation?file=index.js  

onActionBegin(args) { 
    if (args.requestType == 'eventCreate') { 
      var startTime = new Date(args.data[0].StartTime); 
      if ( 
        this.lock && 
        new Date(startTime).setHours(0, 0, 0, 0) == 
          new Date().setHours(0, 0, 0, 0) 
      ) { 
        //comparing start time with today 
        args.cancel = true; 
      } 
    } 
  } 
  onChange(args) { 
    this.lock = args.checked; 
  } 

Please try the above sample and let us know if you need any further assistance. 

Regards, 
Nevitha

Tony · Answer

Thanks.. testing out the example it seems the event card still opens so it feels like you can still create a new event.  Is that expected?

Nevitha Ravi · Answer

Hi Tony, 

Thanks for your update. 

We suspect that you want to hide the popup too in the locked day. In our previously shared sample we have just prevented the appointment creation in actionBegin event. We have modified the shared sample to prevent the opening of editor and quick popup on locked day as well using popupOpen event. 
https://stackblitz.com/edit/react-lock-today-from-appointment-creation?file=index.js 

onActionBegin(args) { 
    if (args.requestType == 'eventCreate') { 
      var startTime = new Date(args.data[0].StartTime); 
      if ( 
        this.lock && 
        new Date(startTime).setHours(0, 0, 0, 0) == 
          new Date().setHours(0, 0, 0, 0) 
      ) { 
        //comparing start time with today 
        args.cancel = true; 
      } 
    } 
  } 
  onPopupOpen(args) { 
    if (args.type == 'Editor' || args.type == 'QuickInfo') { 
      var startTime = new Date(args.data.StartTime); 
      if ( 
        this.lock && 
        new Date(startTime).setHours(0, 0, 0, 0) == 
          new Date().setHours(0, 0, 0, 0) 
      ) { 
        //comparing start time with today 
        args.cancel = true; 
      } 
    } 
  } 

In the above sample, today is locked for your reference. Please refer the sample and let us know fir further assistance. 

Regards, 
Nevitha

Nevitha Ravi · Answer

Hi Tony, 
 
Thanks for your update. 
 
In the shared sample by default the check box will be in checked state. When the check box is checked, then today date of the scheduler is locked. The popup is prevented and appointment creation is prevented. When you uncheck the check box and try creating appointment, popup will open and appointment will be created. 
 
https://stackblitz.com/edit/react-lock-today-from-appointment-creation?file=index.js 
 
if ( 
        this.lock && 
        new Date(startTime).setHours(0, 0, 0, 0) == 
          new Date().setHours(0, 0, 0, 0) 
      ) 
 
In the above condition this.lock is false/true based on check box value and we have compared the date of popup opened with today date. Please try the sample and code, if you still need any further assistance share your requirement with more details like image to serve you better. 
   
Regards,  
Nevitha