Light Dark System

Calendar2

<ol-calendar-2> | OlCalendar2
Since 1.10 experimental

Calendar component built on vanilla-calendar-pro v3.

ol-calendar-2 is a calendar built on vanilla-calendar-pro v3. It mirrors ol-calendar but uses the v3 flat options API. The original ol-calendar (v2) is kept unchanged. 

<ol-calendar-2></ol-calendar-2>

import OlCalendar2 from '@onlive.site/ui/dist/react/calendar-2';

const App = () => (
  <OlCalendar2></OlCalendar2>
);

Examples

Default (Single)

The calendar type default displays a single month, allows you to select days, navigate between months using arrows, and choose a month and year from the respective headers. 

<ol-calendar-2 class="single"></ol-calendar-2>

<script>
  document.querySelector('.single').options = {
    type: 'default',
  };
</script>

import OlCalendar2 from '@onlive.site/ui/dist/react/calendar-2';

const App = () => (
  <OlCalendar2
    options={{
      type: 'default',
    }}
  ></OlCalendar2>
);

Multiple

The calendar type multiple displays multiple months. Set displayMonthsCount to control how many, and selectionDatesMode to multiple to allow selecting days in each of them. 

<ol-calendar-2 class="multiple"></ol-calendar-2>

<script>
  document.querySelector('.multiple').options = {
    type: 'multiple',
    displayMonthsCount: 2,
    monthsToSwitch: 1,
    selectionDatesMode: 'multiple',
  };
</script>

If you need to select date ranges in each month, set selectionDatesMode to multiple-ranged. 

<ol-calendar-2 class="multiple-ranged"></ol-calendar-2>

<script>
  document.querySelector('.multiple-ranged').options = {
    type: 'multiple',
    displayMonthsCount: 2,
    monthsToSwitch: 2,
    selectionDatesMode: 'multiple-ranged',
    disableDatesPast: true,
    displayDatesOutside: false,
  };
</script>

Month

The calendar type month displays a list of months.

<ol-calendar-2 class="month"></ol-calendar-2>

<script>
  document.querySelector('.month').options = {
    type: 'month',
  };
</script>

Year

The calendar type year displays a list of years.

<ol-calendar-2 class="year"></ol-calendar-2>

<script>
  document.querySelector('.year').options = {
    type: 'year',
  };
</script>

Time Selection

Enable time selection with selectionTimeMode set to 12 or 24.

<ol-calendar-2 class="time-selection"></ol-calendar-2>

<script>
  document.querySelector('.time-selection').options = {
    selectionTimeMode: 24,
  };
</script>

Time Only

Set the hide-date attribute to hide the date grid and show only the time picker. This is independent from selectionDatesMode. 

<ol-calendar-2 class="time-only" hide-date></ol-calendar-2>

<script>
  document.querySelector('.time-only').options = {
    selectionTimeMode: 24,
  };
</script>

import OlCalendar2 from '@onlive.site/ui/dist/react/calendar-2';

const App = () => (
  <OlCalendar2
    hideDate
    options={{
      selectionTimeMode: 24,
    }}
  ></OlCalendar2>
);

Time Picker Options

Fine-tune the time picker with timeMinHour/timeMaxHour to bound the hours, and timeStepHour/timeStepMinute to control the increments. 

<ol-calendar-2 class="time-options"></ol-calendar-2>

<script>
  document.querySelector('.time-options').options = {
    selectionTimeMode: 24,
    timeMinHour: 9,
    timeMaxHour: 18,
    timeStepHour: 1,
    timeStepMinute: 15,
  };
</script>

Automatic Localization

If your locale is supported by .toLocaleString(), pass it to the locale parameter. 

<ol-calendar-2 class="automatic-localization"></ol-calendar-2>

<script>
  document.querySelector('.automatic-localization').options = {
    locale: 'es',
  };
</script>

First Day of the Week

Use firstWeekday (a number 0–6, where 0 is Sunday and 1 is Monday) to set the first day of the week. 

<ol-calendar-2 class="first-day-of-the-week"></ol-calendar-2>

<script>
  document.querySelector('.first-day-of-the-week').options = {
    firstWeekday: 0,
  };
</script>

Weekends

Customize which days are treated as weekends with selectedWeekends (an array of weekday numbers, where 0 is Sunday and 6 is Saturday). Weekend days are highlighted. 

