1. Home
  2. Forum
  3. Angular
  4. Disable previous Dates on schedule calendar of Angular

Disable previous Dates on schedule calendar of Angular

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 angular

1. Disable navigating back
2. 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 navigation

Thanks

3 Replies 1 reply marked as answer
RV Ravikumar Venkatesan Syncfusion Team April 9, 2021 11:13 AM UTC

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. 

 
[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()); 
  } 


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

Regards, 
Ravikumar Venkatesan 


DE Developer April 9, 2021 11:58 AM UTC

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 calender

please see the reference which you provide



Thanks

 

RV Ravikumar Venkatesan Syncfusion Team April 12, 2021 09:39 AM UTC

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. 

 
[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 


Marked as answer
Loader.
Up arrow icon