Default Gray Amethyst

Calendar

<mo-calendar> | MOCalendar
Since 3.0 stable

The calendar component shows a monthly view of the Gregorian calendar, optionally allowing users to interact with dates. 

<mo-calendar></mo-calendar>

import { MOCalendar } from '@metsooutotec/modes-web-components/dist/react';

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

Examples

With time input

The calendar can contain a time input in addition to a date one. Use the time-input attribute to enable it. 

<mo-calendar time-input></mo-calendar>

import { MOCalendar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOCalendar timeInput></MOCalendar>;

Setting the locale

The locale attribute takes a date-fns/locale object.

<mo-calendar id="locale" locale="fi"></mo-calendar>

import { MOCalendar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOCalendar locale="fi"></MOCalendar>;

Limiting selection

Min and max date

Use the min and max attributes to limit the selection of days.

<mo-calendar id="min-max"></mo-calendar>

<script>
  const picker = document.querySelector('#min-max');
  const now = new Date();
  const twoWeeksFromNow = new Date(Date.now() + 6.048e8 * 2);
  picker.min = now;
  picker.max = twoWeeksFromNow;
</script>

import { MOCalendar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOCalendar min={new Date()} max={new Date(Date.now() + 6.048e8 * 2)}></MOCalendar>;

Disabling specific dates

You can set the isDateDisabled attribute to a function that disables specific dates. In this example the function disables are weekends. 

<mo-calendar id="disabled-dates"></mo-calendar>

<script>
  const calendar = document.querySelector('#disabled-dates');
  function isWeekend(date) {
    return date.getDay() === 0 || date.getDay() === 6;
  }
  calendar.isDateDisabled = isWeekend;
</script>

import { MOCalendar } from '@metsooutotec/modes-web-components/dist/react';

function isWeekend(date) {
  return date.getDay() === 0 || date.getDay() === 6;
}

const App = () => <MOCalendar isDateDisabled={isWeekend}></MOCalendar>;

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.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/calendar/calendar.js';

To import this component as a React component:

import MOCalendar from '@metsooutotec/modes-web-components/dist/react/calendar/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/calendar/calendar.js"></script>

Slots

Name Description
heading The heading slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
value Current value of the calendar. Must be same format as the format attribute. string | undefined -
format Format for the date. See date-fns documentation for all options: https://date-fns.org/v3.3.1/docs/format string 'dd.MM.yyyy'
selectedDate Date used to display the calendar. If no date is given, the current month will be used Date | undefined -
currentDate Date used to display the initial calendar month view. If no date is given, the current month will be used. Date new Date()
initialDate Date used to display the initial calendar month view. If no date is given, the current month will be used. Date | undefined -
min The minimum allowed date a user can select Date | undefined -
max The maximum allowed date a user can select Date | undefined -
timeStep
time-step 		The time step in seconds. number 3600
timeMin
time-min 		Minimum time allowed. Supported time formats are in ISO 8601: - hh:mm - hh:mm:ss - hh:mm:ss.fff string '00:00'
timeMax
time-max 		Maximum time allowed. Supported time formats are in ISO 8601: - hh:mm - hh:mm:ss - hh:mm:ss.fff string '23:59'
weekStartsOn The first day of the week. 0 is Sunday, 1 is Monday, etc. 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined 1
disabled Indicates when the calendar should be disabled entirely boolean false
timeInput
time-input 		Add a time input to the bottom of the calendar. boolean false
timeReadonly
time-readonly 		Makes the time input. boolean false
timeDefaultValue
time-default-value 		Default time value. Use this in combination with readonly when users should always have the same time selected. E.g. when using factory time, the time can be set to 06:00. string | undefined -
padded Adds a padding around the calendar boolean false
yearsToShow How many years to show on the year picker dropdown. number 50
locale List of pre-defined locales for easy selection. 'en-US' | 'fi' | 'es' | 'pt-BR' | 'pl' | undefined 'en-US'
customLocale Allows total customization of locale, should be a date-fns object: https://date-fns.org/v3.3.1/docs/I18n Locale | undefined -
isDateDisabled A function that determines which dates should be disabled in the calendar. The function receives a Date object and should return true if the date should be disabled. Can be used for things like disabling weekends, holidays, or specific days of the week. (date: Date) => boolean -
locales Default locales imported from date-fns. array [ { locale: enUS, name: 'en-US', label: 'English (US)' }, { locale: fi, name: 'fi', label: 'Finnish' }, { locale: es, name: 'es', label: 'Spanish' }, { locale: ptBR, name: 'pt-BR', label: 'Portuguese (Brazil)' }, { locale: pl, name: 'pl', label: 'Polish' } ]
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
mo-change onMoChange Fires when the selected date changes. -
mo-calendar-interaction onMoCalendarInteraction Fires when the calendar is interacted with via either keyboard or mouse. Helps datepicker distinguish between the two. { type: 'keydown' | 'click' }

Learn more about events.

Methods

Name Description Arguments
reset() Reset calendar state -

Learn more about methods.

Parts

Name Description
base The component’s internal wrapper.
header The header of the calendar.
body The body of the calendar.
weekdays The weekdays of the calendar.

Learn more about customizing CSS parts.