Calendar

Calendar renders a full inline calendar for date selection. RangeCalendar extends this to support selecting a date range. Both support min/max date bounds and custom date services for localization.

Import

import { Calendar, RangeCalendar } from '@ui-kitten/components';

Basic Usage

Single Date

import React, { useState } from 'react';
import { Layout, Calendar } from '@ui-kitten/components';

const CalendarExample = () => {
  const [date, setDate] = useState(new Date());

  return (
    <Layout style={{ flex: 1, padding: 16 }}>
      <Calendar
        date={date}
        onSelect={(nextDate) => setDate(nextDate)}
      />
    </Layout>
  );
};

Date Range

import React, { useState } from 'react';
import { Layout, RangeCalendar } from '@ui-kitten/components';

const RangeCalendarExample = () => {
  const [range, setRange] = useState({});

  return (
    <Layout style={{ flex: 1, padding: 16 }}>
      <RangeCalendar
        range={range}
        onSelect={(nextRange) => setRange(nextRange)}
      />
    </Layout>
  );
};

Props

Calendar

Property	Type	Default	Description
date	Date	undefined	The currently selected date.
onSelect	(date: Date) => void	-	Called when a date is selected.
min	Date	undefined	Minimum selectable date. Dates before this are disabled.
max	Date	undefined	Maximum selectable date. Dates after this are disabled.
dateService	DateService	NativeDateService	Custom date service for localization and date formatting.
filter	(date: Date) => boolean	undefined	Predicate to disable specific dates. Return false to disable a date.
renderDay	(info, style) => ReactElement	undefined	Custom render function for day cells.

RangeCalendar

Property	Type	Default	Description
range	{ startDate?: Date, endDate?: Date }	{}	The currently selected date range.
onSelect	(range: { startDate: Date, endDate: Date }) => void	-	Called when a range is selected.
min	Date	undefined	Minimum selectable date.
max	Date	undefined	Maximum selectable date.
dateService	DateService	NativeDateService	Custom date service for localization and date formatting.
filter	(date: Date) => boolean	undefined	Predicate to disable specific dates.

Storybook

Live examples coming soon via Storybook.