Calendar Hook
Overview
useCalendar is designed for managing calendar-related functionalities within a React application. It provides an efficient way to handle dates, days, and events, making it ideal for applications that require calendar features. The hook is built using date-fns for date manipulation, ensuring a lightweight and functional approach.
Installation
yarn add @bruceshi/calendar-hook
Usage
import { useCalendar } from '@bruceshi/calendar-hook';
const {
days,
weekdays,
next,
prev,
setView,
current,
setCurrent
} = useCalendar(events);
Args
- events: An optional array of events to initialize the calendar.
Return Values
The hook returns an object containing the following properties:
-
days
: An array of Day objects representing each day in the current view (month or week). -
weekdays
: An array of strings representing the days of the week. -
next
: A function to navigate to the next month or week. -
prev
: A function to navigate to the previous month or week. -
setView
: A function to set the calendar view ('month' or 'week'). -
current
: The current date. -
setCurrent
: A function to set the current date.
Interfaces
-
Event
: Represents an event with a date property. -
Day
: Represents a day in the calendar with properties such as date, format, isSameMonth, isToday, and events.