How to select a sequence of dates in Calendar in Angular Calendar

31 Aug 20265 minutes to read

The following example demonstrates how to select all dates in the week that contains the selected date by using the values property when the isMultiSelection property is enabled.

The values property is used to maintain the collection of selected dates, while isMultiSelection allows multiple dates to be selected in the Calendar.

In this example, Moment.js methods are used to calculate the start and end dates of the week based on the selected date, and all dates within that range are selected.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'




import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';
import * as moment from 'moment';

@Component({
imports: [
        
        CalendarModule //declaration of ej2-ng-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    styleUrls: ['./style.css'],
    template: `
        <!-- Rendering the Calendar with Multi selection option--->
        <div class="wrapelement">
            <ejs-calendar #ejCalendar id="calendar" isMultiSelection='true' (change)="onChange($event)"></ejs-calendar>
            </div>
            <div class='btncontainer e-btn-group e-vertical'>
            <input type="radio" id="workweek" name="week" value="workweek" (click)="workWeek()" />
            <label class="e-btn" for="workweek">Work Week</label>
            <input type="radio" id="week" name="week" value="week" (click)="week()"/>
            <label class="e-btn" for="week">Week</label>
            </div>
        `
})
export class AppComponent {
    @ViewChild('ejCalendar') CalendarInstance?: CalendarComponent;
    /*selected current week dates when click the button*/
    workWeek() {
        if (this.CalendarInstance?.element.classList.contains('week')) {
            this.CalendarInstance.element.classList.remove('week')
        }
        this.CalendarInstance?.element.classList.add('workweek');
    }

    week() {
        if (this.CalendarInstance?.element.classList.contains('workweek')) {
            this.CalendarInstance.element.classList.remove('workweek')
        }
        this.CalendarInstance?.element.classList.add('week');
    }

    onChange(args: any) {
        var startOfWeek = moment(args.value).startOf('week');
        var endOfWeek: any = moment(args.value).endOf('week');
        if (this.CalendarInstance?.element.classList.contains('workweek')) {
            this.getWeekArray(startOfWeek.day(1), endOfWeek.day(5), this);
        } else if (this.CalendarInstance?.element.classList.contains("week")) {
            this.getWeekArray(startOfWeek, endOfWeek, this);
        }
    }

    getWeekArray(startOfWeek: any, endOfWeek: number, obj: this) {
        var days = [];
        var day = startOfWeek;
        while (day <= endOfWeek) {
            days.push(day.toDate());
            day = day.clone().add(1, 'd');
        }
        (obj.CalendarInstance as CalendarComponent ).values = days;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));