diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts index b5f9bf05d..7387dc47d 100755 --- a/components/lib/calendar/Calendar.d.ts +++ b/components/lib/calendar/Calendar.d.ts @@ -21,6 +21,7 @@ export interface CalendarPassThroughMethodOptions { instance: any; props: CalendarProps; state: CalendarState; + context: CalendarContext; } /** @@ -344,6 +345,75 @@ export interface CalendarState { currentView: string; } +/** + * Defines current options in Calendar component. + */ +export interface CalendarContext { + /** + * Current date. + */ + date: string | Date | string[] | Date[] | undefined | null; + /** + * Current today state of the calendar's day. + * @defaultValue false + */ + today: boolean; + /** + * Current other month state of the calendar's day. + */ + otherMonth: boolean; + /** + * Current selected state of the calendar's day or month or year. + * @defaultValue false + */ + selected: boolean; + /** + * Current disabled state of the calendar's day or month or year. + * @defaultValue false + */ + disabled: boolean; + /** + * Current month state. + */ + month: CalendarMonthOptions; + /** + * Current month index state. + */ + monthIndex: number; + /** + * Current year state. + */ + year: CalendarYearOptions; +} + +/** + * Defines cuurent month options. + */ +export interface CalendarMonthOptions { + /** + * Month value. + */ + value: string; + /** + * Selectable state of the month. + */ + selectable: boolean; +} + +/** + * Defines current year options. + */ +export interface CalendarYearOptions { + /** + * Year value. + */ + value: number; + /** + * Selectable state of the month. + */ + selectable: boolean; +} + /** * Defines valid properties in Calendar component. */ diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue index e261c13e8..83d70e695 100755 --- a/components/lib/calendar/Calendar.vue +++ b/components/lib/calendar/Calendar.vue @@ -134,7 +134,7 @@ - -
+ {{ weekHeaderLabel }} @@ -145,12 +145,28 @@
- + 0 {{ month.weekNumbers[i] }} + @@ -183,7 +207,16 @@ @click="onMonthSelect($event, { month: m, index: i })" @keydown="onMonthCellKeydown($event, { month: m, index: i })" :class="cx('month', { month: m, index: i })" - v-bind="ptm('month')" + v-bind=" + ptm('month', { + context: { + month: m, + monthIndex: i, + selected: isMonthSelected(i), + disabled: !m.selectable + } + }) + " :data-p-disabled="!m.selectable" :data-p-highlight="isMonthSelected(i)" > @@ -201,7 +234,15 @@ @click="onYearSelect($event, y)" @keydown="onYearCellKeydown($event, y)" :class="cx('year', { year: y })" - v-bind="ptm('year')" + v-bind=" + ptm('year', { + context: { + year: y, + selected: isYearSelected(y.value), + disabled: !y.selectable + } + }) + " :data-p-disabled="!y.selectable" :data-p-highlight="isYearSelected(y.value)" >