Mini Calendar (Date Picker) - block navigation to dates outside a defined range

Scheduler Javascript
#1

Hello,

I use mini calendar with a scheduler in order to display a periode of a contrat. I want to block navigation on dates outside the periode of a contrat. How I can do this ?

image
image940×438 26.7 KB

I tried to block the date change with a condition. But, I would prefer to block the click on the date outstide the periode.

showMinical() {
    if (this.scheduler.isCalendarVisible())
      this.scheduler.destroyCalendar();
    else
      this.scheduler.renderCalendar({
        position: 'dhx_minical_icon',
        date: this.scheduler.getState().date,
        navigation: true,
        handler: (date) => {
          if(date >= this.contract.StartDate && date <= this.contract.EndDate)
            this.scheduler.setCurrentView(date);
          this.scheduler.destroyCalendar();
        }
      });
  }

<button mat-stroked-button type="button" id="btnCalendrier" (click)="showMinical()">
      <span class="menu-icon icon-calendar"></span>
      <span class="position-mini-cal" id="dhx_minical_icon">&nbsp;</span>
  </button>

Thank you!

#2

Hello!

Unfortunately the built-in minicalendar does not provide such functionality, there are no API events or callback that would allow you to control what happens when you press arrow buttons to navigate between months.

As a workaround, you can override the scheduler.renderCalendar method, which is called each time the datepicker is repainted.
When the method is called - you call the original method in order to display the calendar, and then, depending on the date of the datepicker, you can remove one of navigation arrows to prevent user from switching dates in that direction.

JS:

// your project dates
const minProjectDate = new Date(2022, 1, 1);// 1st of February
const maxProjectDate = new Date(2022, 6, 1);// 1st of July (js months are zero-based)

// workaround
(function(){
   const renderCalendar = scheduler.renderCalendar;
   scheduler.renderCalendar = function(config){
       const calendarDate = config && config.date ? config.date : scheduler.getState().date;

       const node = renderCalendar.apply(this, arguments);

       if(scheduler.date.month_start(new Date(calendarDate)).valueOf() <= 
          scheduler.date.month_start(new Date(minProjectDate)).valueOf()){
            node.querySelector(".dhx_year_month .dhx_cal_prev_button").remove();
          }
       if(scheduler.date.month_start(new Date(calendarDate)).valueOf() >= 
          scheduler.date.month_start(new Date(maxProjectDate)).valueOf()){
            node.querySelector(".dhx_year_month .dhx_cal_next_button").remove();
          }

       return node;
   }
})();

Here is a complete demo:
https://snippet.dhtmlx.com/r2t69h5a