A timetable (schedule) calendar component for React Native applications.

Basic usage:

1. Install and import the component.

# Yarn
$ yarn add react-native-calendar-timetable

# NPM
$ npm i react-native-calendar-timetable

import React from "react";
import moment from "moment";
import Timetable from "react-native-calendar-timetable";

2. Initialize the timetable component.

export default function App() {
  const [date] = React.useState(new Date());
  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
              items={items}
              cardComponent={MyItemCard}
              date={date} // optional
              range={range} // optional
          />
      </ScrollView>
  );
}

3. Add items (cards) to the timetable.

export default function MyItemCard({style, item, dayIndex, daysTotal}) {
  return (
      <View style={{
          ...style, 
          backgroundColor: 'red',
          borderRadius: 10,
          elevation: 5,
      }}>
          <Text>{item.title}</Text>
          <Text>{dayIndex} of {daysTotal}</Text>
      </View>
  );
}

Preview:

Download Details:

Author: dorkyboi

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/dorkyboi/react-native-calendar-timetable

License: MIT