Author: | uvarov-frontend |
---|---|
Views Total: | 15 views |
Official Page: | Go to website |
Last Update: | September 21, 2023 |
License: | MIT |
Preview:

Description:
A tiny clean calendar in Vanilla JavaScript. Create a beautiful customizable calendar for your website, using the ISO 8601 standard. No dependencies, no jQuery, and no frameworks.
Key features include custom holidays, multiple date selection, inbuilt language support, and minified size of only 9kb.
The code is easy to understand and is a good starting point if you want to display events and schedules on the page.
How to use it:
1. Install and import the VanillaCalendar component.
# NPM $ npm i @uvarov.frontend/vanilla-calendar
import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
2. Or load the JavaScript library directly in the document.
<link rel="stylesheet" href="build/vanilla-calendar.min.css" /> <script src="build/vanilla-calendar.min.js"></script>
3. Add the CSS class ‘vanilla-calendar’ to the target container where the library generates the calendar.
<div class="vanilla-calendar"> </div>
4. Generate a basic calendar.
const calendar = new VanillaCalendar('#vanilla-calendar', { // Options }); calendar.init();
5. Set the calendar type: ‘default’ | ‘multiple’ | ‘month’ | ‘year’.
const calendar = new VanillaCalendar('#vanilla-calendar', { type: 'multiple', });
6. Specify the number of months to display if the calendar type is defined as “multiple”. Default: 2.
const calendar = new VanillaCalendar('#vanilla-calendar', { months: 2, });
7. Date configs.
const calendar = new VanillaCalendar('#vanilla-calendar', { date: { min: '1970-01-01', max: '2470-12-31', today: new Date('2022-01-07'), }, });
8. Determine whether to use ISO 8601 format. (Default: true,)
const calendar = new VanillaCalendar('#vanilla-calendar', { settings: { iso8601: false, }, });
9. Date range configs.
const calendar = new VanillaCalendar('#vanilla-calendar', { settings: { range: { min: '2022-05-01', max: '2022-05-13', disablePast: false, disableGaps: false, disableWeekday: false, disabled: [], // disabled dates enabled: [], // disabled dates }, }, });
10. Date selection configs.
const calendar = new VanillaCalendar('#vanilla-calendar', { settings: { selected: { dates: ['2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04'], time: '03:44 AM', month: 5, year: 2022, holidays: ['2022-12-24', '2022-12-25'], }, selection: { day: 'single', // 'single' | 'multiple' | 'multiple-ranged' month: true, year: true, time: false, controlTime: 'all', // 'all' | 'range' stepHours: 1, stepMinutes: 1, }, }, });
11. Set the visibility of the calendar.
const calendar = new VanillaCalendar('#vanilla-calendar', { settings: { visibility: { // hightlights weekends weekend: true, // highlights today today: true, // abbreviated names of months in the month selection monthShort: true, // show week numbers of the year weekNumbers: false, // show all days, including disabled ones.s disabled: false, // show the days of the past and next month. daysOutside: true, }, }, });
12. Set the language of the calendar.
const calendar = new VanillaCalendar('#vanilla-calendar', { settings: { lang: 'en', }, });
// OR const calendar = new VanillaCalendar('#vanilla-calendar', { settings: { lang: 'define', }, locale: { months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], weekday: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], }, });
13. Change the default DOM templates.
new VanillaCalendar('#calendar', { DOMTemplates: { default: ` <div class="vanilla-calendar-header"> <#ArrowPrev /> <div class="vanilla-calendar-header__content"> <#Month /> <#Year /> </div> <#ArrowNext /> </div> <div class="vanilla-calendar-wrapper"> <#WeekNumbers /> <div class="vanilla-calendar-content"> <#Week /> <#Days /> </div> </div> <#ControlTime /> ` } });
// default month selection template const calendar = new VanillaCalendar('#vanilla-calendar', { DOMTemplates: { month: ` <div class="vanilla-calendar-header"> <div class="vanilla-calendar-header__content"> <#Month /> <#Year /> </div> </div> <div class="vanilla-calendar-wrapper"> <div class="vanilla-calendar-content"> <#Months /> </div> </div> ` } });
14. Available events.
const calendar = new VanillaCalendar('#vanilla-calendar', { actions: { clickDay(event, dates) {}, clickWeekNumber(event, number, days, year) {}, clickMonth(e, month) {}, clickYear(event, year) {}, clickArrow(event, year, month) {}, changeTime(event, time, hours, minutes, keeping) {}, }, });
15. Config the hover-triggered popup.
const calendar = new VanillaCalendar('#vanilla-calendar', { popups: { '2022-06-28': { modifier: 'bg-red', html: 'Meeting at 9:00 PM', }, } });
16. Override the default CSS classes.
const calendar = new VanillaCalendar('#vanilla-calendar', { CSSClasses: { calendar: 'vanilla-calendar', calendarDefault: 'vanilla-calendar_default', calendarMultiple: 'vanilla-calendar_multiple', calendarMonth: 'vanilla-calendar_month', calendarYear: 'vanilla-calendar_year', controls: 'vanilla-calendar-controls', grid: 'vanilla-calendar-grid', column: 'vanilla-calendar-column', header: 'vanilla-calendar-header', headerContent: 'vanilla-calendar-header__content', month: 'vanilla-calendar-month', monthDisabled: 'vanilla-calendar-month_disabled', year: 'vanilla-calendar-year', yearDisabled: 'vanilla-calendar-year_disabled', arrow: 'vanilla-calendar-arrow', arrowPrev: 'vanilla-calendar-arrow_prev', arrowNext: 'vanilla-calendar-arrow_next', wrapper: 'vanilla-calendar-wrapper', content: 'vanilla-calendar-content', week: 'vanilla-calendar-week', weekDay: 'vanilla-calendar-week__day', weekDayWeekend: 'vanilla-calendar-week__day_weekend', days: 'vanilla-calendar-days', daysSelecting: 'vanilla-calendar-days_selecting', months: 'vanilla-calendar-months', monthsSelecting: 'vanilla-calendar-months_selecting', monthsMonth: 'vanilla-calendar-months__month', monthsMonthSelected: 'vanilla-calendar-months__month_selected', monthsMonthDisabled: 'vanilla-calendar-months__month_disabled', years: 'vanilla-calendar-years', yearsSelecting: 'vanilla-calendar-years_selecting', yearsYear: 'vanilla-calendar-years__year', yearsYearSelected: 'vanilla-calendar-years__year_selected', yearsYearDisabled: 'vanilla-calendar-years__year_disabled', time: 'vanilla-calendar-time', timeContent: 'vanilla-calendar-time__content', timeHours: 'vanilla-calendar-time__hours', timeMinutes: 'vanilla-calendar-time__minutes', timeKeeping: 'vanilla-calendar-time__keeping', timeRanges: 'vanilla-calendar-time__ranges', timeRange: 'vanilla-calendar-time__range', day: 'vanilla-calendar-day', daySelected: 'vanilla-calendar-day_selected', daySelectedFirst: 'vanilla-calendar-day_selected-first', daySelectedLast: 'vanilla-calendar-day_selected-last', daySelectedIntermediate: 'vanilla-calendar-day_selected-intermediate', dayPopup: 'vanilla-calendar-day__popup', dayBtn: 'vanilla-calendar-day__btn', dayBtnPrev: 'vanilla-calendar-day__btn_prev', dayBtnNext: 'vanilla-calendar-day__btn_next', dayBtnToday: 'vanilla-calendar-day__btn_today', dayBtnSelected: 'vanilla-calendar-day__btn_selected', dayBtnHover: 'vanilla-calendar-day__btn_hover', dayBtnDisabled: 'vanilla-calendar-day__btn_disabled', dayBtnIntermediate: 'vanilla-calendar-day__btn_intermediate', dayBtnWeekend: 'vanilla-calendar-day__btn_weekend', dayBtnHoliday: 'vanilla-calendar-day__btn_holiday', weekNumbers: 'vanilla-calendar-week-numbers', weekNumbersTitle: 'vanilla-calendar-week-numbers__title', weekNumbersContent: 'vanilla-calendar-week-numbers__content', weekNumber: 'vanilla-calendar-week-number', isFocus: 'vanilla-calendar-is-focus', }, });
17. Change settings and update the calendar.
calendar.date.today = new Date('2022-07-25'); calendar.settings.lang = 'en'; calendar.settings.selected.date = '2022-07-15'; calendar.update(); calendar.reset();
Changelog:
v2.6.4 (09/21/2023)
- Hotfix JumpDate UTC
v2.6.3 (09/19/2023)
- Fix jumpDate
v2.6.2 (09/14/2023)
- Add jumpMonths
- Add getDays
v2.6.1 (06/21/2023)
- Bugfix
v2.6.0 (05/11/2023)
- Fix invalid date in safari
- Fix event “change” theme
v2.5.9 (05/01/2023)
- Update
v2.5.8 (04/26/2023)
- Fix update method
v2.5.7 (04/24/2023)
- Add .reset()
- Add themeDetect
- Fix selectedKeeping
v2.5.6 (04/10/2023)
- add additional-features-date-picker-in-input.js
v2.5.4 (04/06/2023)
- Add readonly params
- Fix disableAllDays
v2.5.3 (03/31/2023)
- Hotfixes
v2.5.2 (03/30/2023)
- Hotfixes
v2.5.1 (03/15/2023)
- Bugfixes
v2.5.0 (03/11/2023)
- The new version has completely redesigned the style files. If you are not ready to use the new styles, the old style file is available for import with the same name but contains the prefix “_”.
v2.4.0 (02/19/2023)
- Add option to turn off past days
- Add the ability to specify a date range for all date arrays
- Option to only select ranges that are continuously enabled
- Disable days of the week
- Add selectors for selected days
- Update doc
v2.3.0 (02/15/2023)
- Show multiple months
- Do not create days from past and future months
- Bugfix
v2.2.8 (02/14/2023)
- Hotfix highlighting the date range on hover
- Add the ability to deselect a date range
v2.2.7 (02/12/2023)
- Highlighting the date range on hover, before I click to select the second date
- Week number clickable
v2.2.5 (11/21/2022)
- Added clickArrow method to intercept clicks on arrows. Returns the current month and current year.
v2.2.4 (11/17/2022)
- createWeek fixes
v2.2.3 (11/16/2022)
- TypeScript fixes
- Fixes bug calendarSelectedYear for DOMTemplates
- Refactoring createPopup method
v2.2.1 (11/16/2022)
- Bugfix
v2.2.0 (11/16/2022)
- Added feature DOMTemplates
- Added feature CSSClasses
- Other fixes
v2.1.7 (11/11/2022)
- Allow adding multiple modifier classes to popups
v2.1.6 (11/08/2022)
- Fix types
- Added SSR fix
v2.1.5 (11/06/2022)
- Bugfix
v2.1.3 (10/30/2022)
- Bugfix
v2.1.1 (10/26/2022)
- Bugfix
v2.1.0 (10/25/2022)
- Fixed interface and export declare VanillaCalendar;
- Fixed “update()” method;
v2.0.0 (08/27/2022)
- Update
v1.5.5 (08/27/2022)
- Update
v1.4.9 (07/20/2022)
- Update
v1.4.8 (07/16/2022)
- Update
v1.4.7 (07/15/2022)
- Update
v1.4.6 (07/14/2022)
- Update
v1.4.5 (07/13/2022)
- Update
v1.4.3 (07/10/2022)
- Update
v1.4.0 (07/04/2022)
- bugfix
v1.3.5 (06/26/2022)
- added langs
v1.3.4 (06/24/2022)
- updated package
v1.3.2 (06/16/2022)
- updated package
v1.3.1 (06/12/2022)
- updated package
v1.2.8 (06/06/2022)
- updated package
v1.2.6 (05/28/2022)
- fix size plugins
v1.2.4 (05/18/2022)
- fix adaptive of demo