<ol-calendar-2 class="weekends"></ol-calendar-2>

<script>
  document.querySelector('.weekends').options = {
    selectedWeekends: [5, 6],
  };
</script>

Week Numbers

Enable the display of week numbers with enableWeekNumbers.

<ol-calendar-2 class="week-numbers"></ol-calendar-2>

<script>
  document.querySelector('.week-numbers').options = {
    enableWeekNumbers: true,
  };
</script>

Existing Dates Range

The calendar’s lifecycle date range is set with dateMin and dateMax. The calendar will not process dates outside this range. 

<ol-calendar-2 class="existing-dates"></ol-calendar-2>

<script>
  document.querySelector('.existing-dates').options = {
    dateMin: '1920-01-01',
    dateMax: '2038-12-31',
  };
</script>

Maximum and Minimum Date for Display

displayDateMin and displayDateMax define the range of dates that can be displayed and selected without affecting the calendar’s lifecycle. 

<ol-calendar-2 class="display-dates"></ol-calendar-2>

<script>
  document.querySelector('.display-dates').options = {
    dateMin: '1920-01-01',
    dateMax: '2038-12-31',
    displayDateMin: '2000-01-01',
    displayDateMax: '2024-12-31',
    displayDisabledDates: true,
  };
</script>

Enabling or Disabling Days

Disable specific days with disableDates, or enable only specific days with enableDates + disableAllDates. 

<ol-calendar-2 class="disabling-days"></ol-calendar-2>

<script>
  document.querySelector('.disabling-days').options = {
    displayDateMin: '2022-07-01',
    displayDateMax: '2022-09-30',
    disableDates: ['2022-08-10:2022-08-13', '2022-08-22'],
    selectedYear: 2022,
    selectedMonth: 7,
  };
</script>

Alternatively, enable only specific days with enableDates and disableAllDates, which can be simpler than listing every disabled day. 

<ol-calendar-2 class="enabling-days"></ol-calendar-2>

<script>
  document.querySelector('.enabling-days').options = {
    disableAllDates: true,
    enableDates: ['2022-08-10:2022-08-13', '2022-08-22'],
    selectedYear: 2022,
    selectedMonth: 7,
  };
</script>

Disabling Weekdays

Disable specific weekdays with disableWeekdays (an array of weekday numbers, 0–6). Here the weekends are not selectable. 

<ol-calendar-2 class="disable-weekdays"></ol-calendar-2>

<script>
  document.querySelector('.disable-weekdays').options = {
    disableWeekdays: [0, 6],
  };
</script>

Disabling Past Dates and Today

Prevent selecting dates before today with disableDatesPast, and disable today itself with disableToday. 

<ol-calendar-2 class="disable-past"></ol-calendar-2>

<script>
  document.querySelector('.disable-past').options = {
    disableDatesPast: true,
    disableToday: true,
  };
</script>

Pop-ups

Add pop-ups with information for any day, displayed when hovering over that day.

<ol-calendar-2 class="pop-ups"></ol-calendar-2>

<script>
  document.querySelector('.pop-ups').options = {
    selectedMonth: 6,
    selectedYear: 2022,
    popups: {
      '2022-06-28': {
        modifier: 'popup',
        html: 'Meeting at 9:00 PM',
      },
      '2022-07-13': {
        modifier: 'popup',
        html: 'Meeting at 6:00 PM',
      },
    },
  };
</script>

Setting a Different Today

Specify which day should be considered today with dateToday.

<ol-calendar-2 class="different-today"></ol-calendar-2>

<script>
  document.querySelector('.different-today').options = {
    dateToday: '2024-01-07',
  };
</script>

Default Selected Days, Month, and Year

Set default selected days, month, and year with selectedDates, selectedMonth, and selectedYear. 

<ol-calendar-2 class="default-selected-days"></ol-calendar-2>

<script>
  document.querySelector('.default-selected-days').options = {
    selectionDatesMode: 'multiple',
    selectedDates: ['2022-01-09:2022-01-13', '2022-01-22'],
    selectedMonth: 0,
    selectedYear: 2022,
  };
</script>

Additional Weekends/Holidays

Specify additional holidays that will be highlighted with selectedHolidays.

<ol-calendar-2 class="additional-holidays"></ol-calendar-2>

