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
- Headless hook for building customized designs
- Prestyled and customizable component
- Minimal dependency (only date-fns)
- Simple, not bloated
# 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 />;| 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 |
| 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 |
...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 |