maximum limit in Datepicker within the schedule.

[Alexandre]

Hello,

How do I put a maximum limit on the datepicker within the schedule. When placing the start date, I need the limit of the end date to be a maximum of 7 days.

[Ravikumar Venkatesan]

Hi Alexandre,

Sample: https://stackblitz.com/edit/ej2-angular-schedule-change-end-based-on-start?file=src%2Fapp.component.ts

You can achieve your requirement with help of the popupOpen event of the Schedule as shown in the below code snippet.

[app.component.ts]

export class AppComponent {

  public onPopupOpen(args: PopupOpenEventArgs): void {

    if(args.type === 'Editor') {

      var startObj = (args.element.querySelector('.e-start.e-field') as EJ2Instance).ej2_instances[0];

      var endObj = (args.element.querySelector('.e-end.e-field') as EJ2Instance).ej2_instances[0];

      if(startObj && endObj) {

        startObj.change = (args) => {

          this.setLimit(args.value, endObj.value, endObj);

        }

        endObj.change = (args) => {

          this.setLimit(startObj.value, args.value, endObj);

        }

      }

      this.setLimit(args.data.StartTime, args.data.EndTime, endObj);

    }

  }

 

  public setLimit(start, end, endObj) {

    if((end.getTime() - start.getTime()) > 604800000 || end.getTime() < start.getTime()) {

      // Limit maximum end date time after 7 days from start time.

      endObj.value = addDays(start, 6);

    }

  }

}

Regards,

Ravikumar Venkatesan

[Alexandre]

To validate and block the days, not letting the user choose the date by the datepicker and writing it in the input

I want to put a validation if the user writes in the input a value above 7 days. Appearing the modal (dialog) informing about the limit of days allowed.

[Ravikumar Venkatesan]

Hi Alexandre,

Sample: https://stackblitz.com/edit/ej2-angular-schedule-start-end-validation?file=src%2Fapp.component.ts

UG: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template#field-validation

You can add validation to the editor window start and end time fields in the Schedule eventSettings fields property as shown in the below code snippet.

[app.component.ts]

export class AppComponent {

  public eventSettings: EventSettingsModel = {

    dataSource: this.data,

    fields: {

      id: 'Id',

      startTime: { name: 'StartTime', validation: { required: true, date: [this.dateValidation, 'Maximum limit is 7 days'] } },

      endTime: { name: 'EndTime', validation: { required: true, date: [this.dateValidation, 'Maximum limit is 7 days'] } },

    }

  };

 

  public dateValidation(args): boolean {

    const start = (document.querySelector('#StartTime') as EJ2Instance).ej2_instances[0].value.getTime();

    const end = (document.querySelector('#EndTime') as EJ2Instance).ej2_instances[0].value.getTime();

    return (end - start) < 604800000;

  }

}

Regards,

Ravikumar Venkatesan