@coreui/vue-pro 5.0.0-alpha.1 → 5.0.0-beta.0

package/dist/esm/components/calendar/CCalendar.js

@@ -0,0 +1,725 @@
+import { defineComponent, ref, watch, h } from 'vue';
+import { CButton } from '../button/CButton.js';
+import { convertToDateObject, isSameDateAs, getDateBySelectionType, getCalendarDate, getMonthDetails, createGroupsInArray, getMonthsNames, getYears, isDateDisabled, isDateInRange, isDateSelected, isToday, isDisableDateInRange } from './utils.js';
+
+const CCalendar = defineComponent({
+    name: 'CCalendar',
+    props: {
+        /**
+         * Default date of the component
+         */
+        calendarDate: null,
+        /**
+         * The number of calendars that render on desktop devices.
+         */
+        calendars: {
+            type: Number,
+            default: 1,
+        },
+        /**
+         * Set the format of day name.
+         *
+         * @default 'numeric'
+         * @since 4.6.0
+         */
+        dayFormat: {
+            type: [Function, String],
+            default: 'numeric',
+            required: false,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['numeric', '2-digit'].includes(value);
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                return false;
+            },
+        },
+        /**
+         * Specify the list of dates that cannot be selected.
+         */
+        disabledDates: {
+            type: Array,
+        },
+        /**
+         * Initial selected to date (range).
+         */
+        endDate: null,
+        /**
+         * Sets the day of start week.
+         * - 0 - Sunday,
+         * - 1 - Monday,
+         * - 2 - Tuesday,
+         * - 3 - Wednesday,
+         * - 4 - Thursday,
+         * - 5 - Friday,
+         * - 6 - Saturday,
+         */
+        firstDayOfWeek: {
+            type: Number,
+            default: 1,
+        },
+        /**
+         * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+         */
+        locale: {
+            type: String,
+            default: 'default',
+        },
+        /**
+         * Max selectable date.
+         */
+        maxDate: null,
+        /**
+         * Min selectable date.
+         */
+        minDate: null,
+        /**
+         * Show arrows navigation.
+         */
+        navigation: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Reorder year-month navigation, and render year first.
+         *
+         * @since 4.6.0
+         */
+        navYearFirst: Boolean,
+        /**
+         * Allow range selection.
+         */
+        range: Boolean,
+        /**
+         * Toggle select mode between start and end date.
+         */
+        selectEndDate: Boolean,
+        /**
+         * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
+         *
+         * @since 4.9.0
+         */
+        selectAdjacementDays: Boolean,
+        /**
+         * Specify the type of date selection as day, week, month, or year.
+         *
+         * @since 5.0.0-beta.0
+         */
+        selectionType: {
+            type: String,
+            default: 'day',
+            validator: (value) => ['day', 'week', 'month', 'year'].includes(value),
+        },
+        /**
+         * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
+         *
+         * @since 4.9.0
+         */
+        showAdjacementDays: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Set whether to display week numbers in the calendar.
+         *
+         * @since 5.0.0-beta.0
+         */
+        showWeekNumber: Boolean,
+        /**
+         * Initial selected date.
+         */
+        startDate: null,
+        /**
+         * Set length or format of day name.
+         *
+         * @type  number | 'long' | 'narrow' | 'short'
+         */
+        weekdayFormat: {
+            type: [Function, Number, String],
+            default: 2,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['long', 'narrow', 'short'].includes(value);
+                }
+                if (typeof value === 'number') {
+                    return true;
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                return false;
+            },
+        },
+        /**
+         * Label displayed over week numbers in the calendar.
+         *
+         * @since 5.0.0-beta.0
+         */
+        weekNumbersLabel: String,
+    },
+    emits: [
+        /**
+         * Callback fired when the user hovers over the calendar cell.
+         *
+         * @property {Date | null} date
+         */
+        'date-hover',
+        /**
+         * Callback fired when the calendar date changed.
+         *
+         * @property {Date | null} date
+         */
+        'calendar-date-change',
+        /**
+         * Callback fired when the start date changed.
+         *
+         * @property {Date | null} date
+         */
+        'start-date-change',
+        /**
+         * Callback fired when the end date changed.
+         *
+         * @property {Date | null} date
+         */
+        'end-date-change',
+    ],
+    setup(props, { slots, emit }) {
+        const calendarRef = ref();
+        const calendarDate = ref(props.calendarDate
+            ? convertToDateObject(props.calendarDate, props.selectionType)
+            : props.startDate
+                ? convertToDateObject(props.startDate, props.selectionType)
+                : new Date());
+        const startDate = ref(props.startDate ? convertToDateObject(props.startDate, props.selectionType) : null);
+        const endDate = ref(props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null);
+        const hoverDate = ref(null);
+        const maxDate = ref(props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null);
+        const minDate = ref(props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null);
+        const selectEndDate = ref(props.selectEndDate);
+        const view = ref('days');
+        watch(() => props.selectionType, () => {
+            if (props.selectionType === 'day' || props.selectionType === 'week') {
+                view.value = 'days';
+                return;
+            }
+            if (props.selectionType === 'month') {
+                view.value = 'months';
+                return;
+            }
+            if (props.selectionType === 'year') {
+                view.value = 'years';
+                return;
+            }
+        }, { immediate: true });
+        watch(() => props.calendarDate, () => {
+            if (props.calendarDate) {
+                calendarDate.value = new Date(props.calendarDate);
+            }
+        });
+        watch(() => props.startDate, () => {
+            const date = props.startDate
+                ? convertToDateObject(props.startDate, props.selectionType)
+                : null;
+            if (!isSameDateAs(date, startDate.value)) {
+                startDate.value = date;
+            }
+        });
+        watch(() => props.endDate, () => {
+            const date = props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null;
+            if (!isSameDateAs(date, endDate.value)) {
+                endDate.value = date;
+            }
+        });
+        watch(() => props.maxDate, () => {
+            maxDate.value = props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null;
+        });
+        watch(() => props.minDate, () => {
+            minDate.value = props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null;
+        });
+        watch(() => props.selectEndDate, () => {
+            selectEndDate.value = props.selectEndDate;
+        });
+        watch(startDate, () => {
+            emit('start-date-change', getDateBySelectionType(startDate.value, props.selectionType));
+        });
+        watch(endDate, () => {
+            emit('end-date-change', getDateBySelectionType(endDate.value, props.selectionType));
+        });
+        const setCalendarPage = (years, months = 0, setMonth) => {
+            const year = calendarDate.value.getFullYear();
+            const month = calendarDate.value.getMonth();
+            const d = new Date(year, month, 1);
+            years && d.setFullYear(d.getFullYear() + years);
+            months && d.setMonth(d.getMonth() + months);
+            typeof setMonth === 'number' && d.setMonth(setMonth);
+            calendarDate.value = d;
+            emit('calendar-date-change', d);
+        };
+        const handleCalendarClick = (date, index) => {
+            if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
+                return;
+            }
+            const _date = new Date(date);
+            if (view.value === 'days') {
+                calendarDate.value = index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date;
+            }
+            if (view.value === 'months' && props.selectionType !== 'month') {
+                calendarDate.value = index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date;
+                view.value = 'days';
+                return;
+            }
+            if (view.value === 'years' && props.selectionType !== 'year') {
+                calendarDate.value = index
+                    ? new Date(_date.setFullYear(_date.getFullYear() - index))
+                    : _date;
+                view.value = 'months';
+                return;
+            }
+            if (props.range) {
+                if (selectEndDate.value) {
+                    selectEndDate.value = false;
+                    if (startDate.value && startDate.value > date) {
+                        startDate.value = null;
+                        endDate.value = null;
+                        return;
+                    }
+                    if (isDisableDateInRange(startDate.value, date, props.disabledDates)) {
+                        startDate.value = null;
+                        endDate.value = null;
+                        return;
+                    }
+                    endDate.value = date;
+                    return;
+                }
+                if (endDate.value && endDate.value < date) {
+                    startDate.value = null;
+                    endDate.value = null;
+                    return;
+                }
+                if (isDisableDateInRange(date, endDate.value, props.disabledDates)) {
+                    startDate.value = null;
+                    endDate.value = null;
+                    return;
+                }
+                selectEndDate.value = true;
+                startDate.value = date;
+                return;
+            }
+            startDate.value = date;
+        };
+        const handleCalendarKeyDown = (event, date, index) => {
+            if (event.code === 'Space' || event.key === 'Enter') {
+                event.preventDefault();
+                handleCalendarClick(date, index);
+            }
+            if (event.key === 'ArrowRight' ||
+                event.key === 'ArrowLeft' ||
+                event.key === 'ArrowUp' ||
+                event.key === 'ArrowDown') {
+                event.preventDefault();
+                if (maxDate.value &&
+                    date >= convertToDateObject(maxDate.value, props.selectionType) &&
+                    (event.key === 'ArrowRight' || event.key === 'ArrowDown')) {
+                    return;
+                }
+                if (minDate.value &&
+                    date <= convertToDateObject(minDate.value, props.selectionType) &&
+                    (event.key === 'ArrowLeft' || event.key === 'ArrowUp')) {
+                    return;
+                }
+                let element = event.target;
+                if (props.selectionType === 'week' && element.tabIndex === -1) {
+                    element = element.closest('tr[tabindex="0"]');
+                }
+                const list = calendarRef.value
+                    ? Array.from(calendarRef.value.querySelectorAll(props.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td.current'))
+                    : [];
+                const index = list.indexOf(element);
+                const first = index === 0;
+                const last = index === list.length - 1;
+                const toBoundary = {
+                    start: index,
+                    end: list.length - (index + 1),
+                };
+                const gap = {
+                    ArrowRight: 1,
+                    ArrowLeft: -1,
+                    ArrowUp: props.selectionType === 'week' && view.value === 'days'
+                        ? -1
+                        : view.value === 'days'
+                            ? -7
+                            : -3,
+                    ArrowDown: props.selectionType === 'week' && view.value === 'days'
+                        ? 1
+                        : view.value === 'days'
+                            ? 7
+                            : 3,
+                };
+                if ((event.key === 'ArrowRight' && last) ||
+                    (event.key === 'ArrowDown' && toBoundary['end'] < gap['ArrowDown']) ||
+                    (event.key === 'ArrowLeft' && first) ||
+                    (event.key === 'ArrowUp' && toBoundary['start'] < Math.abs(gap['ArrowUp']))) {
+                    if (view.value === 'days') {
+                        setCalendarPage(0, event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1);
+                    }
+                    if (view.value === 'months') {
+                        setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1);
+                    }
+                    if (view.value === 'years') {
+                        setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 10 : -10);
+                    }
+                    setTimeout(() => {
+                        const _list = element.parentNode?.parentNode ? Array.from(element.parentNode.parentNode.querySelectorAll('td[tabindex="0"], tr[tabindex="0"]')) : [];
+                        if (_list.length && event.key === 'ArrowRight') {
+                            _list[0].focus();
+                        }
+                        if (_list.length && event.key === 'ArrowLeft') {
+                            _list[_list.length - 1].focus();
+                        }
+                        if (_list.length && event.key === 'ArrowDown') {
+                            _list[gap['ArrowDown'] - (list.length - index)].focus();
+                        }
+                        if (_list.length && event.key === 'ArrowUp') {
+                            _list[_list.length - (Math.abs(gap['ArrowUp']) + 1 - (index + 1))].focus();
+                        }
+                    }, 1);
+                    return;
+                }
+                if (list[index + gap[event.key]].tabIndex === 0) {
+                    list[index + gap[event.key]].focus();
+                    return;
+                }
+                for (let i = index; i < list.length; event.key === 'ArrowRight' || event.key === 'ArrowDown' ? i++ : i--) {
+                    if (list[i + gap[event.key]].tabIndex === 0) {
+                        list[i + gap[event.key]].focus();
+                        break;
+                    }
+                }
+            }
+        };
+        const handleCalendarMouseEnter = (date) => {
+            if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
+                return;
+            }
+            hoverDate.value = date;
+            emit('date-hover', getDateBySelectionType(date, props.selectionType));
+        };
+        const handleCalendarMouseLeave = () => {
+            hoverDate.value = null;
+            emit('date-hover', null);
+        };
+        const handleNavigationOnClick = (direction, double = false) => {
+            if (direction === 'prev') {
+                if (double) {
+                    setCalendarPage(view.value === 'years' ? -10 : -1);
+                    return;
+                }
+                if (view.value !== 'days') {
+                    setCalendarPage(-1);
+                    return;
+                }
+                setCalendarPage(0, -1);
+                return;
+            }
+            if (direction === 'next') {
+                if (double) {
+                    setCalendarPage(view.value === 'years' ? 10 : 1);
+                    return;
+                }
+                if (view.value !== 'days') {
+                    setCalendarPage(1);
+                    return;
+                }
+                setCalendarPage(0, 1);
+                return;
+            }
+        };
+        const Calendar = (_calendarDate) => {
+            const monthDetails = getMonthDetails(_calendarDate.getFullYear(), _calendarDate.getMonth(), props.firstDayOfWeek);
+            const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4);
+            const listOfYears = createGroupsInArray(getYears(_calendarDate.getFullYear()), 4);
+            const weekDays = monthDetails[0].days;
+            return h('table', {}, [
+                view.value === 'days' &&
+                    h('thead', {}, h('tr', {}, [
+                        props.showWeekNumber &&
+                            h('th', { class: 'calendar-cell' }, h('div', { class: 'calendar-header-cell-inner' }, props.weekNumbersLabel)),
+                        weekDays.map(({ date }) => {
+                            return h('th', { class: 'calendar-cell' }, h('div', {
+                                class: 'calendar-header-cell-inner',
+                            }, typeof props.weekdayFormat === 'function'
+                                ? props.weekdayFormat(date)
+                                : typeof props.weekdayFormat === 'string'
+                                    ? date.toLocaleDateString(props.locale, {
+                                        weekday: props.weekdayFormat,
+                                    })
+                                    : date
+                                        .toLocaleDateString(props.locale, { weekday: 'long' })
+                                        .slice(0, props.weekdayFormat)));
+                        }),
+                    ])),
+                h('tbody', {}, [
+                    view.value === 'days' &&
+                        monthDetails.map((week) => {
+                            const date = convertToDateObject(week.weekNumber === 0
+                                ? `${_calendarDate.getFullYear()}W53`
+                                : `${_calendarDate.getFullYear()}W${week.weekNumber}`, props.selectionType);
+                            const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates);
+                            const current = week.days.some((day) => day.month === 'current');
+                            return h('tr', {
+                                class: [
+                                    'calendar-row',
+                                    {
+                                        disabled: isDisabled,
+                                        range: props.selectionType === 'week' &&
+                                            isDateInRange(date, startDate.value, endDate.value),
+                                        'range-hover': props.selectionType === 'week' && hoverDate.value && selectEndDate.value
+                                            ? isDateInRange(date, startDate.value, hoverDate.value)
+                                            : isDateInRange(date, hoverDate.value, endDate.value),
+                                        selected: isDateSelected(date, startDate.value, endDate.value),
+                                    },
+                                ],
+                                tabindex: props.selectionType === 'week' && current && !isDisabled ? 0 : -1,
+                                ...(props.selectionType === 'week' &&
+                                    !isDisabled && {
+                                    onBlur: () => handleCalendarMouseLeave(),
+                                    onClick: () => handleCalendarClick(date),
+                                    onFocus: () => handleCalendarMouseEnter(date),
+                                    onKeydown: (event) => handleCalendarKeyDown(event, date),
+                                    onMouseEnter: () => handleCalendarMouseEnter(date),
+                                    onMouseLeave: () => handleCalendarMouseLeave(),
+                                }),
+                            }, [
+                                props.showWeekNumber &&
+                                    h('th', { class: 'calendar-cell-week-number' }, week.weekNumber === 0 ? 53 : week.weekNumber),
+                                week.days.map(({ date, month }) => {
+                                    const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates);
+                                    return month === 'current' || props.showAdjacementDays
+                                        ? h('td', {
+                                            class: [
+                                                'calendar-cell',
+                                                {
+                                                    ...(props.selectionType === 'day' && {
+                                                        clickable: month !== 'current' && props.selectAdjacementDays,
+                                                        disabled: isDisabled,
+                                                        'range-hover': month === 'current' &&
+                                                            (hoverDate.value && selectEndDate.value
+                                                                ? isDateInRange(date, startDate.value, hoverDate.value)
+                                                                : isDateInRange(date, hoverDate.value, endDate.value)),
+                                                        range: month === 'current' &&
+                                                            isDateInRange(date, startDate.value, endDate.value),
+                                                        selected: isDateSelected(date, startDate.value, endDate.value),
+                                                    }),
+                                                    [month]: true,
+                                                    today: month === 'current' && isToday(date),
+                                                },
+                                            ],
+                                            tabindex: props.selectionType === 'day' &&
+                                                (month === 'current' || props.selectAdjacementDays) &&
+                                                !isDisabled
+                                                ? 0
+                                                : -1,
+                                            title: date.toLocaleDateString(props.locale),
+                                            ...(props.selectionType === 'day' &&
+                                                (month === 'current' || props.selectAdjacementDays) && {
+                                                onBlur: () => handleCalendarMouseLeave(),
+                                                onClick: () => handleCalendarClick(date),
+                                                onFocus: () => handleCalendarMouseEnter(date),
+                                                onKeydown: (event) => handleCalendarKeyDown(event, date),
+                                                onMouseEnter: () => handleCalendarMouseEnter(date),
+                                                onMouseLeave: () => handleCalendarMouseLeave(),
+                                            }),
+                                            ...(month !== 'current' &&
+                                                !props.selectAdjacementDays && {
+                                                onMouseEnter: () => handleCalendarMouseLeave(),
+                                            }),
+                                        }, h('div', {
+                                            class: 'calendar-cell-inner',
+                                        }, typeof props.dayFormat === 'function'
+                                            ? props.dayFormat(date)
+                                            : date.toLocaleDateString(props.locale, {
+                                                day: props.dayFormat,
+                                            })))
+                                        : h('td');
+                                }),
+                            ]);
+                        }),
+                    view.value === 'months' &&
+                        listOfMonths.map((row, index) => {
+                            return h('tr', {}, row.map((month, idx) => {
+                                const monthNumber = index * 3 + idx;
+                                const date = new Date(Date.UTC(_calendarDate.getFullYear(), monthNumber, 1));
+                                const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates);
+                                return h('td', {
+                                    class: [
+                                        'calendar-cell',
+                                        {
+                                            disabled: isDisabled,
+                                            selected: isDateSelected(date, startDate.value, endDate.value),
+                                            'range-hover': props.selectionType === 'month' &&
+                                                (hoverDate && selectEndDate
+                                                    ? isDateInRange(date, startDate.value, hoverDate.value)
+                                                    : isDateInRange(date, hoverDate.value, endDate.value)),
+                                            range: isDateInRange(date, startDate.value, endDate.value),
+                                        },
+                                    ],
+                                    tabindex: !isDisabled ? 0 : -1,
+                                    ...(!isDisabled && {
+                                        onBlur: () => handleCalendarMouseLeave(),
+                                        onClick: () => handleCalendarClick(date),
+                                        onFocus: () => handleCalendarMouseEnter(date),
+                                        onKeydown: (event) => handleCalendarKeyDown(event, date),
+                                        onMouseEnter: () => handleCalendarMouseEnter(date),
+                                        onMouseLeave: () => handleCalendarMouseLeave(),
+                                    }),
+                                }, h('div', { class: 'calendar-cell-inner' }, month));
+                            }));
+                        }),
+                    view.value === 'years' &&
+                        listOfYears.map((row) => {
+                            return h('tr', {}, row.map((year) => {
+                                const date = new Date(Date.UTC(year, 0, 1));
+                                const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates);
+                                return h('td', {
+                                    class: [
+                                        'calendar-cell year',
+                                        {
+                                            disabled: isDisabled,
+                                            selected: isDateSelected(date, startDate.value, endDate.value),
+                                            'range-hover': props.selectionType === 'year' &&
+                                                (hoverDate && selectEndDate
+                                                    ? isDateInRange(date, startDate.value, hoverDate.value)
+                                                    : isDateInRange(date, hoverDate.value, endDate.value)),
+                                            range: isDateInRange(date, startDate.value, endDate.value),
+                                        },
+                                    ],
+                                    tabindex: !isDisabled ? 0 : -1,
+                                    ...(!isDisabled && {
+                                        onBlur: () => handleCalendarMouseLeave(),
+                                        onClick: () => handleCalendarClick(date),
+                                        onFocus: () => handleCalendarMouseEnter(date),
+                                        onKeydown: (event) => handleCalendarKeyDown(event, date),
+                                        onMouseEnter: () => handleCalendarMouseEnter(date),
+                                        onMouseLeave: () => handleCalendarMouseLeave(),
+                                    }),
+                                }, h('div', { class: 'calendar-cell-inner' }, year));
+                            }));
+                        }),
+                ]),
+            ]);
+        };
+        const Navigation = (_calendarDate) => {
+            return h('div', { class: 'calendar-nav' }, [
+                props.navigation &&
+                    h('div', {
+                        class: 'calendar-nav-prev',
+                    }, [
+                        h(CButton, {
+                            color: 'transparent',
+                            size: 'sm',
+                            onClick: () => handleNavigationOnClick('prev', true),
+                        }, {
+                            /**
+                             * @slot Location for double previous icon.
+                             */
+                            default: () => slots.navPrevDoubleIcon
+                                ? slots.navPrevDoubleIcon()
+                                : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-prev' }),
+                        }),
+                        view.value === 'days' &&
+                            h(CButton, {
+                                color: 'transparent',
+                                size: 'sm',
+                                onClick: () => handleNavigationOnClick('prev'),
+                            }, {
+                                /**
+                                 * @slot Location for previous icon.
+                                 */
+                                default: () => slots.navPrevIcon
+                                    ? slots.navPrevIcon()
+                                    : h('span', { class: 'calendar-nav-icon calendar-nav-icon-prev' }),
+                            }),
+                    ]),
+                h('div', {
+                    class: 'calendar-nav-date',
+                    ...(props.navYearFirst && { style: { display: 'flex', justifyContent: 'center' } }),
+                }, [
+                    view.value === 'days' &&
+                        h(CButton, {
+                            color: 'transparent',
+                            size: 'sm',
+                            onClick: () => {
+                                if (props.navigation)
+                                    view.value = 'months';
+                            },
+                        }, () => _calendarDate.toLocaleDateString(props.locale, { month: 'long' })),
+                    h(CButton, {
+                        color: 'transparent',
+                        size: 'sm',
+                        onClick: () => {
+                            if (props.navigation)
+                                view.value = 'years';
+                        },
+                        ...(props.navYearFirst && { style: { order: '-1' } }),
+                    }, () => _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' })),
+                ]),
+                props.navigation &&
+                    h('div', {
+                        class: 'calendar-nav-next',
+                    }, [
+                        view.value === 'days' &&
+                            h(CButton, {
+                                color: 'transparent',
+                                size: 'sm',
+                                onClick: () => handleNavigationOnClick('next'),
+                            }, {
+                                /**
+                                 * @slot Location for next icon.
+                                 */
+                                default: () => slots.navNextIcon
+                                    ? slots.navNextIcon()
+                                    : h('span', { class: 'calendar-nav-icon calendar-nav-icon-next' }),
+                            }),
+                        h(CButton, {
+                            color: 'transparent',
+                            size: 'sm',
+                            onClick: () => handleNavigationOnClick('next', true),
+                        }, {
+                            /**
+                             * @slot Location for double next icon.
+                             */
+                            default: () => slots.navNextDoubleIcon
+                                ? slots.navNextDoubleIcon()
+                                : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-next' }),
+                        }),
+                    ]),
+            ]);
+        };
+        return () => h('div', {
+            class: [
+                'calendars',
+                {
+                    [`select-${props.selectionType}`]: props.selectionType && view.value === 'days',
+                    'show-week-numbers': props.showWeekNumber,
+                },
+            ],
+            ref: calendarRef,
+        }, [
+            Array.from({ length: props.calendars }, (_, index) => {
+                const _calendarDate = getCalendarDate(calendarDate.value, index, view.value);
+                return h('div', { class: ['calendar', view.value] }, [
+                    Navigation(_calendarDate),
+                    Calendar(_calendarDate),
+                ]);
+            }),
+        ]);
+    },
+});
+
+export { CCalendar };
+//# sourceMappingURL=CCalendar.js.map