Set allowed date range

[Janko Buve]

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!

[Karthigeyan Krishnamurthi]

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. 

https://stackblitz.com/edit/angular-fu7b9j-lcgjs3?file=group-custom-work-days.component.ts 

 

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. 

https://ej2.syncfusion.com/angular/demos/#/material/schedule/group-custom-work-days 

 

Regards, 

Karthi