### Install Vanilla Calendar Pro Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/README.md Use npm or yarn to add the package to your project. ```sh npm install vanilla-calendar-pro # or yarn add vanilla-calendar-pro ``` -------------------------------- ### Install Vanilla Calendar Pro via package manager Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/installation-and-usage.mdx Use npm, yarn, or pnpm to add the package to your project dependencies. ```bash npm install vanilla-calendar-pro # or yarn add vanilla-calendar-pro # or pnpm add vanilla-calendar-pro ``` -------------------------------- ### Integrate via CDN Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/installation-and-usage.mdx Include the library directly in your HTML file using a CDN link for quick setup without build tools. ```html
``` -------------------------------- ### Set Initial Time Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/date-management-enable-time-picker.mdx Defines the starting time upon calendar initialization. ```javascript ``` -------------------------------- ### Set Initial Month Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Defines the starting month (0-11) for the calendar display. ```ts new Calendar('#calendar', { selectedMonth: 0, }); ``` -------------------------------- ### Integrate with Vue Source: https://context7.com/uvarov-frontend/vanilla-calendar-pro/llms.txt Implement a reusable Vue component using the Composition API and script setup. ```vue ``` -------------------------------- ### First Weekday Setting Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Sets the starting day of the week for the calendar display. ```APIDOC ## firstWeekday ### Description This parameter sets the first day of the week. Specify a number from 0 to 6, where the number represents the day of the week identifier. According to JS standards, the days of the week start with 0, and 0 is Sunday. ### Method Not Applicable (Configuration Option) ### Endpoint Not Applicable (Configuration Option) ### Parameters #### Query Parameters - **firstWeekday** (Number) - Required - Options: from 0 to 6 ### Request Example ```json { "firstWeekday": 1 } ``` ### Response #### Success Response (200) - **firstWeekday** (Number) - The identifier for the first day of the week. #### Response Example ```json { "firstWeekday": 1 } ``` ``` -------------------------------- ### Set Initial Year Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Defines the starting year (YYYY) for the calendar display. ```ts new Calendar('#calendar', { selectedYear: 2022, }); ``` -------------------------------- ### Create VanillaCalendar React Component Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/components-for-libraries-react.mdx This component initializes Vanilla Calendar Pro within a React application. It accepts configuration options and standard HTML attributes. Ensure you have 'vanilla-calendar-pro' installed. ```tsx import { useEffect, useRef, useState } from 'react'; import { Options, Calendar } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/styles/index.css'; interface CalendarProps extends React.HTMLAttributes { config?: Options, } function VanillaCalendar({ config, ...attributes }: CalendarProps) { const ref = useRef(null); const [calendar, setCalendar] = useState(null); useEffect(() => { if (!ref.current) return; setCalendar(new Calendar(ref.current, config)); }, [ref, config]) useEffect(() => { if (!calendar) return; calendar.init() }, [calendar]) return (
) } export default VanillaCalendar; ``` -------------------------------- ### Define First Weekday Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Sets the starting day of the week using a numeric index from 0 (Sunday) to 6 (Saturday). ```ts new Calendar('#calendar', { firstWeekday: 1, }); ``` -------------------------------- ### Define Custom Calendar Layout Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/README.md Configure the calendar structure by defining a custom layout string with component tags. Components are identified by tags starting with # and ending with a slash. ```javascript new Calendar('#calendar', { layouts: { default: `
<#WeekNumbers />
<#Week /> <#Dates /> <#DateRangeTooltip />
<#ControlTime /> ` } }); ``` -------------------------------- ### Create a Calendar with Multiple Date Range Selection Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/type-multiple.mdx Configure the calendar to allow users to select date ranges within multiple displayed months. Set `selectionDatesMode` to 'multiple-ranged'. For performance, only start and end dates are stored by default; use `enableEdgeDatesOnly` to control this behavior. ```javascript const calendar = new VanillaCalendar("#calendar", { type: "multiple", selectionDatesMode: "multiple-ranged", enableEdgeDatesOnly: true, // Optional: optimize performance by storing only start and end dates }); calendar.show(); ``` -------------------------------- ### Configure enableEdgeDatesOnly Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Restricts selection to only the start and end dates in 'multiple-ranged' mode. ```ts new Calendar('#calendar', { enableEdgeDatesOnly: true, }); ``` -------------------------------- ### Creating an Instance Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/creating-an-instance.mdx Instantiate Vanilla Calendar Pro using a CSS selector or HTML element. The first parameter is the element to initialize the calendar in, and the second optional parameter is for configuration settings. ```APIDOC ## Creating an Instance `new Calendar()` - creates an instance of **Vanilla Calendar Pro**, which is an encapsulation of the calendar, its settings, and methods. If you included **Vanilla Calendar Pro** using the `
``` -------------------------------- ### onInit() Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/actions.mdx Callback function triggered during calendar initialization. If `inputMode` is true, it executes on the first display. ```APIDOC ## onInit() ### Description This method is triggered during calendar initialization. If the `inputMode` parameter is set to `true`, the method will execute on the first display of the calendar, as this is when the calendar is initialized. ### Parameters - **self** (object) - reference to the initialized calendar. ### Request Example ```javascript new Calendar('#calendar', { onInit(self) { // custom initialization logic }, }); ``` ``` -------------------------------- ### init() Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/methods.mdx Initializes the calendar instance. ```APIDOC ## init() ### Description The init() method is the main instance method that starts the calendar initialization process. ### Request Example const calendar = new Calendar(element, params); calendar.init(); ``` -------------------------------- ### Initialize Calendar Instance Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/README.md Import the library and styles, then initialize the calendar on a target element. ```js import { Calendar } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/styles/index.css'; // Initialize the calendar const calendar = new Calendar('#calendar'); calendar.init(); // or // const calendarWithInput = new Calendar('#calendar-input', { inputMode: true }); // calendarWithInput.init(); ``` -------------------------------- ### Calendar Configuration Parameters Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Configuration options for the Vanilla Calendar Pro instance. ```APIDOC ## Configuration Parameters ### selectedTime - **Type**: String - **Default**: null - **Options**: 'hh:mm aa' | null - **Description**: Sets the initial time displayed. Format is 'hh:mm aa'. ### selectedTheme - **Type**: String - **Default**: 'system' - **Options**: string | 'light' | 'dark' | 'system' - **Description**: Defines the visual theme of the calendar. ### timeMinHour / timeMaxHour - **Type**: Number - **Default**: 0 / 23 - **Options**: 0 to 23 - **Description**: Specifies the minimum and maximum hour allowed for selection. ### timeMinMinute / timeMaxMinute - **Type**: Number - **Default**: 0 / 59 - **Options**: 0 to 59 - **Description**: Specifies the minimum and maximum minute allowed for selection. ### timeControls - **Type**: String - **Default**: 'all' - **Options**: 'all' | 'range' - **Description**: Defines the method of time selection. ### timeStepHour / timeStepMinute - **Type**: Number - **Default**: 1 - **Options**: 1 to 23 (hour) / 1 to 59 (minute) - **Description**: Sets the increment step for the hour or minute controller. ### sanitizerHTML - **Type**: Function - **Default**: (html) => html - **Description**: A function used to sanitize HTML templates for security purposes. ``` -------------------------------- ### getWeekNumber Utility Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/utilities.mdx The `getWeekNumber` utility calculates the year and week number for a given date string and week start day. ```APIDOC ## getWeekNumber Utility ### Description Calculates the year and week number for a specified date and week start day. ### Function Signature `getWeekNumber(date: FormatDateString, weekStartDay: WeekDayID)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **date** (string) - Required - The date string in 'YYYY-MM-DD' format. - **weekStartDay** (number) - Required - The ID of the week start day (0 for Sunday, 1 for Monday, ..., 6 for Saturday). ### Request Example ```json { "date": "2024-12-12", "weekStartDay": 1 } ``` ### Response #### Success Response (200) - **weekInfo** (object) - An object containing the year and week number. - **year** (number) - The year. - **week** (number) - The week number. #### Response Example ```json { "weekInfo": { "year": 2024, "week": 50 } } ``` ``` -------------------------------- ### Initialize Vanilla Calendar Pro Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/package/public/index.html Instantiate the Vanilla Calendar Pro component and initialize it on a target element. Ensure the DOM is fully loaded before initialization. The `getDateString` utility can be used for date formatting. ```javascript document.addEventListener('DOMContentLoaded', () => { const { Calendar } = window.VanillaCalendarPro; const { getDateString } = window.VanillaCalendarProUtils; const calendar = new Calendar('#calendar'); calendar.init(); console.log('A copy of the calendar:', calendar); console.log('Date string conversion utility:', getDateString(new Date())); }); ``` -------------------------------- ### Calculate week numbers with getWeekNumber Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/utilities.mdx Returns the year and week number for a given date string based on a specified start day of the week. ```ts import { getWeekNumber } from 'vanilla-calendar-pro/utils'; getWeekNumber('2024-12-12', 1); // return: {year: 2024, week: 50} ``` -------------------------------- ### Import calendar styles Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/installation-and-usage.mdx Include the necessary CSS files for layout and themes. ```ts import 'vanilla-calendar-pro/styles/index.css'; ``` ```ts import 'vanilla-calendar-pro/styles/layout.css'; // Only the skeleton import 'vanilla-calendar-pro/styles/themes/light.css'; // Light theme import 'vanilla-calendar-pro/styles/themes/dark.css'; // Dark theme // or any other custom theme... ``` -------------------------------- ### Initialize Calendar with onInit Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/actions.mdx This method is triggered during calendar initialization. If `inputMode` is true, it executes on the first display of the calendar. ```javascript new Calendar('#calendar', { onInit(self) {}, }); ``` -------------------------------- ### Initialize Calendar with Settings Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/creating-an-instance.mdx Create a new Calendar instance and provide an optional second argument to configure its settings. This object allows customization of the calendar's behavior and appearance. ```typescript new Calendar('#calendar', { // Settings }); ``` -------------------------------- ### Initialize calendar instance Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/installation-and-usage.mdx Import the Calendar class, instantiate it with a selector, and call the init method. ```ts import { Calendar } from 'vanilla-calendar-pro'; const calendar = new Calendar('#calendar', { // Your settings }); calendar.init(); ``` -------------------------------- ### Create VanillaCalendar Vue Component Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/components-for-libraries-vue.mdx This script sets up a Vue component that initializes Vanilla Calendar Pro. It imports necessary modules, defines props for configuration, and uses `onMounted` to create and initialize the calendar instance. ```vue ``` -------------------------------- ### Basic Popup Configuration Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/popups.mdx Configure popups by specifying dates as keys in the `popups` object. The date format should be 'YYYY-MM-DD'. ```APIDOC ## Configuration ### Popups Popups allow you to highlight any day and display brief information about it directly in the calendar when hovering over the day. #### `popups['date']` * **Type**: String * **Default**: null * **Options**: 'YYYY-MM-DD' | null **Example**: ```ts new Calendar('#calendar', { popups: { '2022-06-28': {}, } }); ``` Dates in the format `YYYY-MM-DD` are used as keys. In the given example, a popup is set for June 28, 2022. ``` -------------------------------- ### Initialize Basic Calendar Source: https://context7.com/uvarov-frontend/vanilla-calendar-pro/llms.txt Create and initialize a basic calendar instance with default configuration to display a single month. ```typescript import { Calendar } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/styles/index.css'; // Create and initialize a basic calendar const calendar = new Calendar('#calendar'); calendar.init(); // Access selected dates after user interaction console.log(calendar.context.selectedDates); // ['2024-03-15'] ``` -------------------------------- ### Configure Themes Source: https://context7.com/uvarov-frontend/vanilla-calendar-pro/llms.txt Enable automatic theme switching or custom themes by tracking specific HTML attributes. ```typescript import { Calendar, type Options } from 'vanilla-calendar-pro'; // Import specific theme styles import 'vanilla-calendar-pro/styles/layout.css'; import 'vanilla-calendar-pro/styles/themes/light.css'; import 'vanilla-calendar-pro/styles/themes/dark.css'; const options: Options = { selectedTheme: 'system', // 'light' | 'dark' | 'system' | 'custom-theme' themeAttrDetect: 'html[data-theme]', // Track attribute for theme changes // Or disable auto-detection: themeAttrDetect: false }; const calendar = new Calendar('#calendar', options); calendar.init(); ``` -------------------------------- ### Configuration: styles parameter Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/styles.mdx This configuration allows for the complete replacement of default CSS classes with custom ones to facilitate styling integration. ```APIDOC ## Configuration: styles ### Description The `styles` parameter provides the ability to override any CSS class in the calendar. You can replace any default values with a list of custom CSS classes. ### Parameters #### Request Body - **styles** (object) - Optional - An object mapping internal calendar elements to CSS class strings. Supported keys include: calendar, controls, grid, column, header, headerContent, month, year, arrowPrev, arrowNext, wrapper, content, months, monthsMonth, years, yearsYear, week, weekDay, weekNumbers, weekNumbersTitle, weekNumbersContent, weekNumber, dates, date, dateBtn, datePopup, dateRangeTooltip, time, timeContent, timeHour, timeMinute, timeKeeping, timeRanges, timeRange. ### Request Example ```ts new Calendar('#calendar', { styles: { calendar: 'vc', controls: 'vc-controls', grid: 'vc-grid', // ... other class overrides } }); ``` ``` -------------------------------- ### Configure Month Selection Layout Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/layouts.mdx Set up the layout for the month selection view, which displays a grid of months for the user to choose from. ```typescript new Calendar("#calendar", { layouts: { month: `
<#Months />
` } }); ``` -------------------------------- ### Import CSS Styles Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/README.md Import the base layout and specific theme files to style the calendar. Use layout.css with a specific theme for better control than the all-inclusive index.css. ```javascript // Only layout calendar import 'vanilla-calendar-pro/styles/layout.css'; // Themes import 'vanilla-calendar-pro/styles/themes/light.css'; import 'vanilla-calendar-pro/styles/themes/dark.css'; // ...and others ``` -------------------------------- ### Vanilla Calendar Pro API Configuration Object Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/wiki/[Migration-from-v2.*.*]-New-API-for-all-options-and-actions-in-v3.0.0 This object represents the default configuration for Vanilla Calendar Pro. It includes all parameters and actions with their default values and comments indicating the old option names for migration purposes. Use this as a reference for customizing calendar behavior and appearance. ```javascript { type: 'default', // type inputMode: false, // input positionToInput: 'left', // settings.visibility.positionToInput firstWeekday: 1, // settings.iso8601 monthsToSwitch: 1, // jumpMonths themeAttrDetect: 'html[data-theme]', // settings.visibility.themeDetect locale: 'en', // settings.lang // Or specify an object for your labels // locale: { // months: { // long: [], // short: [], // }, // weekday: { // long: [], // short: [], // } // }, dateToday: 'today', //date.today dateMin: '1970-01-01', // date.min dateMax: '2470-12-31', // date.max displayDateMin: undefined, // settings.range.min displayDateMax: undefined, // settings.range.max displayDatesOutside: true, // settings.visibility.daysOutside displayDisabledDates: false, // settings.visibility.disabled displayMonthsCount: undefined, // months disableDates: [], // settings.range.disabled disableAllDates: false, // settings.range.disableAllDays disableDatesPast: false, // settings.range.disablePast disableDatesGaps: false, // settings.range.disableGaps disableWeekdays: [], // settings.range.disableWeekday disableToday: false, // settings.visibility.today enableDates: [], // settings.range.enabled enableEdgeDatesOnly: true, // settings.range.edgesOnly enableDateToggle: true, // toggleSelected or cancelableDay enableWeekNumbers: false, // settings.visibility.weekNumbers enableMonthChangeOnDayClick: true, // switchMonthForDate enableJumpToSelectedDate: false, // jumpToSelectedDate selectionDatesMode: 'single', // settings.selection.day selectionMonthsMode: true, // settings.selection.month selectionYearsMode: true, // settings.selection.year selectionTimeMode: false, // settings.selection.time selectedDates: [], // settings.selected.dates selectedMonth: undefined, // settings.selected.month selectedYear: undefined, // settings.selected.year selectedHolidays: [], // settings.selected.holidays selectedWeekends: [0, 6], // settings.selected.weekend selectedTime: undefined, // settings.selected.time selectedTheme: 'system', // settings.visibility.theme timeMinHour: 0, // settings.range.hourMin timeMaxHour: 23, // settings.range.hourMax timeMinMinute: 0, // settings.range.minuteMin timeMaxMinute: 59, // settings.range.minuteMax timeControls: 'all', // settings.selection.controlTime timeStepHour: 1, // settings.selection.stepHours timeStepMinute: 1, // settings.selection.stepMinutes sanitizerHTML: (dirtyHTML) => dirtyHTML, // sanitizer onClickDate: undefined, // actions.clickDay onClickWeekDay: undefined, // actions.clickWeekDay onClickWeekNumber: undefined, // actions.clickWeekNumber onClickTitle: undefined, // actions.clickTitle onClickMonth: undefined, // actions.clickMonth onClickYear: undefined, // actions.clickYear onClickArrow: undefined, // actions.clickArrow onChangeTime: undefined, // actions.changeTime onChangeToInput: undefined, // actions.changeToInput onCreateDateRangeTooltip: undefined, // new onCreateDateEls: undefined, // actions.getDays onCreateMonthEls: undefined, // actions.getMonths onCreateYearEls: undefined, // actions.getYears onInit: undefined, // actions.initCalendar onUpdate: undefined, // actions.updateCalendar onDestroy: undefined, // actions.destroyCalendar onShow: undefined, // actions.showCalendar onHide: undefined, // actions.hideCalendar popups: {}, // popups labels: { // new application: 'Calendar', navigation: 'Calendar Navigation', arrowNext: { month: 'Next month', year: 'Next list of years', }, arrowPrev: { month: 'Previous month', year: 'Previous list of years', }, month: 'Select month, current selected month:', months: 'List of months', year: 'Select year, current selected year:', years: 'List of years', week: 'Days of the week', weekNumber: 'Numbers of weeks in a year', dates: 'Dates in the current month', selectingTime: 'Selecting a time ', inputHour: 'Hours', inputMinute: 'Minutes', rangeHour: 'Slider for selecting hours', ``` -------------------------------- ### Initialize Calendar with onCreateDateRangeTooltip Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/actions.mdx Use this callback to create a tooltip for a date range. It triggers on clicking and hovering over a day when `selectionDatesMode` is set to 'multiple-ranged'. ```javascript new Calendar('#calendar', { onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) {}, }); ``` -------------------------------- ### Configure Time Step and Input Control Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/date-management-enable-time-picker.mdx Sets the time step for hours and minutes and toggles manual input capability. ```javascript ``` -------------------------------- ### Control Calendar via Instance Methods Source: https://context7.com/uvarov-frontend/vanilla-calendar-pro/llms.txt Use instance methods to update configuration, perform batch updates, toggle visibility, or destroy the calendar instance. ```typescript import { Calendar, type Options } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/styles/index.css'; const calendar = new Calendar('#calendar', { selectedMonth: 0, selectedYear: 2024, }); calendar.init(); // Update calendar with new options calendar.locale = 'de-DE'; calendar.firstWeekday = 0; // Start week on Sunday calendar.update({ dates: true, // Reset selected dates month: false, // Keep current month year: false, // Keep current year time: true, // Reset time }); // Or use set() for batch updates calendar.set({ locale: 'fr-FR', selectedMonth: 5, selectedYear: 2025, selectedDates: ['2025-06-15'], }, { dates: false, // Preserve dates from options }); // Show/hide for inputMode calendars calendar.show(); calendar.hide(); // Destroy the calendar completely calendar.destroy(); ``` -------------------------------- ### Initialize Calendar with onShow Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/actions.mdx This callback is triggered when the calendar is displayed to the user, but only if the `inputMode` parameter is set to `true`. ```javascript new Calendar('#calendar', { onShow(self) {}, }); ``` -------------------------------- ### Initialize Selected Dates Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Sets the initial list of selected dates, supporting strings, timestamps, or Date objects. ```ts new Calendar('#calendar', { selectedDates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()], }); ``` -------------------------------- ### Handle Click on a Day Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/handle-click-a-day.mdx Use the onClickDate() action to log the selected day to the console. The selected day is returned as an array. ```javascript const calendar = new VanillaCalendar("#calendar", { ... "actions": { "onClickDate": (event, dates) => { console.log(dates); } } }); calendar.VanillaCalendar.build(); ``` -------------------------------- ### Date Enabling and Selection Modes Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Configure enabling specific dates and edge date selection. ```APIDOC ## enableDates ### Description This parameter allows you to enable specified dates, regardless of the range and disabled dates. To specify a date range, use any delimiter between dates within a single string. ### Method Configuration Option ### Endpoint N/A ### Parameters #### Query Parameters - **enableDates** (String[] | Number[] | Date[]) - Optional - An array of dates to enable. Defaults to `null`. Accepts formats like `['YYYY-MM-DD']`, `[Number]`, `[Date]`, or `null`. ### Request Example ```json { "enableDates": ["2022-08-11:2022-08-16", "2022-08-20", 1722152977141, new Date()] } ``` ### Response #### Success Response (200) N/A #### Response Example N/A ## enableEdgeDatesOnly ### Description This parameter allows you to get only the start and end dates selected by the user, ignoring intermediate dates. This parameter only works if `selectionDatesMode` is set to `'multiple-ranged'`. It is important to note that when using this parameter, disabled dates within the date range will have no effect. Therefore, use this option only if you are interested in the start and end dates selected by the user. ### Method Configuration Option ### Endpoint N/A ### Parameters #### Query Parameters - **enableEdgeDatesOnly** (Boolean) - Optional - Whether to enable only edge dates for selection. Defaults to `true`. Only works with `selectionDatesMode: 'multiple-ranged'`. ### Request Example ```json { "enableEdgeDatesOnly": true } ``` ### Response #### Success Response (200) N/A #### Response Example N/A ``` -------------------------------- ### Months to Switch Setting Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Configures the number of months that can be navigated at once. ```APIDOC ## monthsToSwitch ### Description The `monthsToSwitch` parameter controls the number of switchable months. ### Method Not Applicable (Configuration Option) ### Endpoint Not Applicable (Configuration Option) ### Parameters #### Query Parameters - **monthsToSwitch** (Number) - Required - Options: from 1 to 12 ### Request Example ```json { "monthsToSwitch": 1 } ``` ### Response #### Success Response (200) - **monthsToSwitch** (Number) - The number of months that can be switched. #### Response Example ```json { "monthsToSwitch": 1 } ``` ``` -------------------------------- ### Implement Popups and Tooltips Source: https://context7.com/uvarov-frontend/vanilla-calendar-pro/llms.txt Attach custom HTML content to specific dates and define dynamic tooltips for date range selections. ```typescript import { Calendar, type Options } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/styles/index.css'; const options: Options = { selectedMonth: 6, selectedYear: 2024, popups: { '2024-07-03': { modifier: 'bg-red text-white', // Custom CSS classes html: `
12:00 PM

Team Meeting

`, }, '2024-07-15': { modifier: 'bg-blue', html: 'Project Deadline', }, }, // For date range tooltips selectionDatesMode: 'multiple-ranged', onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) { const daysCount = self.context.selectedDates.length; return `${daysCount} days selected`; }, }; const calendar = new Calendar('#calendar', options); calendar.init(); ``` -------------------------------- ### Define Calendar HTML Structure Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/README.md Set up the target element in your HTML file where the calendar will be rendered. ```html
``` -------------------------------- ### Create a Calendar with Multiple Months Selection Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/type-multiple.mdx Use this configuration to display multiple months and allow users to select individual dates across them. Ensure the `selectionDatesMode` is set to 'multiple'. ```javascript const calendar = new VanillaCalendar("#calendar", { type: "multiple", selectionDatesMode: "multiple", }); calendar.show(); ``` -------------------------------- ### Define calendar container in HTML Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/installation-and-usage.mdx Create a target element in your HTML document to host the calendar instance. ```html
``` -------------------------------- ### Configure Time Picker Source: https://context7.com/uvarov-frontend/vanilla-calendar-pro/llms.txt Enable time selection with options for 12-hour or 24-hour format, time range limits, step intervals, and controls. The `onChangeTime` callback handles time selection events and errors. ```typescript import { Calendar, type Options } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/styles/index.css'; const options: Options = { selectionTimeMode: 24, // Use 12 for AM/PM format selectedTime: '14:30', // Initial time (use '02:30 PM' for 12-hour) timeMinHour: 9, timeMaxHour: 18, timeMinMinute: 0, timeMaxMinute: 59, timeStepHour: 1, timeStepMinute: 15, // 15-minute intervals timeControls: 'all', // 'all' | 'range' (range = slider only) onChangeTime(self, event, isError) { if (isError) { console.log('Invalid time entered'); return; } console.log('Selected time:', self.context.selectedTime); // self.context.selectedHours, self.context.selectedMinutes }, }; const calendar = new Calendar('#calendar', options); calendar.init(); ``` -------------------------------- ### onCreateDateRangeTooltip() Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/actions.mdx Callback function to create a tooltip for a date range. It triggers on clicking and hovering over a day when `selectionDatesMode` is set to `'multiple-ranged'`. Provides access to calendar instance, date element, tooltip element, and their bounding rectangles. ```APIDOC ## onCreateDateRangeTooltip() ### Description Allows creating a tooltip for a date range. Triggers on clicking and hovering over a day if the `selectionDatesMode` parameter is set to `'multiple-ranged'`. ### Parameters - **self** (object) - reference to the initialized calendar. - **dateEl** (HTMLElement) - HTML date element; - **tooltipEl** (HTMLElement) - HTML tooltip element; - **dateElBCR** (object) - object with information about the position and size of the HTML date element; - **mainElBCR** (object) - object with information about the position and size of the main HTML calendar element. ### Request Example ```javascript new Calendar('#calendar', { onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) { // custom tooltip logic }, }); ``` ``` -------------------------------- ### layouts.default Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/layouts.mdx Defines the template for displaying a single month and its dates. ```APIDOC ## layouts.default ### Description This template defines the structure for a single-month calendar view. ### Configuration - **Type**: String ### Example ```ts new Calendar('#calendar', { layouts: { default: `
<#WeekNumbers />
<#Week /> <#Dates /> <#DateRangeTooltip />
<#ControlTime /> ` } }); ``` ``` -------------------------------- ### Enable Input Mode Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Configures the calendar to behave as a popup for an input field rather than a static wrapper. ```ts new Calendar('#calendar', { inputMode: true, }); ``` -------------------------------- ### Initialize Calendar for Multiple Months Source: https://context7.com/uvarov-frontend/vanilla-calendar-pro/llms.txt Configure the calendar to display multiple months side by side, suitable for date range selection. Options like `displayMonthsCount`, `monthsToSwitch`, and `selectionDatesMode: 'multiple-ranged'` are used. ```typescript import { Calendar, type Options } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/styles/index.css'; const options: Options = { type: 'multiple', displayMonthsCount: 2, monthsToSwitch: 2, displayDatesOutside: false, disableDatesPast: true, enableEdgeDatesOnly: true, // Only store start/end dates for performance selectionDatesMode: 'multiple-ranged', }; const calendar = new Calendar('#calendar', options); calendar.init(); // After user selects a range: // calendar.context.selectedDates returns ['2024-03-10', '2024-03-20'] ``` -------------------------------- ### layouts.multiple Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/layouts.mdx Defines the template for displaying multiple months simultaneously. ```APIDOC ## layouts.multiple ### Description This template defines the structure for a multi-month calendar view, utilizing the <#Multiple> component. ### Configuration - **Type**: String ### Example ```ts new Calendar('#calendar', { layouts: { multiple: `
<#Multiple>
<#Month /> <#Year />
<#WeekNumbers />
<#Week /> <#Dates />
<#/Multiple> <#DateRangeTooltip />
<#ControlTime /> ` } }); ``` ``` -------------------------------- ### Configure Calendar Themes Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/learn/additional-features-themes.mdx Use the Sandbox component to force specific themes or custom styles by setting themeDetection to false. ```jsx ``` ```jsx ``` ```jsx ``` -------------------------------- ### Initialize Calendar with onUpdate Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/actions.mdx This callback is triggered when the calendar is updated or reset using the `.update()` method. ```javascript new Calendar('#calendar', { onUpdate(self) {}, }); ``` -------------------------------- ### Configure Localization and Internationalization Source: https://context7.com/uvarov-frontend/vanilla-calendar-pro/llms.txt Set calendar language using BCP 47 tags or provide a custom locale object for months and weekdays. ```typescript import { Calendar, type Options } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/styles/index.css'; // Using BCP 47 language tag const options: Options = { locale: 'de-DE', // German locale firstWeekday: 1, // Monday (0 = Sunday, 1 = Monday, etc.) enableWeekNumbers: true, selectedWeekends: [0, 6], // Sunday and Saturday selectedHolidays: ['2024-12-25', '2024-12-26'], }; // Manual locale configuration const manualLocaleOptions: Options = { locale: { months: { long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], }, weekday: { long: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], short: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], }, }, }; const calendar = new Calendar('#calendar', options); calendar.init(); ``` -------------------------------- ### Configure Multiple Months Layout Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/layouts.mdx Define the layout for displaying multiple months and their dates simultaneously. This layout includes navigation controls and a grid structure for months. ```typescript new Calendar("#calendar", { layouts: { multiple: `
<#Multiple>
<#Month /> <#Year />
<#WeekNumbers />
<#Week /> <#Dates />
<#/Multiple> <#DateRangeTooltip />
<#ControlTime /> ` } }); ``` -------------------------------- ### Initialize Calendar with onCreateMonthEls Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/actions.mdx This callback is triggered when the calendar type is set to 'month', providing access to information about each month element. ```javascript new Calendar('#calendar', { onCreateMonthEls(self, monthEl) {}, }); ``` -------------------------------- ### Show Calendar Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/methods.mdx Use the `show()` method to make the calendar visible if it has been hidden. ```typescript calendar.show(); ``` -------------------------------- ### Calendar Configuration Object Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/wiki/[Migration-from-v2.*.*]-New-API-for-all-options-and-actions-in-v3.0.0 The primary configuration object used to initialize the calendar. It uses a flat structure for most options, with specific objects for locale, popups, and accessibility labels. ```APIDOC ## Calendar Configuration Object ### Description The configuration object defines the behavior, appearance, and interactivity of the Vanilla Calendar Pro instance. It replaces nested structures with a flat key-value format. ### Request Body - **type** (string) - Optional - Calendar type (default: 'default') - **inputMode** (boolean) - Optional - Enables input mode - **positionToInput** (string) - Optional - Positioning relative to input - **firstWeekday** (number) - Optional - ISO8601 first day of week - **monthsToSwitch** (number) - Optional - Number of months to jump - **themeAttrDetect** (string) - Optional - CSS selector for theme detection - **locale** (string|object) - Optional - Language tag or custom labels object - **dateToday** (string) - Optional - Date for 'today' - **dateMin** (string) - Optional - Minimum selectable date - **dateMax** (string) - Optional - Maximum selectable date - **displayDatesOutside** (boolean) - Optional - Show days outside current month - **disableDates** (array) - Optional - List of disabled dates - **selectionDatesMode** (string) - Optional - Selection mode (e.g., 'single') - **labels** (object) - Required - Accessibility labels for screen readers ### Request Example { "type": "default", "locale": "en", "selectionDatesMode": "single", "labels": { "application": "Calendar", "navigation": "Calendar Navigation" } } ``` -------------------------------- ### Theme Attribute Detection Setting Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/settings.mdx Enables automatic theme detection based on a specified HTML attribute. ```APIDOC ## themeAttrDetect ### Description To have the calendar automatically track and apply the site's theme, you can pass a string value in the form of a CSS selector. Square brackets indicate an attribute containing the theme name. By default, the `html` tag with the `data-theme` attribute is tracked, but you can configure any other attribute and tag, for example, `class`, if the class name is used to set the theme: `'html[class]'`. If set to `false`, the theme will be determined by the user's system or the `selectedTheme` parameter. ### Method Not Applicable (Configuration Option) ### Endpoint Not Applicable (Configuration Option) ### Parameters #### Query Parameters - **themeAttrDetect** (String | false) - Required - Options: string | false ### Request Example ```json { "themeAttrDetect": "html[data-theme]" } ``` ### Response #### Success Response (200) - **themeAttrDetect** (String | false) - The CSS selector for theme attribute detection or false. #### Response Example ```json { "themeAttrDetect": "html[data-theme]" } ``` ``` -------------------------------- ### show() / hide() Source: https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/docs/en/reference/methods.mdx Controls the visibility of the calendar. ```APIDOC ## show() ### Description Displays the calendar if it was hidden. ## hide() ### Description Hides the calendar if it was shown. ```