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