Have ideas to improve npm?Join in the discussion! »

    use-events-calendar-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.11 • Public • Published

    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}

    Install

    npm i use-events-calendar-react

    DownloadsWeekly Downloads

    15

    Version

    0.1.11

    License

    MIT

    Unpacked Size

    177 kB

    Total Files

    35

    Last publish

    Collaborators

    • avatar