Week view component and hook for React
npm install 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
- Headless hook for building customized designs
- Prestyled and customizable component
- Minimal dependency (only date-fns)
- Simple, not bloated
``bashnpm
npm install react-weekview
`tsx
// 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
;
`useWeekView$3
| 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 |$3
| 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 |$3
_...
useWeekView props_
| prop | type | default | description |
| :------------- | :------------------------------------------------------------ | :----------------- | :----------------------------------------------------------- |
| events | [?Event[]](/src/lib/weekview.tsx#L9) | - | Event list to display on the calendar |
| onCellClick | ?(cell: Cell) => void | - | Cell click callback |
| onEventClick | ?(evet: Event) => void` | - | Event click callback |