Calendar

Calendar component.

<ol-calendar></ol-calendar>

import OlCalendar from '@onlive.site/ui/dist/react/calendar';

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

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. This is the standard calendar display mode.

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

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

import OlCalendar from '@onlive.site/ui/dist/react/calendar';

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

Multiple

The calendar type multiple displays multiple months, allowing you to select days in each of them. This calendar type is useful when a user needs to choose multiple dates in different months, but for this, you need to use the settings.selection.day parameter and set its value to multiple.

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

<script>
  document.querySelector('.multiple').options = {
    type: 'multiple',
    months: 2,
    jumpMonths: 1,
    settings: {
      selection: {
        day: 'multiple',
      },
    },
  };
</script>

import OlCalendar from '@onlive.site/ui/dist/react/calendar';

const App = () => (
  <OlCalendar
    options={{
      type: 'multiple',
      months: 2,
      jumpMonths: 1,
      settings: {
        selection: {
          day: 'multiple',
        },
      },
    }}
  ></OlCalendar>
);

If you need to select date ranges in each month, you can use the settings.selection.day parameter and set its value to multiple-ranged. This allows you to select date ranges, not just individual days.

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

<script>
  document.querySelector('.multiple-ranged').options = {
    type: 'multiple',
    months: 2,
    jumpMonths: 2,
    settings: {
      range: {
        disablePast: true,
      },
      selection: {
        day: 'multiple-ranged',
      },
      visibility: {
        daysOutside: false,
      },
    },
  };
</script>

import OlCalendar from '@onlive.site/ui/dist/react/calendar';

const App = () => (
  <OlCalendar
    options={{
      type: 'multiple',
      months: 2,
      jumpMonths: 2,
      settings: {
        range: {
          disablePast: true,
        },
        selection: {
          day: 'multiple-ranged',
        },
        visibility: {
          daysOutside: false,
        },
      },
    }}
  ></OlCalendar>
);

Month

The calendar type month displays a list of months and allows the user to select months and years from the respective headers. This mode is useful if you need to limit the user’s selection to only the month and year, without the ability to choose specific days.

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

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

import OlCalendar from '@onlive.site/ui/dist/react/calendar';

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

Year

The calendar type year displays a list of years, allowing the user to choose a year from the list and select a month from the respective header. This mode is useful if you need to limit the user’s selection to only the year and month, excluding the ability to choose specific day.

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

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

import OlCalendar from '@onlive.site/ui/dist/react/calendar';

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

Time Selection Options

By default, time selection is disabled, but you can easily enable it and configure it to meet your needs.

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

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

import OlCalendar from '@onlive.site/ui/dist/react/calendar';

const App = () => (
  <OlCalendar
    options={{
      settings: {
        selection: {
          time: true,
        },
      },
    }}
  ></OlCalendar>
);

Automatic Localization

If your locale is supported by the .toLocaleString() method, you can simply pass it to the settings.lang parameter for calendar localization.

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

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

Manual Localization

You can manually localize the calendar if the settings.lang parameter does not meet your needs. Only the month and day labels in the calendar need to be localized, so you need to provide the corresponding arrays of strings and set settings.lang to define.

<ol-calendar class="manual-localization"></ol-calendar>

<script>
  document.querySelector('.manual-localization').options = {
    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'],
    },
  };
</script>

First Day of the Week

The calendar follows the ISO 8601 standard to determine the first day of the week. If the settings.iso8601 parameter is set to true, Monday will be the first day of the week. Otherwise, if settings.iso8601 is set to false, Sunday will be the first day of the week. You can customize this parameter according to your preference.

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

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

This allows you to configure which day of the week will be the first day in your calendar in accordance with the international ISO 8601 standard.

Week Numbers

For example, in Norway, it’s very common to denote dates using week numbers. You can enable the display of week numbers in the calendar by setting the settings.visibility.weekNumbers parameter to true.

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

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

Start and End Dates of Existing Dates

The date range in the calendar can be set using the date.min and date.max parameters. These parameters specify the permissible date range in the calendar.

By default, the minimum date is '1970-01-01', which corresponds to the beginning of UNIX time. The default maximum date is set to '2470-12-31', and it is chosen arbitrarily.

If you need to set a specific date range, replace the values of the date.min and date.max parameters with the dates you require. Note that the calendar will not process dates outside the specified range.

<ol-calendar class="start-and-end-dates-of-existing-dates"></ol-calendar>

<script>
  document.querySelector('.start-and-end-dates-of-existing-dates').options = {
    date: {
      min: '1920-01-01',
      max: '2038-12-31',
    },
  };
</script>

Maximum and Minimum Date for Display

The parameters settings.range.min and settings.range.max define the range of dates that can be displayed in the calendar, but they do not affect the calendar’s lifecycle. They simply specify which dates are allowed for display and selection.

For example, if the parameter settings.visibility.disabled is set to true, the minimum and maximum years available for user viewing will be determined by the values of the date.min and date.max parameters.

<ol-calendar class="maximum-and-minimum-date-for-display"></ol-calendar>

