# react-native-calendar-timetable
Timetable (schedule) component for React Native applications
## Installation
```shell
npm install react-native-calendar-timetable
yarn add react-native-calendar-timetable
expo install react-native-calendar-timetable
```
## Usage
Initialization example
```js
import React from "react";
import moment from "moment";
import Timetable from "react-native-calendar-timetable";
export default function App() {
/**
* By default Timetable renders one column.
* This sets date for that column, by default equals to new Date().
* Can be instance of Date or an ISO string.
* Essentially, a shortcut for range {from: date, till: date}.
*/
const [date] = React.useState(new Date());
/**
* If you would like to have multiple columns (e.g. from Monday to Sunday),
* you can specify range of dates. Each day of said range will have its own column.
*
* 'from' and 'till', just like 'date', can be instances of Date or an ISO strings.
*
* It is safe to keep 'from' and 'till' in separate states if you need to
* because Timetable only check if 'from' or 'till' had changed and
* not the object that contains them.
*/
const [from] = React.useState(moment().subtract(3, 'days').toDate());
const [till] = React.useState(moment().add(3, 'days').toISOString());
const range = {from, till};
const [items] = React.useState([
{
title: 'Some event',
startDate: moment().subtract(1, 'hour').toDate(),
endDate: moment().add(1, 'hour').toDate(),
},
]);
return (
}
// provide only one of these
date={date}
range={range}
/>
);
}
```
`YourComponent` example
```js
/**
* Example item component
* @param style Object with pre-calculated values, looks like {position: 'absolute', zIndex: 3, width: Number, height: Number, top: Number, left: Number}
* @param item One of items supplied to Timetable through 'items' property
* @param dayIndex For multiday items inicates current day index
* @param daysTotal For multiday items indicates total amount of days
*/
export default function YourComponent({style, item, dayIndex, daysTotal}) {
return (
{item.title}
{dayIndex} of {daysTotal}
);
}
```
## Customization
### Styles
All of these keys must be defined on `style` prop, e.g. `style.container`.
> :warning: Please be careful while customizing styles as some properties may override those calculated by Timetable, such as `width` and `height` of `style.headerContainer`.
> They were not ignored to allow customization in some extreme edge cases.
> Refer to [Layout](#layout) segment for layout customization.
| Key | Style type | Description |
|------------------|------------|-----------------------------------------------------|
| container | View | Styles of the main container |
| headerContainer | View | Styles of the container of column's header |
| headerText | Text | Styles of the Text of column's header |
| headersContainer | View | Styles of the View that wraps all header containers |
| contentContainer | View | Styles of the container of lines and cards |
| timeContainer | View | Styles of time containers |
| time | Text | Styles of time text |
| lines | View | Styles of Views that render lines |
| nowLine.dot | View* | Styles of the circle of the 'current time' line |
| nowLine.line | View** | Styles of the line of the 'current time' line |
\*, \*\* due to how these Views are used, their customization options were limited:
\*: `width, height, backgroundColor, borderRadius, zIndex, elevation`
\*\*: `height, backgroundColor, zIndex, elevation`
### Layout
| Key | Type | Default | Description |
|-------------------------|--------|----------------------------------------|-----------------------------------------------------------|
| width | Number | `useWindowDimensions().width` | Width of whole component |
| timeWidth | Number | `50` | Width of time containers |
| hourHeight | Number | `60` | Height of hour row |
| itemMinHeightInMinutes | Number | `25` | Item min height in minutes |
| columnWidth | Number | `width - (timeWidth - linesLeftInset)` | Width of day columns |
| columnHeaderHeight | Number | `hourHeight / 2` | Height of the container of column's header |
| linesTopOffset | Number | `18` | How far the lines are from top border |
| linesLeftInset | Number | `15` | How far the lines are moved left from time's right border |
| columnHorizontalPadding | Number | `10` | Space between column borders and column cards |
### Misc
| Key | Type | Default | Description |
|-----------------|-------------------|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| hideNowLine | Boolean | `undefined` | Hiding line, example if you don't want to show line on other days |
| enableSnapping | Boolean | `undefined` | Enables snapping to columns on scroll |
| scrollViewProps | Object | | Props for horizontal ScrollView |
| renderHeader | Function, Boolean | | Determines if headers should be rendered and how. By default headers are hidden if there's one column and shown otherwise. Pass `false` to hide headers or pass function that renders column header text `({date, start, end}) => {}` where `start` and `end` are start and end of the day (column) |
| renderHour | Function | | Function that renders time component for a given hour |
| startProperty | String | `'startDate'` | Name of the property that has item's start date |
| endProperty | String | `'endDate'` | Name of the property that has item's end date |
| fromHour | Number | `0` | First hour of the timetable |
| toHour | Number | `24` | Last hour of the timetable |
| is12Hour | Boolean | | Option to set time to 12h mode |
## License
MIT