react-schedule-view
Version:
A zero-dependency, fully customizable component for displaying schedules in a daily or week format
111 lines (90 loc) • 2.48 kB
Markdown
# Quick Start
React Schedule View is a zero-dependency, fully customizable component for displaying schedules in a daily or week format.
## Install
React Schedule View is compatible with React versions 17 and 18.
```bash
npm i react-schedule-view
```
## Basic Usage
```typescript
const data: DaySchedule[] = [
{
name: "Friday",
events: [
{
startTime: 16,
endTime: 18,
title: "Check-in",
description:
"Follow the signs to the registration desk inside the north entrance",
},
{
startTime: 16.5,
endTime: 17.75,
title: "Dinner & Team Forming",
},
{
startTime: 18,
endTime: 19,
title: "Opening Keynote",
},
],
},
{
name: "Saturday",
events: [
{
startTime: 17,
endTime: 19,
title: "Next Day's Event",
},
],
},
];
```
```tsx
<ScheduleView daySchedules={data} viewStartTime={15} viewEndTime={20} />
```
## Alternate Theme
To change the calendar theme, you can pass a `theme` prop to the `ScheduleView` component. The theme can be a string `"apple"` or `"google"` (default), or a custom `CalendarTheme` object.
```tsx
<ScheduleView theme="apple" ... />
```
## Custom Tile Colors
Colors for each tile can be optionally given in the day schedule event data. If no color is given, the theme's default color (blue) will be used. This package includes both Apple and Google colors that can be used, but you can also use any CSS color value (RGB, HEX, color name, etc.).
```typescript
const data: DaySchedule[] = [
{
name: "Custom Colors",
events: [
{
startTime: 16,
endTime: 18,
title: "Theme Color",
color: colors.apple.red,
},
{
startTime: 16.5,
endTime: 17.75,
title: "RGB Color",
color: "rgb(255, 0, 255)",
},
{
startTime: 18,
endTime: 19,
title: "CSS Color Name",
color: "royalblue",
},
],
},
];
```
```tsx
<ScheduleView daySchedules={data} viewStartTime={15} viewEndTime={20} />
```
## Server Side Rendering
The "apple" theme is not compatible with server side rendering since CSS colors must be parsed in the browser. This function is already safely deferred to run only in the browser.