Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yusufff/react-weekview
Week view component and hook for React
https://github.com/yusufff/react-weekview
react week-picker week-view
Last synced: about 2 months ago
JSON representation
Week view component and hook for React
- Host: GitHub
- URL: https://github.com/yusufff/react-weekview
- Owner: yusufff
- License: mit
- Created: 2023-08-16T13:40:14.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-16T10:09:50.000Z (4 months ago)
- Last Synced: 2024-09-16T11:44:51.669Z (4 months ago)
- Topics: react, week-picker, week-view
- Language: TypeScript
- Homepage: https://react-weekview.vercel.app
- Size: 1.01 MB
- Stars: 9
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React WeekView
[](https://www.npmjs.com/package/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](https://react-weekview.vercel.app)
## Quick Features
- Headless hook for building customized designs
- Prestyled and customizable component
- Minimal dependency (only [date-fns](https://date-fns.org/))
- Simple, not bloated
## Example
```bash
# npm
npm install react-weekview
# yarn
yarn add 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`
### 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](https://date-fns.org/v2.30.0/docs/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`](/src/lib/use-weekview.ts#L115) | 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 |
## ``
### Props
_...`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 |