CalendarUI

The most important part of NextJS is the Calendar based UI that takes the input from user and passes it to the Appwrite Function.

calendar based NextJS UI

React-Calendar

The Calendar component is a reusable UI element that allows users to select dates or date ranges. This component utilizes the React-Calendar library to provide a customizable and user-friendly experience.

# Installing React Calendar using npm or yarn
npm i react-calendar
yarn install react-calendar

Props

The following props are available for the Calendar component:

1. onChange

  • Type: (value: Date | [Date, Date]) => void

  • Description: A callback function invoked when the user selects a date or date range.

<Calendar onChange={(value) => console.log(value)} />

Copied

2. value

  • Type: Date | [Date, Date]

  • Description: The currently selected date(s).

const [date, setDate] = useState(new Date());
<Calendar value={date} onChange={(value) => setDate(value)} />

Copied

3. calendarType

  • Type: string

  • Description: Specifies the calendar type (e.g., "US").

  • Default: "US"

<Calendar calendarType="US" />

Copied

4. minDate

  • Type: Date

  • Description: Sets the minimum date that can be selected.

<Calendar minDate={new Date('2022-01-01')} />

Copied

5. maxDate

  • Type: Date

  • Description: Sets the maximum date that can be selected.

<Calendar maxDate={new Date('2022-12-31')} />

Copied

6. selectRange

  • Type: boolean

  • Description: Enables date range selection.

  • Default: false

<Calendar selectRange={true} />

Calendar Component used in Patronus

# Calendar Component

<Calendar 
     selectRange={true}
    onChange={(value, event) => handleDateChange(value as [Date | null, Date | null])}
    value={selectedDates}
    minDate={new Date()} 
    className='calendar'
    onActiveStartDateChange={({ activeStartDate }) => setCurrentMonth(activeStartDate!)}
  />

'handleDateChange' Prop

The handleDateChange prop is typically used in conjunction with selectedDate state that stores the currently selected date. When the user selects a new date, the handleDateChange function is called, updating the state variable with the new date value.

The handleDateChange prop function typically accepts a single argument, date, which represents the newly selected date. The date argument can be one of the following types:

  • Date: A JavaScript Date object representing the selected date.

  • null | undefined: Indicates that no date is selected (e.g., when the user clears the selection).

Please refer to the React-Calendar documentation for more information on available customization options. React-Calendar Documentation

PreviousNextJSNextAuth

Last updated