<script>
  document.querySelector('.additional-holidays').options = {
    selectedMonth: 0,
    selectedYear: 2022,
    selectedHolidays: ['2022-01-01:2022-01-05', '2022-01-10', '2022-01-13'],
  };
</script>

Disabling the Ability to Select Day, Month, and Year

Disable day, month, or year selection individually. The grid stays visible.

<ol-calendar-2 class="disabling-selection"></ol-calendar-2>

<script>
  document.querySelector('.disabling-selection').options = {
    selectionDatesMode: false,
    selectionMonthsMode: false,
    selectionYearsMode: false,
  };
</script>

Handling Click on a Day

Listen for the ol-day-click event to get the selected days.

<ol-calendar-2 class="handling-day-click"></ol-calendar-2>

<script>
  document.querySelector('.handling-day-click').addEventListener('ol-day-click', (e) => {
    const { detail: { days } } = e;
    console.log(days);
  });
</script>

Handling Click on a Month

Listen for the ol-month-click event to get the selected month (0-indexed).

<ol-calendar-2 class="handling-month-click"></ol-calendar-2>

<script>
  document.querySelector('.handling-month-click').addEventListener('ol-month-click', (e) => {
    const { detail: { month } } = e;
    console.log(month);
  });
</script>

Handling Click on the Year

Listen for the ol-year-click event to get the selected year.

<ol-calendar-2 class="handling-year-click"></ol-calendar-2>

<script>
  document.querySelector('.handling-year-click').addEventListener('ol-year-click', (e) => {
    const { detail: { year } } = e;
    console.log(year);
  });
</script>

Handling Click on the Arrows

Listen for the ol-arrow-click event, emitted when navigating between months or years.

<ol-calendar-2 class="handling-arrow-click"></ol-calendar-2>

<script>
  document.querySelector('.handling-arrow-click').addEventListener('ol-arrow-click', (e) => {
    const { detail: { month, year } } = e;
    console.log(month, year);
  });
</script>

Handling Time Changes

Listen for the ol-time-change event when the time changes.

<ol-calendar-2 class="handling-time-change"></ol-calendar-2>

<script>
  const handlingTimeChange = document.querySelector('.handling-time-change');
  handlingTimeChange.options = {
    selectionTimeMode: 24,
  };
  handlingTimeChange.addEventListener('ol-time-change', (e) => {
    const { detail: { time } } = e;
    console.log(time);
  });
</script>

Theming

The calendar is styled entirely with the --ol-calendar-* custom properties (see the list below), and exposes its internal elements as CSS parts — base, header, header-content, wrapper, content, date, date-button, month, and year — so you can style it from the light DOM. 

<ol-calendar-2 class="themed"></ol-calendar-2>

<style>
  .themed {
    --ol-calendar-selected-background-color: #6d28d9;
    --ol-calendar-day-today-color: #6d28d9;
  }
  .themed::part(date-button) {
    font-weight: 600;
  }
</style>

<script>
  document.querySelector('.themed').options = {
    selectionDatesMode: 'single',
  };
</script>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.onlive.site/@onlive.site/ui@1.10.0/cdn/components/calendar-2/calendar-2.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.onlive.site/@onlive.site/ui@1.10.0/cdn/components/calendar-2/calendar-2.js';

To import this component using a bundler:

import '@onlive.site/ui/dist/components/calendar-2/calendar-2.js';

To import this component as a React component:

import OlCalendar2 from '@onlive.site/ui/dist/react/calendar-2';

Properties

Name Description Reflects Type Default
options The vanilla-calendar-pro v3 options. See https://vanilla-calendar.pro/docs/reference. Options -
hideDate
hide-date 		Hides the date grid so only the time picker is shown. Independent from options.selectionDatesMode (which disables selection but keeps the grid visible). boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
ol-day-click onOlDayClick Emitted when clicked a day. -
ol-month-click onOlMonthClick Emitted when clicked a month. -
ol-year-click onOlYearClick Emitted when clicked a year. -
ol-arrow-click onOlArrowClick Emitted when clicked an arrow. -
ol-time-change onOlTimeChange Emitted when time change. -

Learn more about events.

Custom Properties

