Set allowed date range

Hi,

I know it is possible to block date ranges on the scheduler by creating events with isBlock set to true.

but is there a way to go the opposite way?

expample:

Setting allowed hours from 9-12 and 14-16?
or do i have to create dummy blocking events from ... to 9, 12-14 and 16-next day?

thanks!



1 Reply

KK Karthigeyan Krishnamurthi Syncfusion Team March 26, 2019 12:07 PM UTC

Hi Janko,   
  
Thank you for contacting Syncfusion support. 
 
We have prepared the below sample to restrict the user from creating the event only between 9-12 and 14-16
 
onActionBegin(args: ActionEventArgs): void { 
        let isEventChange: boolean = (args.requestType === 'eventChange'); 
        if ((args.requestType === 'eventCreate' && (<Object[]>args.data).length > 0) || isEventChange) { 
            let eventData: { [key: string]: Object } = (isEventChange) ? args.data as { [key: string]: Object } : 
                args.data[0] as { [key: string]: Object }; 
            let eventField: EventFieldsMapping = this.scheduleObj.eventFields; 
            let startDate: Date = eventData[eventField.startTime] as Date; 
            let endDate: Date = eventData[eventField.endTime] as Date; 
            args.cancel = !this.isValidateTime(startDate, endDate); 
            if (!args.cancel) { 
                args.cancel = !this.scheduleObj.isSlotAvailable(startDate, endDate); 
            } 
        } 
    } 
 
    isValidateTime(startDate: Date, endDate: Date): boolean { 
        return (((this.startDt <= startDate.getHours() && this.endDt > endDate.getHours()) || (this.endDt === endDate.getHours() && endDate.getMinutes() === 0)) || ((this.srtDt <= startDate.getHours() && this.enDt > endDate.getHours()) || (this.enDt === endDate.getHours() && endDate.getMinutes() === 0))); 
    } 
 
    onPopupOpen(args: PopupOpenEventArgs): void { 
        if (args.target && args.target.classList.contains('e-work-cells')) { 
            args.cancel = !args.target.classList.contains('custom'); 
        } 
    } 
 
    onRenderCell(args: RenderCellEventArgs): void { 
        if (args.element.classList.contains('e-work-hours') || args.element.classList.contains('e-work-cells')) { 
          if ((args.date.getHours() >= this.startDt && args.date.getHours() < this.endDt) || (args.date.getHours() >= this.srtDt && args.date.getHours() < this.enDt)) { 
            args.element.classList.add('custom'); 
          } 
        } 
    } 
 
Same is achieved in the below online sample where the cells are made as read-only outside the colored area. 
 
Regards, 
Karthi 
 


Loader.
Up arrow icon