repository·main·Indexed 22 days ago
https://github.com/uvarov-frontend/vanilla-calendar-proA lightweight, dependency-free JavaScript date and time picker. It supports multiple instances, custom HTML layouts, and is compatible with any framework, including React and Vue. Key features include date and time range selection, automatic light/dark theme switching, accessibility via ARIA labels, and highly customizable CSS styling.
The Vanilla Calendar Pro API is organized into several functional areas to help you customize and control the calendar's behavior, appearance, and accessibility. The API surface includes:
'default' calendar type is the standard display mode. It shows a single month, allows day selection, provides navigation arrows to move between months, and includes headers to select the month and year directly.'year' calendar type displays a list of years. Users can select a year from the list and a month from the corresponding header. This mode is specifically designed to restrict user selection to only the year and month, preventing the selection of specific days.Layouts allow you to customize the DOM structure of the calendar and inject your own HTML elements (like custom buttons). Each calendar view type has its own default template that you can override via the layouts configuration object.
When defining a layout, you use special tags starting with # to represent registered calendar components.
<#Month /> or <#ArrowPrev [month] />.<#Multiple> component is a special case that wraps one or more months and requires a closing tag: <#Multiple> ... <#/Multiple>.All default templates provided by the library include all possible components for that specific layout type, which you can use as a reference when building your own.
Layouts allow you to redefine the HTML structure of the calendar. You can move or remove components by providing a custom string to the layouts option in the Calendar constructor.
Components are identified by tags containing a # and ending with a / (e.g., <#Month />). Some components can accept parameters in brackets, such as <#ArrowPrev [month] />.
new Calendar('#calendar', {
layouts: {
default: `
<div class="vc-header" data-vc="header" role="toolbar" aria-label="Calendar Navigation">
<#ArrowPrev [month] />
<div class="vc-header__content" data-vc-header="content">
<#Month />
<#Year />
</div>
<#ArrowNext [month] />
</div>
<div class="vc-wrapper" data-vc="wrapper">
<#WeekNumbers />
<div class="vc-content" data-vc="content">
<#Week />
<#Dates />
<#DateRangeTooltip />
</div>
</div>
<#ControlTime />
`
}
});You can choose how the calendar is presented to the user by how you target the element and which settings you use:
If the target element is a container (like a <div>), the calendar will be initialized and rendered directly inside that element.
<div id="calendar"></div>new Calendar('#calendar');If you want the calendar to appear as a popup when a specific element is clicked, treat that element as an «Input». An «Input» can be any HTML element (e.g., <input>, <div>, <span>). You must set inputMode: true in the settings object.
<input type="text" id="input">
<!-- or -->
<div id="input"></div>new Calendar('#input', { inputMode: true });// Popup mode configuration
new Calendar('#input', {
inputMode: true,
});Vanilla Calendar Pro provides several advanced capabilities for calendar widgets:
tabindex, and full keyboard navigation.<input> element.You can restrict the range of dates the calendar considers or allows users to select using two different approaches:
dateMin, dateMax)These define the absolute range of dates the calendar will even create/render. Dates outside this range do not exist in the calendar's context.
displayDateMin, displayDateMax)These allow the dates to exist and be visible, but they are disabled and cannot be selected by the user.
Supported formats for all date parameters:
Date objectnumber (timestamp)'YYYY-MM-DD' string'today'new Calendar('#calendar', {
dateMin: '1970-01-01',
dateMax: '2470-12-31',
displayDateMin: '2022-07-01',
displayDateMax: '2024-07-01',
});themeAttrDetect is configured appropriately so that your manual theme selection or custom theme application is not overridden by automatic attribute detection.'multiple' calendar type allows the display of multiple months simultaneously, enabling users to select individual days across different months. To enable this mode, set the type parameter to 'multiple' and the selectionDatesMode parameter to 'multiple' in your calendar configuration.'month' calendar type changes the calendar view to display a list of months instead of a day grid. This mode allows users to select a month and a year from the headers, making it ideal for interfaces where specific day selection is not required (e.g., selecting a birth month or a billing period).