Name Description Default
--ol-calendar-color Calendar color.
--ol-calendar-background-color Calendar background color.
--ol-calendar-border Calendar border color.
--ol-calendar-padding Calendar padding.
--ol-calendar-focus-outline-color Focus outline color.
--ol-calendar-selected-color Selected color.
--ol-calendar-selected-background-color Selected background color.
--ol-calendar-inactive-color Inactive color.
--ol-calendar-inactive-background-color Inactive background color.
--ol-calendar-inactive-selected-color Inactive selected color.
--ol-calendar-inactive-selected-background-color Inactive selected background color.
--ol-calendar-day-color Day color.
--ol-calendar-day-background-color Day background color.
--ol-calendar-day-hover-background-color Day hover background color.
--ol-calendar-day-hover-border Day hover border color.
--ol-calendar-day-hover-padding Day hover padding.
--ol-calendar-day-hover-margin Day hover margin.
--ol-calendar-day-spacing Day x and y spacing.
--ol-calendar-day-padding Day padding.
--ol-calendar-day-font-size Day font size.
--ol-calendar-day-font-weight Day font weight.
--ol-calendar-day-inactive-font-weight Day inactive font weight.
--ol-calendar-day-today-color Current day color.
--ol-calendar-day-today-background-color Current day background color.
--ol-calendar-day-today-inactive-color Current day inactive color.
--ol-calendar-day-weekend-color Day weekend or holiday color.
--ol-calendar-day-weekend-hover-background-color Day weekend or holiday hover background color.
--ol-calendar-day-weekend-selected-background-color Day weekend or holiday selected background color.
--ol-calendar-day-weekend-selected-color Day weekend or holiday selected color.
--ol-calendar-day-selected-border Day selected border color.
--ol-calendar-day-selected-hover-border Day selected hover border color.
--ol-calendar-header-color Header color.
--ol-calendar-header-inactive-color Header inactive color.
--ol-calendar-header-hover-color Header hover color.
--ol-calendar-header-margin Header margin.
--ol-calendar-month-background-color Month background color.
--ol-calendar-month-color Month color.
--ol-calendar-month-hover-background-color Month hover background color.
--ol-calendar-month-border-radius Month border radius.
--ol-calendar-month-padding Month padding.
--ol-calendar-month-spacing Month x and y spacing.
--ol-calendar-month-font-family Month font family.
--ol-calendar-month-font-size Month font size.
--ol-calendar-month-font-stretch Month font stretch.
--ol-calendar-year-background-color Year background color.
--ol-calendar-year-color Year color.
--ol-calendar-year-hover-background-color Year hover background color.
--ol-calendar-year-spacing Year x and y spacing.
--ol-calendar-week-color Week color.
--ol-calendar-week-hover-color Week hover color.
--ol-calendar-week-spacing Week x and y spacing.
--ol-calendar-week-font-weight Week font weight.
--ol-calendar-week-font-size Week font size.
--ol-calendar-week-line-height Week line height.
--ol-calendar-week-margin Week margin.
--ol-calendar-popup-background-color Day popup background color.
--ol-calendar-popup-color Day popup color.
--ol-calendar-popup-box-shadow Day popup box shadow.
--ol-calendar-popup-border-color Day popup border bottom color.
--ol-calendar-time-background-color Time background color.
--ol-calendar-time-color Time color.
--ol-calendar-time-border-color Time border color.
--ol-calendar-time-range-background-color Time range background color.
--ol-calendar-time-range-color Time range color.
--ol-calendar-time-keeping-color Time keeping color.
--ol-calendar-time-keeping-hover-background-color Time keeping color.
--ol-calendar-arrow-color Arrow color.
--ol-calendar-arrow-disabled-color Arrow disabled color.
--ol-calendar-day-range-background-color Range intermediate day background color.
--ol-calendar-day-range-color Range intermediate day color.
--ol-calendar-day-range-weekend-background-color Range intermediate weekend/holiday background color.
--ol-calendar-day-range-weekend-color Range intermediate weekend/holiday color.
--ol-calendar-tooltip-background-color Range tooltip background color.
--ol-calendar-tooltip-color Range tooltip color.
--ol-calendar-tooltip-border Range tooltip border.
--ol-calendar-tooltip-box-shadow Range tooltip box shadow.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
header The component’s header.
header-content The header’s content.
controls The multiple view’s navigation controls.
grid The multiple view’s grid.
wrapper The component’s wrapper.
content The component’s content.
date Each day cell.
date-button Each day button.
month Each month cell in the month view.
year Each year cell in the year view.

Learn more about customizing CSS parts.