Calendar

A general-purpose calendar component supporting day, month, and year views — useful for date selection and scheduling interfaces.

Usage Playground

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Size

small

medium

large

Date Picker Mode

single

multiple

range

Show Adjacent Month Days

Disable Future Dates

Disable Past Dates

Display Date Format

Output Date Format

Code Snippet

import { Calendar } from "@react-native-blossom-ui/dates";

    function Usage() {
        return (
            <Calendar/>
        );
    }

Usage

Sun

Mon

Tue

Wed

Thu

Fri

Sat

function CalendarUsage() {
  const [date, setDate] = useState<Date | undefined>()

  return (
    <View>
      <Calendar
        selectedDate={date}
        onDateChange={(data) => {
          if (data.mode === 'single') {
            setDate(data.date as Date)
          }
        }}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	BaseUIProps	--	Inherits properties from BaseUIProps
selectedDate	string | Date	--	The default selected date.Can be a string (formatted date) or a Date object.
selectedDates	(string | Date)[]	--	The default selected dates for `"multiple"` date selection mode.Can be an array of strings (formatted dates) or Date objects.
selectedEndDate	string | Date	--	The default selected end date for `"range"` date selection mode.Can be a string (formatted date) or a Date object.
disableDates	(string | Date)[]	--	An array of disabled dates of string (in outputDateFormat) or a Date object.Make sure to provide the outputDateFormat prop too if passing date as string
onDateChange	(data: CalendarDateChange) => void	--	Callback triggered when a date is selected. Receives a mode-aware, type-safe payload.
yearListProps	Pick<YearListProps, "minYear" | "maxYear">	--	Props for configuring the year list (min and max year).
containerStyle	StyleProp<ViewStyle>	--	The outer most container style for the calendar.This can be used to set padding, margin, etc.
status	BlossomStatus	primary	Status of the component to apply color variants'primary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
size	BlossomSize	medium	Size of the component'small' | 'medium' | 'large'
datePickerMode	DatePickerMode	single	Selection mode for the date picker.single - single date selection multiple - multiple date selection range - range date selection
showAdjacentMonthDays	boolean	true	Whether to show days from adjacent months to fill the weeks.If true, days from the previous and next months will be displayed to fill the calendar grid.
minDate	string | Date	--	minimum selectable date inclusive.Can be a string (in `outputDateFormat`) or a Date object.
maxDate	string | Date	--	maximum selectable date inclusive.Can be a string (in `outputDateFormat`) or a Date object.
disableFutureDates	boolean	--	Disable future dates
disablePastDates	boolean	--	Disable past dates
disabledDaysOfWeek	number[]	--	disable the given days of the week,from 0 (Sunday) to 6 (Saturday).
displayDateFormat	string	'D MMM YYYY'	The format in which the date should be displayed inside the input value Checkout the dayjs docs for all available formats - https://day.js.org/docs/en/display/format
outputDateFormat	string	'DD-MM-YYYY'	The format in which the selected date should give outputAnd this format should be used whenever you are passing any date to this component Checkout the dayjs docs for all available formats - https://day.js.org/docs/en/display/format