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.
initialVisibleDate	Date	undefined	Date the calendar opens on. Falls back to the selected date, then today.
boundingMonth	boolean	true	Whether days of the neighbouring months are rendered in the current month's grid.
startView	CalendarViewMode	CalendarViewModes.DATE	View the calendar opens in — DATE, MONTH or YEAR.
title	(pickerDate, monthYearPickerDate, viewMode) => string	undefined	Custom header title.
renderFooter	() => ReactElement	undefined	Render function for content below the calendar grid.
renderMonth	(info, style) => ReactElement	undefined	Custom render function for month cells.
renderYear	(info, style) => ReactElement	undefined	Custom render function for year cells.
renderArrowLeft	ComponentType<{ onPress: () => void }> | null	undefined	Custom left navigation arrow. Pass null to hide it.
renderArrowRight	ComponentType<{ onPress: () => void }> | null	undefined	Custom right navigation arrow. Pass null to hide it.
onVisibleDateChange	(date: Date, viewModeId: CalendarViewModeId) => void	undefined	Called when the visible date or view mode changes.

Calendar also accepts all standard React Native View props.

Calendar exposes an imperative API through a ref typed as CalendarRef:

Method	Signature	Description
scrollToToday	() => void	Scrolls the calendar to the current date.
scrollToDate	(date: Date) => void	Scrolls the calendar to a given date.
getVisibleDate	() => Date	Returns the currently visible date.
getViewMode	() => CalendarViewMode	Returns the current view mode.
getPickerDate	() => Date	Returns the date shown by the month/year picker.

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.

RangeCalendar accepts the same presentation properties as Calendar — initialVisibleDate, boundingMonth, startView, title, renderDay, renderFooter, renderMonth, renderYear, renderArrowLeft, renderArrowRight and onVisibleDateChange — and exposes scrollToToday(), scrollToDate() and getVisibleDate() through a ref typed as RangeCalendarRef.

Storybook

Live examples coming soon via Storybook.