react-native-calendar-timetable

Timetable (schedule) component for React Native applications

Installation

npm install react-native-calendar-timetable
yarn add react-native-calendar-timetable
expo install react-native-calendar-timetable

Usage

Initialization example

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 (
        <ScrollView>
            <Timetable
                // these two are required
                items={items}
                renderItem={props => <YourComponent {...props}/>}

                // provide only one of these
                date={date}
                range={range}
            />
        </ScrollView>
    );
}

YourComponent example

/**
 * 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 (
        <View style={{
            ...style, // apply calculated styles, be careful not to override these accidentally (unless you know what you are doing)
            backgroundColor: 'red',
            borderRadius: 10,
            elevation: 5,
        }}>
            <Text>{item.title}</Text>
            <Text>{dayIndex} of {daysTotal}</Text>
        </View>
    );
}

Customization

Styles

All of these keys must be defined on style prop, e.g. style.container.

⚠️ 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 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