OLYSENSE Design System

This component leverages the React DayPicker and as a result is a React only component. There is no web component alternative.

import { useState } from 'react';
import { OdsCalendar } from '@ods/components/react-alt.calendar';

export const Example = () => {
  const today = new Date();
  const septFirst = new Date(today.getFullYear(), 8, 1, 12);
  const [selected, setSelected] = useState<Date | undefined>();

  return (
    <OdsCalendar
      mode='single'
      today={septFirst}
      selected={selected}
      onSelect={setSelected}
    />
  )
}

export default Example;

Use the captionLayout=“label” prop to display the month and year as labels above the calendar grid.

import { useState } from 'react';
import { OdsCalendar } from '@ods/components/react-alt.calendar';

export const Example = () => {
  const today = new Date();
  const septFirst = new Date(today.getFullYear(), 8, 1, 12);
  const [selected, setSelected] = useState<Date | undefined>();

  return (
    <OdsCalendar
      captionLayout='label'
      mode='single'
      today={septFirst}
      selected={selected}
      onSelect={setSelected}
    />
  )
}

export default Example;

Use the mode=“range” prop to enable range selection.

import { useState } from 'react';
import { OdsCalendar } from '@ods/components/react-alt.calendar';
import { DateRange } from 'react-day-picker';

export const Example = () => {
  const today = new Date();
  const septFirst = new Date(today.getFullYear(), 8, 1, 12);
  const toDate =  new Date(today.getFullYear(), 8, 1, 12);
  const fromDate =  new Date(today.getFullYear(), 8, 1, 12);

  fromDate.setDate(septFirst.getDate() + 15);
  toDate.setDate(septFirst.getDate() + 28);

  const defaultRange: DateRange = {
    from: fromDate,
    to: toDate,
  };

  const [range, setRange] = useState<DateRange | undefined>(defaultRange);

  return (
    <OdsCalendar
      mode='range'
      today={septFirst}
      selected={range}
      onSelect={setRange}
      defaultMonth={septFirst}
    />
  )
}

export default Example;

Use the numberOfMonths=2” prop to enable multiple date selection.

import { useState } from 'react';
import { OdsCalendar } from '@ods/components/react-alt.calendar';

export const Example = () => {
  const today = new Date();
  const septFirst = new Date(today.getFullYear(), 8, 1, 12);
  const [selected, setSelected] = useState<Date | undefined>();

  return (
    <OdsCalendar
      mode='single'
      numberOfMonths={2}
      today={septFirst}
      selected={selected}
      onSelect={setSelected}
    />
  )
}

export default Example;

Importing

The OdsCalendar is built off of the React Day Picker library. Please reference the documentation for more information on the available props.

Calendar

Examples

Basic

Static Header

Range

Multiple

Importing

Properties