React-weekview NPM

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.

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