📅 use-gregorian
A headless calendar hook for React.
The goal of use-gregorian is to provide all the functionality necessary
to build a calendar or date-picker while leaving the UI & UX up to you.
Table of Contents
Installation
yarn add use-gregorianBe sure you have the peer dependencies installed:
- react
^17.0.0 - react-dom
^17.0.0
Usage
See Storybook for some examples
built with use-gregorian and Chakra.
API
Options
weekStartsOn
Date| defaults toDay.SUNDAY
viewing
Date| defaults tonew Date()
selected
Date[]| defaults to[]
events
Event[]| defaults to[]
Returns
clearTime
(date: Date) => Date
Returns a copy of the given date with the time set to 00:00:00:00.
inRange
(date: Date, min: Date, max: Date) => boolean
Returns whether or not a date is between 2 other dates (inclusive).
viewing
Date
The date represented in the calendar matrix. Note that the month and year are the only parts used.
setViewing
(date: Date) => void
Set the date represented in the calendar matrix. Note that the month and year are the only parts used.
viewMonth
(month: Month) => void
Set the viewing date to the given month.
viewPreviousMonth
() => void
Set the viewing date to the month before the current.
viewNextMonth
() => void
Set the viewing date to the month after the current.
viewYear
(year: number) => void
Set the viewing date to the given year.
viewPreviousYear
() => void
Set the viewing date to the year before the current.
viewNextYear
() => void
Set the viewing date to the year after the current.
selected
Date[]
The dates currently selected.
setSelected
(dates: Date[]) => void
Override the currently selected dates.
clearSelected
() => void
Reset the selected dates to [].
isSelected
(date: Date) => boolean
Determine whether or not a date has been selected.
select
(date: Date | Date[], replaceExisting?: boolean) => void
Select one or more dates.
deselect
(date: Date | Date[]) => void
Deselect one or more dates.
toggle
(date: Date, replaceExisting?: boolean) => void
Toggle the selection of a date.
selectRange
(start: Date, end: Date, replaceExisting?: boolean) => void
Select a range of dates (inclusive).
deselectRange
(start: Date, end: Date) => void
Deselect a range of dates (inclusive).
events
Event[]
The current events.
setEvents
(events: Event[]) => void
Override the current events.
clearEvents
() => void
Reset the selected events to [].
addEvent
(event: Event | Event[]) => void
Add one or more events.
removeEvent
(event: Event | Event[]) => void
Remove one or more events.
hasEvent
(date: Date) => boolean
Determine whether or not a date has an event.
eventsFor
(date: Date) => Event[]
Get events for a given day.
calendar
Date[][]
A matrix of days based on the current viewing date.
Development
# install dependencies
yarn
# run storybook
yarn storybook
# make sure you didn't break nothing
yarn test
# notice, we're not passing -m because we want
# commitizen to handle the commit messages *
git commit -a* We're using commitizen to keep
commit messages standardized. You need to be sure to pick the correct choices
when doing a git commit since the commit history is used to generate the
changelog and resulting version number when running yarn release.
Shout-Outs
- dayzed was the first thing I looked into when creating this library. while it didn't suit my needs, it might suit yours.
- date-fns isn't a calendar library, but it's easy enough to roll your own with it.
