From 2c671b625152da636bb88dca0f7116bfe18bf6f1 Mon Sep 17 00:00:00 2001 From: Vladimir Stempel Date: Mon, 12 Apr 2021 14:36:08 +0300 Subject: [PATCH] feat(datepicker): add param to prevent change to next month after first date pick in right calendar (#6058) * feat(datepicker): add param to prevent change to next month after first date pick in right calendar * docs(datepicker): add preventChangeToNextMonth parameter example * fix(datepicker): fix MonthViewOption type error, fix datepicker reducer tests --- .../+datepicker/datepicker-section.list.ts | 9 + .../app/components/+datepicker/demos/index.ts | 2 + ...revent-change-to-next-month.component.html | 9 + .../prevent-change-to-next-month.component.ts | 13 + apps/ngx-bootstrap-docs/src/ng-api-doc.ts | 5 + src/datepicker/bs-datepicker.config.ts | 5 + .../reducer/bs-datepicker.reducer.ts | 22 +- src/datepicker/reducer/bs-datepicker.state.ts | 1 + .../testing/bs-datepicker.reducer.spec.ts | 47 +- .../testing/bs-daterangepicker.spec.ts | 3 - src/datepicker/testing/flaggedMonthsMock.ts | 1393 +++++++++++++++++ 11 files changed, 1502 insertions(+), 7 deletions(-) create mode 100644 apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/prevent-change-to-next-month/prevent-change-to-next-month.component.html create mode 100644 apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/prevent-change-to-next-month/prevent-change-to-next-month.component.ts create mode 100644 src/datepicker/testing/flaggedMonthsMock.ts diff --git a/apps/ngx-bootstrap-docs/src/app/components/+datepicker/datepicker-section.list.ts b/apps/ngx-bootstrap-docs/src/app/components/+datepicker/datepicker-section.list.ts index 3a59868e76..5d22d2a390 100644 --- a/apps/ngx-bootstrap-docs/src/app/components/+datepicker/datepicker-section.list.ts +++ b/apps/ngx-bootstrap-docs/src/app/components/+datepicker/datepicker-section.list.ts @@ -51,6 +51,7 @@ import { DemoDateRangePickerDisplayOneMonth } from './demos/daterangepicker-disp import { DemoDatepickerTodayButtonComponent } from './demos/today-button/today-button'; import { DemoDatepickerClearButtonComponent } from './demos/clear-button/clear-button'; import { DemoDatepickerStartViewComponent } from "./demos/start-view/start-view"; +import { DemoDatepickerPreventChangeToNextMonthComponent } from './demos/prevent-change-to-next-month/prevent-change-to-next-month.component'; export const demoComponentContent: ContentSection[] = [ { @@ -410,6 +411,14 @@ export const demoComponentContent: ContentSection[] = [ description: `

Quick select ranges can be added to Daterangepicker using ranges

`, outlet: DemoDatePickerQuickSelectRangesComponent }, + { + title: 'Prevent change to next month', + anchor: 'prevent-change-to-next-month', + component: require('!!raw-loader!./demos/prevent-change-to-next-month/prevent-change-to-next-month.component.ts'), + html: require('!!raw-loader!./demos/prevent-change-to-next-month/prevent-change-to-next-month.component.html'), + description: `

Pick some date from second month and it wont change to the next month

`, + outlet: DemoDatepickerPreventChangeToNextMonthComponent + }, { title: 'Previous month in Daterangepicker', anchor: 'daterangepicker-previous-month', diff --git a/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/index.ts b/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/index.ts index 54d2ea70b3..03b0576bd7 100644 --- a/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/index.ts +++ b/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/index.ts @@ -42,6 +42,7 @@ import { DemoDateRangePickerDisplayOneMonth } from './daterangepicker-display-on import { DemoDatepickerTodayButtonComponent } from './today-button/today-button'; import { DemoDatepickerClearButtonComponent } from './clear-button/clear-button'; import { DemoDatepickerStartViewComponent } from "./start-view/start-view"; +import { DemoDatepickerPreventChangeToNextMonthComponent } from './prevent-change-to-next-month/prevent-change-to-next-month.component'; export const DEMO_COMPONENTS = [ DatepickerDemoComponent, @@ -84,6 +85,7 @@ export const DEMO_COMPONENTS = [ DemoDatepickerClearButtonComponent, DemoDateRangePickerShowPreviousMonth, DemoDateRangePickerMaxDateRangeComponent, + DemoDatepickerPreventChangeToNextMonthComponent, DemoDatePickerQuickSelectRangesComponent, DemoDatepickerStartViewComponent ]; diff --git a/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/prevent-change-to-next-month/prevent-change-to-next-month.component.html b/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/prevent-change-to-next-month/prevent-change-to-next-month.component.html new file mode 100644 index 0000000000..f7f7ad44dd --- /dev/null +++ b/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/prevent-change-to-next-month/prevent-change-to-next-month.component.html @@ -0,0 +1,9 @@ +
+
+ +
+
diff --git a/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/prevent-change-to-next-month/prevent-change-to-next-month.component.ts b/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/prevent-change-to-next-month/prevent-change-to-next-month.component.ts new file mode 100644 index 0000000000..1de78dadd4 --- /dev/null +++ b/apps/ngx-bootstrap-docs/src/app/components/+datepicker/demos/prevent-change-to-next-month/prevent-change-to-next-month.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'demo-prevent-change-to-next-month', + templateUrl: './prevent-change-to-next-month.component.html' +}) +export class DemoDatepickerPreventChangeToNextMonthComponent { + maxDate = new Date(); + + constructor() { + this.maxDate.setDate(this.maxDate.getDate() + 7); + } +} diff --git a/apps/ngx-bootstrap-docs/src/ng-api-doc.ts b/apps/ngx-bootstrap-docs/src/ng-api-doc.ts index 27e409b82b..b74e83c168 100644 --- a/apps/ngx-bootstrap-docs/src/ng-api-doc.ts +++ b/apps/ngx-bootstrap-docs/src/ng-api-doc.ts @@ -1099,6 +1099,11 @@ export const ngdoc: any = { "type": "BsDatepickerViewMode", "description": "

Default mode for all date pickers

\n" }, + { + "name": "preventChangeToNextMonth", + "type": "boolean", + "description": "

Prevents change to next month after first date pick in right calendar (dateRangePicker only)

\n" + }, { "name": "rangeInputFormat", "defaultValue": "L", diff --git a/src/datepicker/bs-datepicker.config.ts b/src/datepicker/bs-datepicker.config.ts index 997edad048..5ed699e070 100644 --- a/src/datepicker/bs-datepicker.config.ts +++ b/src/datepicker/bs-datepicker.config.ts @@ -82,6 +82,11 @@ export class BsDatepickerConfig implements DatepickerRenderOptions { */ showPreviousMonth?: boolean; + /** + * Prevents change to next month for right calendar in two calendars view (dateRangePicker only) + */ + preventChangeToNextMonth?: boolean; + /** * Add class to current day */ diff --git a/src/datepicker/reducer/bs-datepicker.reducer.ts b/src/datepicker/reducer/bs-datepicker.reducer.ts index 3a24552d79..9a634f9af3 100644 --- a/src/datepicker/reducer/bs-datepicker.reducer.ts +++ b/src/datepicker/reducer/bs-datepicker.reducer.ts @@ -24,7 +24,7 @@ import { BsViewNavigationEvent, DatepickerFormatOptions, BsDatepickerViewMode } import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils'; -export function bsDatepickerReducer(state = initialDatepickerState, +export function bsDatepickerReducer(state: BsDatepickerState = initialDatepickerState, action: Action): BsDatepickerState { switch (action.type) { case BsDatepickerActions.CALCULATE: { @@ -202,7 +202,7 @@ function calculateReducer(state: BsDatepickerState): BsDatepickerState { } state.monthViewOptions.firstDayOfWeek = getLocale(state.locale).firstDayOfWeek(); - const monthsModel = new Array(displayMonths); + let monthsModel = new Array(displayMonths); for (let monthIndex = 0; monthIndex < displayMonths; monthIndex++) { // todo: for unlinked calendars it will be harder monthsModel[monthIndex] = calcDaysCalendar( @@ -211,6 +211,24 @@ function calculateReducer(state: BsDatepickerState): BsDatepickerState { ); viewDate = shiftDate(viewDate, { month: 1 }); } + // Check if parameter enabled and check if it's not months navigation event + if (state.preventChangeToNextMonth && state.flaggedMonths && state.hoveredDate) { + const viewMonth = calcDaysCalendar(state.view.date, state.monthViewOptions); + // Check if viewed right month same as in flaggedMonths state, then override months model with flaggedMonths + if (state.flaggedMonths.length && state.flaggedMonths[1].month.getMonth() === viewMonth.month.getMonth()) { + monthsModel = state.flaggedMonths + .map(item => { + if (state.monthViewOptions) { + return calcDaysCalendar( + item.month, + state.monthViewOptions + ) + } + return null; + }) + .filter(item => item !== null); + } + } return Object.assign({}, state, { monthsModel }); } diff --git a/src/datepicker/reducer/bs-datepicker.state.ts b/src/datepicker/reducer/bs-datepicker.state.ts index f139e72bdd..6e75e51f26 100644 --- a/src/datepicker/reducer/bs-datepicker.state.ts +++ b/src/datepicker/reducer/bs-datepicker.state.ts @@ -49,6 +49,7 @@ export class BsDatepickerState flaggedMonths?: DaysCalendarViewModel[]; selectFromOtherMonth?: boolean; showPreviousMonth?: boolean; // dateRangePicker only; + preventChangeToNextMonth?: boolean; // dateRangePicker only; displayOneMonthRange?: boolean; // dateRangePicker only; // months calendar diff --git a/src/datepicker/testing/bs-datepicker.reducer.spec.ts b/src/datepicker/testing/bs-datepicker.reducer.spec.ts index 9d036d5387..fe21168fc9 100644 --- a/src/datepicker/testing/bs-datepicker.reducer.spec.ts +++ b/src/datepicker/testing/bs-datepicker.reducer.spec.ts @@ -2,6 +2,7 @@ import { bsDatepickerReducer } from '../reducer/bs-datepicker.reducer'; import { BsDatepickerActions } from '../reducer/bs-datepicker.actions'; import { Action } from 'ngx-bootstrap/mini-ngrx'; import { initialDatepickerState } from '../reducer/bs-datepicker.state'; +import { mockFlaggedMonths } from './flaggedMonthsMock'; describe('BsDatepickerReducer.', () => { it('navigateTo : "month" view mode', () => { @@ -22,12 +23,54 @@ describe('BsDatepickerReducer.', () => { initialDatepickerState.view.date = new Date(2017, 11, 1); const action: Action = { - type: BsDatepickerActions.NAVIGATE_TO, - payload: { unit: { year: 2017, month: 11, day: 1}, viewMode: 'day' } + type: BsDatepickerActions.NAVIGATE_TO, + payload: { unit: { year: 2017, month: 11, day: 1}, viewMode: 'day' } }; const reducer = bsDatepickerReducer(state, action); expect(reducer.view.mode).toEqual('month'); expect(reducer.selectedDate).toEqual(new Date(2017, 11, 1)); }); + + it('preventChangeToNextMonth : months shouldn\'t change', () => { + const state = Object.assign({}, initialDatepickerState, { + preventChangeToNextMonth: true, + displayMonths: 2, + hoveredDate: true, + flaggedMonths: mockFlaggedMonths + }); + + initialDatepickerState.view.mode = 'day'; + initialDatepickerState.view.date = new Date('2021-04-14T12:36:16'); + + const action: Action = { + type: BsDatepickerActions.CALCULATE, + payload: {} + }; + + const reducer = bsDatepickerReducer(state, action); + expect(reducer.view.mode).toEqual('day'); + expect(reducer.monthsModel.pop().month).toEqual(state.flaggedMonths[1].month); + }); + + it('preventChangeToNextMonth : months should change', () => { + const state = Object.assign({}, initialDatepickerState, { + preventChangeToNextMonth: false, + displayMonths: 2, + hoveredDate: true, + flaggedMonths: mockFlaggedMonths + }); + + initialDatepickerState.view.mode = 'day'; + initialDatepickerState.view.date = new Date('2021-04-14T12:36:16'); + + const action: Action = { + type: BsDatepickerActions.CALCULATE, + payload: {} + }; + + const reducer = bsDatepickerReducer(state, action); + expect(reducer.view.mode).toEqual('day'); + expect((reducer.monthsModel.pop().month.toISOString() === state.flaggedMonths[1].month.toISOString())).toBeFalsy(); + }); }); diff --git a/src/datepicker/testing/bs-daterangepicker.spec.ts b/src/datepicker/testing/bs-daterangepicker.spec.ts index 03aa3b572a..5435580b62 100644 --- a/src/datepicker/testing/bs-daterangepicker.spec.ts +++ b/src/datepicker/testing/bs-daterangepicker.spec.ts @@ -7,9 +7,6 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { BsCustomDates } from '../themes/bs/bs-custom-dates-view.component'; -import { take } from 'rxjs/operators'; -import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils'; -import { initialYearShift } from '../engine/format-years-calendar'; @Component({ diff --git a/src/datepicker/testing/flaggedMonthsMock.ts b/src/datepicker/testing/flaggedMonthsMock.ts new file mode 100644 index 0000000000..814ae2e794 --- /dev/null +++ b/src/datepicker/testing/flaggedMonthsMock.ts @@ -0,0 +1,1393 @@ +import { DaysCalendarViewModel } from '../models'; + +export const mockFlaggedMonths: DaysCalendarViewModel[] = [{ + month: new Date('2021-03-01T13:36:16'), + monthTitle: 'March', + yearTitle: '2021', + weekNumbers: ['10', '11', '12', '13', '14', '15'], + weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + weeks: [{ + days: [{ + date: new Date('2021-02-28T13:36:16'), + label: '28', + monthIndex: 0, + weekIndex: 0, + dayIndex: 0, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-01T13:36:16'), + label: '1', + monthIndex: 0, + weekIndex: 0, + dayIndex: 1, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-02T13:36:16'), + label: '2', + monthIndex: 0, + weekIndex: 0, + dayIndex: 2, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-03T13:36:16'), + label: '3', + monthIndex: 0, + weekIndex: 0, + dayIndex: 3, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-04T13:36:16'), + label: '4', + monthIndex: 0, + weekIndex: 0, + dayIndex: 4, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-05T13:36:16'), + label: '5', + monthIndex: 0, + weekIndex: 0, + dayIndex: 5, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-06T13:36:16'), + label: '6', + monthIndex: 0, + weekIndex: 0, + dayIndex: 6, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-03-07T13:36:16'), + label: '7', + monthIndex: 0, + weekIndex: 1, + dayIndex: 0, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-08T13:36:16'), + label: '8', + monthIndex: 0, + weekIndex: 1, + dayIndex: 1, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-09T13:36:16'), + label: '9', + monthIndex: 0, + weekIndex: 1, + dayIndex: 2, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-10T13:36:16'), + label: '10', + monthIndex: 0, + weekIndex: 1, + dayIndex: 3, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-11T13:36:16'), + label: '11', + monthIndex: 0, + weekIndex: 1, + dayIndex: 4, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-12T13:36:16'), + label: '12', + monthIndex: 0, + weekIndex: 1, + dayIndex: 5, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-13T13:36:16'), + label: '13', + monthIndex: 0, + weekIndex: 1, + dayIndex: 6, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-03-14T13:36:16'), + label: '14', + monthIndex: 0, + weekIndex: 2, + dayIndex: 0, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-15T13:36:16'), + label: '15', + monthIndex: 0, + weekIndex: 2, + dayIndex: 1, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-16T13:36:16'), + label: '16', + monthIndex: 0, + weekIndex: 2, + dayIndex: 2, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-17T13:36:16'), + label: '17', + monthIndex: 0, + weekIndex: 2, + dayIndex: 3, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-18T13:36:16'), + label: '18', + monthIndex: 0, + weekIndex: 2, + dayIndex: 4, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-19T13:36:16'), + label: '19', + monthIndex: 0, + weekIndex: 2, + dayIndex: 5, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-20T13:36:16'), + label: '20', + monthIndex: 0, + weekIndex: 2, + dayIndex: 6, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-03-21T13:36:16'), + label: '21', + monthIndex: 0, + weekIndex: 3, + dayIndex: 0, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-22T13:36:16'), + label: '22', + monthIndex: 0, + weekIndex: 3, + dayIndex: 1, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-23T13:36:16'), + label: '23', + monthIndex: 0, + weekIndex: 3, + dayIndex: 2, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-24T13:36:16'), + label: '24', + monthIndex: 0, + weekIndex: 3, + dayIndex: 3, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-25T13:36:16'), + label: '25', + monthIndex: 0, + weekIndex: 3, + dayIndex: 4, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-26T13:36:16'), + label: '26', + monthIndex: 0, + weekIndex: 3, + dayIndex: 5, + isOtherMonth: false, + isHovered: false, + isSelected: true, + isSelectionStart: true, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: true, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-27T13:36:16'), + label: '27', + monthIndex: 0, + weekIndex: 3, + dayIndex: 6, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: true, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-03-28T12:36:16'), + label: '28', + monthIndex: 0, + weekIndex: 4, + dayIndex: 0, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: true, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-29T12:36:16'), + label: '29', + monthIndex: 0, + weekIndex: 4, + dayIndex: 1, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: true, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-30T12:36:16'), + label: '30', + monthIndex: 0, + weekIndex: 4, + dayIndex: 2, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: true, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-31T12:36:16'), + label: '31', + monthIndex: 0, + weekIndex: 4, + dayIndex: 3, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: true, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-01T12:36:16'), + label: '1', + monthIndex: 0, + weekIndex: 4, + dayIndex: 4, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-02T12:36:16'), + label: '2', + monthIndex: 0, + weekIndex: 4, + dayIndex: 5, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-03T12:36:16'), + label: '3', + monthIndex: 0, + weekIndex: 4, + dayIndex: 6, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-04-04T12:36:16'), + label: '4', + monthIndex: 0, + weekIndex: 5, + dayIndex: 0, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-05T12:36:16'), + label: '5', + monthIndex: 0, + weekIndex: 5, + dayIndex: 1, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-06T12:36:16'), + label: '6', + monthIndex: 0, + weekIndex: 5, + dayIndex: 2, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-07T12:36:16'), + label: '7', + monthIndex: 0, + weekIndex: 5, + dayIndex: 3, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-08T12:36:16'), + label: '8', + monthIndex: 0, + weekIndex: 5, + dayIndex: 4, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-09T12:36:16'), + label: '9', + monthIndex: 0, + weekIndex: 5, + dayIndex: 5, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-10T12:36:16'), + label: '10', + monthIndex: 0, + weekIndex: 5, + dayIndex: 6, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }], + hideLeftArrow: false, + hideRightArrow: true, + disableLeftArrow: false, + disableRightArrow: false +}, { + month: new Date('2021-04-01T12:36:16'), + monthTitle: 'April', + yearTitle: '2021', + weekNumbers: ['14', '15', '16', '17', '18', '19'], + weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + weeks: [{ + days: [{ + date: new Date('2021-03-28T12:36:16'), + label: '28', + monthIndex: 1, + weekIndex: 0, + dayIndex: 0, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-29T12:36:16'), + label: '29', + monthIndex: 1, + weekIndex: 0, + dayIndex: 1, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-30T12:36:16'), + label: '30', + monthIndex: 1, + weekIndex: 0, + dayIndex: 2, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-03-31T12:36:16'), + label: '31', + monthIndex: 1, + weekIndex: 0, + dayIndex: 3, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-01T12:36:16'), + label: '1', + monthIndex: 1, + weekIndex: 0, + dayIndex: 4, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: true, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-02T12:36:16'), + label: '2', + monthIndex: 1, + weekIndex: 0, + dayIndex: 5, + isOtherMonth: false, + isHovered: false, + isSelected: true, + isSelectionStart: false, + isSelectionEnd: true, + isInRange: true, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-03T12:36:16'), + label: '3', + monthIndex: 1, + weekIndex: 0, + dayIndex: 6, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-04-04T12:36:16'), + label: '4', + monthIndex: 1, + weekIndex: 1, + dayIndex: 0, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-05T12:36:16'), + label: '5', + monthIndex: 1, + weekIndex: 1, + dayIndex: 1, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-06T12:36:16'), + label: '6', + monthIndex: 1, + weekIndex: 1, + dayIndex: 2, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-07T12:36:16'), + label: '7', + monthIndex: 1, + weekIndex: 1, + dayIndex: 3, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-08T12:36:16'), + label: '8', + monthIndex: 1, + weekIndex: 1, + dayIndex: 4, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-09T12:36:16'), + label: '9', + monthIndex: 1, + weekIndex: 1, + dayIndex: 5, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-10T12:36:16'), + label: '10', + monthIndex: 1, + weekIndex: 1, + dayIndex: 6, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-04-11T12:36:16'), + label: '11', + monthIndex: 1, + weekIndex: 2, + dayIndex: 0, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-12T12:36:16'), + label: '12', + monthIndex: 1, + weekIndex: 2, + dayIndex: 1, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-13T12:36:16'), + label: '13', + monthIndex: 1, + weekIndex: 2, + dayIndex: 2, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-14T12:36:16'), + label: '14', + monthIndex: 1, + weekIndex: 2, + dayIndex: 3, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-15T12:36:16'), + label: '15', + monthIndex: 1, + weekIndex: 2, + dayIndex: 4, + isOtherMonth: false, + isHovered: true, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-16T12:36:16'), + label: '16', + monthIndex: 1, + weekIndex: 2, + dayIndex: 5, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-17T12:36:16'), + label: '17', + monthIndex: 1, + weekIndex: 2, + dayIndex: 6, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-04-18T12:36:16'), + label: '18', + monthIndex: 1, + weekIndex: 3, + dayIndex: 0, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-19T12:36:16'), + label: '19', + monthIndex: 1, + weekIndex: 3, + dayIndex: 1, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-20T12:36:16'), + label: '20', + monthIndex: 1, + weekIndex: 3, + dayIndex: 2, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-21T12:36:16'), + label: '21', + monthIndex: 1, + weekIndex: 3, + dayIndex: 3, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-22T12:36:16'), + label: '22', + monthIndex: 1, + weekIndex: 3, + dayIndex: 4, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-23T12:36:16'), + label: '23', + monthIndex: 1, + weekIndex: 3, + dayIndex: 5, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-24T12:36:16'), + label: '24', + monthIndex: 1, + weekIndex: 3, + dayIndex: 6, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-04-25T12:36:16'), + label: '25', + monthIndex: 1, + weekIndex: 4, + dayIndex: 0, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-26T12:36:16'), + label: '26', + monthIndex: 1, + weekIndex: 4, + dayIndex: 1, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-27T12:36:16'), + label: '27', + monthIndex: 1, + weekIndex: 4, + dayIndex: 2, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-28T12:36:16'), + label: '28', + monthIndex: 1, + weekIndex: 4, + dayIndex: 3, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-29T12:36:16'), + label: '29', + monthIndex: 1, + weekIndex: 4, + dayIndex: 4, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-04-30T12:36:16'), + label: '30', + monthIndex: 1, + weekIndex: 4, + dayIndex: 5, + isOtherMonth: false, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-05-01T12:36:16'), + label: '1', + monthIndex: 1, + weekIndex: 4, + dayIndex: 6, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }, { + days: [{ + date: new Date('2021-05-02T12:36:16'), + label: '2', + monthIndex: 1, + weekIndex: 5, + dayIndex: 0, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-05-03T12:36:16'), + label: '3', + monthIndex: 1, + weekIndex: 5, + dayIndex: 1, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-05-04T12:36:16'), + label: '4', + monthIndex: 1, + weekIndex: 5, + dayIndex: 2, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-05-05T12:36:16'), + label: '5', + monthIndex: 1, + weekIndex: 5, + dayIndex: 3, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-05-06T12:36:16'), + label: '6', + monthIndex: 1, + weekIndex: 5, + dayIndex: 4, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-05-07T12:36:16'), + label: '7', + monthIndex: 1, + weekIndex: 5, + dayIndex: 5, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }, { + date: new Date('2021-05-08T12:36:16'), + label: '8', + monthIndex: 1, + weekIndex: 5, + dayIndex: 6, + isOtherMonth: true, + isHovered: false, + isSelected: false, + isSelectionStart: false, + isSelectionEnd: false, + isInRange: false, + isDisabled: false, + isToday: false, + customClasses: '', + tooltipText: '' + }] + }], + hideLeftArrow: false, + hideRightArrow: true, + disableRightArrow: false, + disableLeftArrow: false +}]