React WeekView

A React component and hook for creating week view calendars.

You can use the useWeekView hooks for creating a fully customized week calendar or use the WeekView component.

Demo: react-weekview.vercel.app

Quick Features

• Headless hook for building customized designs
• Prestyled and customizable component
• Minimal dependency (only date-fns)
• Simple, not bloated

Example

# npm
npm install react-weekview

# yarn
yarn add react-weekview

// use the hook and build the design yourself
const { days, nextWeek, previousWeek, goToToday, viewTitle } = useWeekView({
  disabledCell(date) {
    return isBefore(date, new Date());
  },
  disabledWeek(startDayOfWeek) {
    return isBefore(startDayOfWeek, startOfWeek(new Date()));
  },
});

// or use the component
<WeekView />;

useWeekView

Props

| prop | type | default | description | | :------------- | :------------------------------------------------------------ | :----------------- | :----------------------------------------------------------- | | initialDate | ?Date | new Date() | Initial date to start from | | minuteStep | ?number | 30 | How many minutes should there be between the generated cells | | weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 1 | the index of the first day of the week (0 - Sunday) | | locale | date-fns Locale | date-fns default | A locale object | | disabledCell | ?(date: Date) => boolean | - | A function for determining the cells that cannot be selected | | disabledDay | ?(date: Date) => boolean | - | A function for determining the days that cannot be selected | | disabledWeek | ?(startDayOfWeek: Date) => boolean | - | A function for determining the weeks that cannot be viewed |

Returns

| field | type | description | | :------------- | :-------------------------------------- | :--------------------------------------------- | | days | Days | An array of days and hours for the active week | | weekNumber | string | Week number of the active week | | viewTitle | string | Month and year of the active week | | nextWeek | () => void | Go to next week | | previousWeek | () => void | Go to previous week | | goToToday | () => void | Go to current week |

<WeekView />

Props

...useWeekView props | prop | type | default | description | | :------------- | :------------------------------------------------------------ | :----------------- | :----------------------------------------------------------- | | events | ?Event[] | - | Event list to display on the calendar | | onCellClick | ?(cell: Cell) => void | - | Cell click callback | | onEventClick | ?(evet: Event) => void | - | Event click callback |