Disable previous Dates on schedule calendar of Angular

Question

Hi Team,I'm currently using angular 10 + scheduler calendar, Could you please let me know how to disable previous dates of schedule calendar in angular1. Disable navigating back2. Disable cells of past days (like greying out cells).3. No event or popup on clicking disabled/past days.4. Disable past days on dropdown calendar on top left navigationThanks

Ravikumar Venkatesan · Accepted Answer

Hi Developer 

Thanks for the update. 

We have validated your reported query “if I define the [minDate] in HTML, but I am not able to drag and drop/stretch up/stretch down the event in the calendar” at our end and suspect that you want the resize and drag actions for the past time events also. So, we have achieved your requirement with the help of navigating the event of the Schedule for the same, we have prepared a sample which can be available from the below link. 

Note: If we using the minDate property it will prevent the drag and resize actions on the past dates. So, we have removed the minDate property and prevented past date navigations in navigating the event of Schedule. 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-disable-actions-on-past-dates-sampl-z2qj2k?file=app.component.ts 
 
[app.component.ts] 




  onNavigation(args) { 
    // Preventing the past dates navigation 
    if (args.action === "date") { 
      let isPrev = args.previousDate.getTime() > args.currentDate.getTime(); 
      if (isPrev) { 
        let date; 
        switch (this.scheduleObj.currentView) { 
          case "Day": 
          case "Agenda": 
            date = args.currentDate; 
            break; 
          case "Week": 
          case "WorkWeek": 
            date = getWeekLastDate(args.currentDate, 0); 
            break; 
          case "Month": 
            date = new Date(args.currentDate.getFullYear(), args.currentDate.getMonth(), 0); 
            break; 
          default: 
            break; 
        } 
        args.cancel = this.isValidAction(date); 
      } 
    } 
  } 
 
  onActionBegin(args){ 
    if(args.requestType === "toolbarItemRendering") { 
      args.items[2].click = this.onCalendarCreated.bind(this); 
    } 
  } 
 
  onCalendarCreated() { 
    let container = document.querySelector(".e-schedule-toolbar-container"); 
    let calendar = container.querySelector(".e-calendar"); 
    if (!calendar || calendar) { 
      setTimeout((e) => { 
        // Preventing the date selection in Schedule header calendar 
        calendar = container.querySelector(".e-calendar"); 
        let calendarObj = (calendar as any).ej2_instances[0]; 
        calendarObj.renderDayCell = this.onRenderCalendarCells.bind(this) 
        calendarObj.refresh(); 
        container.classList.add("e-header-popup-visible"); 
      }, 1); 
    } 
  } 
 
  onRenderCalendarCells(args) { 
    if(this.isValidAction(args.date)) { 
      args.element.classList.add("e-past-days"); 
    } 
  } 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan

Ravikumar Venkatesan · Answer

Hi Developer,

Greetings from Syncfusion support.

We have validated your requirement “Disable previous Dates on schedule calendar of Angular” at our end and achieved it with the help of minDate property and renderCell, popupOpen, dragStart, resizeStart events of the Schedule for the same we have prepared a sample that can be available from the below link.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-disable-actions-on-past-dates-sample?file=app.component.ts

[app.component.html]

<ejs-schedule [minDate]="minDate" (renderCell)="onRenderCell($event)" (popupOpen)="onPopupOpen($event)" (dragStart)="onDragStart($event)" (resizeStart)="onResizeStart($event)">

</ejs-schedule>

[app.component.ts]

public today = new Date();

public minDate = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());

onRenderCell(args): void {

if (args.elementType === "workCells" && args.date.getTime() <= new Date().getTime() && !args.element.classList.contains("e-disable-dates")) {

args.element.classList.add("e-disable-dates");

args.element.classList.add("e-disable-cell");

}

onPopupOpen(args) {

if (["QuickInfo", "Editor"].indexOf(args.type) > -1) {

args.cancel = this.isValidAction(args.data.StartTime);

}

onDragStart(args) {

args.cancel = this.isValidAction(args.data.StartTime);

}

onResizeStart(args) {

args.cancel = this.isValidAction(args.data.StartTime);

}

isValidAction(date) {

return !(date.getTime() > new Date().getTime());

}

Schedule API’s: https://ej2.syncfusion.com/angular/documentation/api/schedule/#schedulecomponent

Kindly try the above sample and get back to us if you need any further assistance.

Regards,

Ravikumar Venkatesan

Developer · Answer

Thanks Ravi.It is disable the past dates if i define the [minDate] in html, but i am not able to drag and drop/stretch up/stretch down the event in the calenderplease see the reference which you providehttps://stackblitz.com/edit/ej2-angular-schedule-disable-actions-on-past-dates-sample?file=app.component.ts Thanks