<script>
  document.querySelector('.maximum-and-minimum-date-for-display').options = {
    date: {
      min: '1920-01-01',
      max: '2038-12-31',
    },
    settings: {
      range: {
        min: '2000-01-01',
        max: '2024-12-31',
      },
      visibility: {
        disabled: true,
      },
    },
  };
</script>

Changing the settings.visibility.disabled parameter allows you to control the available dates for viewing and selection in the calendar.

Enabling or Disabling Days

Sometimes you may need to disable specific days so they are not available for selection. The examples below show how this can be done.

<ol-calendar class="enabling-or-disabling-days"></ol-calendar>

<script>
  document.querySelector('.enabling-or-disabling-days').options = {
    settings: {
      range: {
        min: '2022-07-01',
        max: '2022-09-30',
        disabled: ['2022-08-10:2022-08-13', '2022-08-22'],
      },
      selected: {
        year: 2022,
        month: 7,
      },
    },
  };
</script>

And in the following example, it shows how to enable specific days, which can be simpler than specifying a list of disabled days.

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

<script>
  document.querySelector('.enabling-or-disabling-days-2').options = {
    settings: {
      range: {
        disableAllDays: true,
        enabled: ['2022-08-10:2022-08-13', '2022-08-22'],
      },
      selected: {
        year: 2022,
        month: 7,
      },
    },
  };
</script>

Pop-ups

The calendar allows you to add pop-ups with information for any day, which will be displayed when hovering over that day.

This is a useful tool for displaying additional data in the calendar.

In the example given, specific days are highlighted using CSS modifiers, and information is added to pop-ups for each of them.

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

<script>
  document.querySelector('.pop-ups').options = {
    settings: {
      selected: {
        month: 6,
        year: 2022,
      },
    },
    popups: {
      '2022-06-28': {
        modifier: 'popup',
        html: 'Meeting at 9:00 PM',
      },
      '2022-07-13': {
        modifier: 'popup',
        html: 'Meeting at 6:00 PM',
      },
      '2022-07-17': {
        modifier: 'popup',
        html: `<div>
          <u><b>12:00 PM</b></u>
          <p style="margin: 5px 0 0;">Airplane in Las Vegas</p>
        </div>`,
      },
    },
  };
</script>

Setting a Different Today

The calendar allows you to specify which day should be considered as today.

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

<script>
  document.querySelector('.different-today').options = {
    date: {
      today: new Date('2024-01-07T00:00:00.000Z'),
    },
  };
</script>

Default Selected Days, Month, and Year

The calendar allows you to explicitly specify default selected days, as well as a month and year that will be displayed independently of the current date.

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

<script>
  document.querySelector('.default-selected-days').options = {
    settings: {
      selection: {
        day: 'multiple',
      },
      selected: {
        dates: ['2022-01-09:2022-01-13', '2022-01-22'],
        month: 0,
        year: 2022,
      },
    },
  };
</script>

Specifying Additional Weekends/Holidays

In the calendar, you can specify additional weekends or holidays that will be highlighted in red. Holiday dates must be set manually.

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

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

Disabling the Ability to Select Day, Month, and Year

The calendar allows you to easily disable the ability to select the day, month, or year individually.

<ol-calendar class="disabling-the-ability-to-select"></ol-calendar>

<script>
  document.querySelector('.disabling-the-ability-to-select').options = {
    settings: {
      selection: {
        day: false,
        month: false,
        year: false,
      },
    },
  };
</script>

Disabling Highlighting of Weekends and Today

The calendar allows you to easily disable the highlighting of all holidays, weekends, and today’s date.

<ol-calendar class="disabling-highlighting"></ol-calendar>

<script>
  document.querySelector('.disabling-highlighting').options = {
    settings: {
      visibility: {
        weekend: false,
        today: false,
      },
    },
  };
</script>

Handling Click on a Day

Listen ol-day-click event to get select days.

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

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

Handling Click on a Month in the Month List

Listen ol-month-click event to get select month.

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

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

Handling Click on the Year in Year Selection

Listen ol-year-click event to get select year.

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

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

Handling Click on the Arrows

When you click on any of the arrows, an ol-arrow-click event occurs to switch the month or year in the calendar. This event can be used according to your needs.

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

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

Handling Time Changes

When you click on any of the arrows, an event occurs to switch the month or year in the calendar. This event can be used according to your needs.

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

<script>
  const handlingTimeChange = document.querySelector('.handling-time-change');
  handlingTimeChange.options = {
    settings: {
      selection: {
        time: true,
      },
    }
  };
  handlingTimeChange.addEventListener('ol-time-change', (e) => {
    const { detail: { time } } = e;
    console.log(time)
  });
</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 type="module" src="https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/calendar/calendar.js"></script>

import 'https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/calendar/calendar.js';

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

import OlCalendar from '@onlive.site/ui/dist/react/calendar';

Slots

Learn more about using slots.

Events

Learn more about events.

Custom Properties

Learn more about customizing CSS custom properties.

Parts

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

• <ol-icon>
• <ol-icon-button>