use-events-calendar-react

install: yarn add use-events-calendar-react

demo: [https://github.com/DeathstarNovember/scheduler]

Basic Usage

The useEventsCalendar() hook takes one required argument: initialEvents, and one optional argument initialSelectedDate.

initialEvents is an array of CalendarEvent to place on the calendar whan it loads.

initialSelectedDate is the date on which the calendar will focus when it loads, this is today by default.

useEventsCalendar() uses two other hooks under the hood, useCalendar: (initialSelectedDate?: Date) => UseCalendar and useEvents: (initialEvents: CalendarEvent[]) => UseEvents

For convenience, defaultCalendar and defaultEvents will satisfy types as an initializer for createContext<UseEventsCalendar>.

All types are named exports.

import React, {createContext, useContext} from "react";

import useEventsCalendar, {UseCalendar, UseEvents, defaultCalendar, defaultEvents} from "use-events-calendar-react";

const initialEvents = [];

const initialSelectedDate = new Date();

cosnt EventsCalendarContext = createContext<{calendar: UseCalendar, calendarEvents: UseEvents}>(
  {calendar: defaultCalendar, calendarEvents: defaultEvents}
)

const App = () => {

  const {calendar, calendarEvents} = useEventsCalendar(initialSelectedDate, initialEvents);

  const {
    today,
    months,
    weekdays,
    currentDay,
    currentWeek,
    currentYear,
    currentMonth,
    monthDisplayDays,
    weekDisplayDays,
    msInAMinute,
    msInAnHour,
    msInADay,
    msInAWeek,
    selectDay,
    getDayStyle,
    getFirstDayOfWeek,
    getWeekByDate,
    getNextWeek,
    getLastWeek,
    getDaysInMonth,
    getLastMonth,
    getNextMonth,
    getMonthFromDate,
    getFirstDayOfYear,
    getLastDayOfYear,
    getFirstWeekOfYear,
    getWeekdayFromWeek,
    getWeekNumber,
    loadPrevWeek,
    loadNextWeek,
    loadPrevMonth,
    loadNextMonth,
  } = calendar

  const {
    events, //event array
    getHourEvents,
    getDayEvents,
    getMonthEvents,
    setEvents,
    addEvent,
    updateEvent,
    deleteEvent,
  } = calendarEvents

  //recommend to leave the calendar and events separate in context.

  return(
    <EventsCalendarContext.Provider calendar={calendar} calendarEvents={calendarEvents}>
      <YourCustomCalendar />
    </EventsCalendarContext.Provider>
  )
}

Descriptions

Calendar State

Value	Description	Type
currentDay	The selected Day	Day
currentWeek	The Week containing the selected Day	Week
currentYear	The year as a number of the selectedDay	number
currentMonth	The Month containing the selected Day	Month
monthDisplayDays	Day array containing all necessary Days to fill a w x 7 grid, including days from the next and previous months.	Day[]
weekDisplayDays	Day array containing all days in the currentWeek	Day[]
selectDay	Function to select a Day. Setting the current day will update all current{period} values.	(day: Day) => void
loadPrevWeek	Changes the currentDay to one week earlier.	() => void
loadNextWeek	Changes the currentDay to one week later.	() => void
loadPrevMonth	Changes the currentDay to one month earlier.	() => void
loadNextMonth	Changes the currentDay to one month later.	() => void

Calendar Utils

Value	Description	Type
getFirstDayOfWeek	The date of the first day of the week containing the given date.	(Date: Date) => Date
getNextWeek	Info about the week after the currentWeek	() => Week
getLastWeek	Info about the week before the currentWeek	() => Week
getDaysInMonth	Gets the number of days in a given month and year.	(m: number, y: number) => number
getLastMonth	Info about the month before the currentMonth	() => Month
getNextMonth	Info about the month after the currentMonth	() => Month
getWeekByDate	Info about the week containing a given date.	(date: Date) => Week
getMonthFromDate	Info about the month containing a given date.	(date: Date) => Month
getFirstDayOfYear	The first Day of a given year	(year: number) => Date
getLastDayOfYear	The last Day of a given year	(year: number) => Date
getFirstWeekOfYear	The first Week of a given year.	(year: number) => Week
getWeekdayFromWeek	The Day that is a given weekday from a given week.	(week: Week, weekday: DayOfWeek) => Day
getWeekNumber	The ISO week number of the week containing a given date.	(date: Date) => number

Events State

Value	Description	Type
events	CalendarEvent array managed by useEventCalandar. Are initialized in the initial call to useEventsCalendar as the first argument.	CalendarEvent[]
setEvents	Updates events.	(event: NewCalendarEvent) => void
addEvent	Adds a given CalendarEvent to events.	(event: CalendarEvent) => void
updateEvent	Updates a given CalendarEvent from events.	(event: CalendarEvent) => void
deleteEvent	Removes a given CalendarEvent from events.	(event: CalendarEvent) => void

Events Utilties

Value	Description	Type
getHourEvents	All events from a given list where startDate is within an hour of start arg.	(events: CalendarEvent[], start: Date) => CalendarEvent[]
getDayEvents	All events from a given list where startDate is on a given Day.	(events: CalendarEvent[], day: Day) => CalendarEvent[]
getMonthEvents	All events from a given list where startDate is within a given Month in a given year.	(events: CalendarEvent[], month: Month, year: number) => CalendarEvent[]

Static Data

Value	Description	Type
today	Today’s Day	Day
months	Static data	Month[]
weekdays	Static data	DayOfWeek[]
msInAMinute	Static data	number
msInAnHour	Static data	number
msInADay	Static data	number
msInAWeek	Static data	number

Styles

Value	Description	Type
getDayStyle	Gets a CSS style object for a given date.	(day: Day, currentDay: Day, options?: DayStyleOptions) => CSS

Types

Value	Description	Type
CSS	Alias	React.CSSProperties
Month	Info about a given Month	{ name: string; shortName: string; id: number }
Week	Info about a given Week	{id: string; firstDay: Date;}
Day	Info about a given Day	{date: Date; weekday: DayOfWeek; currentPeriod: boolean}
DayOfWeek	Info about a given weekday.	{ name: string; shortName: string; id: number }
NewCalendarEvent	Handy for creating an event. Sets the id to Date.now().toString()	Omit<\CalendarEvent, 'id'>\
DayStyleOptions	Options object for use with getDayStyles()	{currentDayStyles: CSS, todayStyles: CSS, pastDayStyles: CSS;futureDayStyles: CSS}