React Native Timetable

React Native Timetable View

Try It

Run example by performing the following steps:

git clone https://github.com/mikezzb/react-native-timetable.git
cd react-native-timetable
yarn install
yarn example install
yarn example android

Installation

yarn add @mikezzb/react-native-timetable

Usage

Use events

import TimeTable from '@mikezzb/react-native-timetable';

// ...

<TimeTable
  events={[
  {
    courseId: 'CSCI2100',
    title: 'Data Structures',
    section: 'A - LEC',
    day: 3,
    startTime: '14:30',
    endTime: '16:15',
    location: 'Online Teaching',
    color: 'rgba(241,153,40,1)',
  },]}
  eventOnPress={(event) => Alert.alert(`${JSON.stringify(event)}`)}
/>

OR use eventGroups

import TimeTable from '@mikezzb/react-native-timetable';

// ...

<TimeTable
  eventGroups={[
    {
      courseId: 'CSCI2100',
      title: 'Data Structures',
      sections: {
        'A - LEC': {
          days: [1, 3],
          startTimes: ['16:30', '14:30'],
          endTimes: ['17:15', '16:15'],
          locations: ['Online Teaching', 'Online Teaching'],
        },
        'AT02 - TUT': {
          days: [4],
          startTimes: ['17:30'],
          endTimes: ['18:15'],
          locations: ['Online Teaching'],
        },
      },
    },
  ]}
  eventOnPress={(event) => Alert.alert(`${JSON.stringify(event)}`)}
/>

Types

TimeTable Props

You can choose to pass either eventGroups or events to make timetable events

| Property | Type | Description | | --------------------- | ----------------------------- | ------------------------------------------------------------ | | eventGroups | EventGroup[] | Collection of event group, events parsed from one eventGroup share the same courseId, title and color, but different section | | events | Event[] | Collection of event, each event is a card displayed on timetable | | eventOnPress | (event) => any | (Optional) On press function for an event card, event object will be passed as parameter | | eventColors | string[] | (Optional) Event card colors | | configs | Configs | (Optional) Configurations like numOfDays, startHour, timeTickWidth | | headerStyle | ViewStyle | (Optional) Header styles | | disableHeader | boolean | (Optional) To disable weekdays header | | disableTicker | boolean | (Optional) To disable current time indicator | | contentContainerStyle | ViewStyle | (Optional) Event cards container styles | | theme | Theme | (Optional) Overall theme for timetable, such as header , background, and text colors |

Configs

Same index in events values array map to an event

| Property | Type | Description | Default | | ------------------ | -------- | ------------------------------------------------------------ | ------- | | startHour | number | (Optional) Earliest grid hour in timetable in 24 hour | 7 | | endHour | number | (Optional) Last grid hour in timetable in 24 hour | 20 | | numOfDays | number | (Optional) Total number of days in timetable | 7 | | numOfDaysPerPage | number | (Optional) Number of days in one page, horizontal scroll to view other days (if any) | 5 | | timeTicksWidth | number | (Optional) Width of time ticks bar | 52 |

Event

Each event is a card displayed on timetable

| Property | Type | Description | | ----------- | -------- | -------------------------------------------------- | | startTime | string | Event start time in HH:MM (24 hours format) | | endTime | string | Event end time in HH:MM (24 hours format) | | day | number | Weekday of the event (1 for Monday, 7 for Sunday) | | location | string | Location of the event (Displayed as caption) | | section | string | (Optional) Displayed next to title | | title | string | (Optional) Passed in eventOnPress but not showed | | color | string | (Optional) Color in rgba for that event card |

EventGroup

Collection of events sharing common properties like courseId

| Property | Type | Description | | ---------- | ----------------------- | ------------------------------------------------------------ | | courseId | string | Title for all events inside group | | sections | Sections | Object with key as section label, value as Events | | title | string | (Optional) Title of the event (not displayed in timetable, but passed in eventOnPress) |

Events

Same index in events values array map to an event, displayed as a collection of event cards with same color

| Property | Type | | ------------- | ---------- | | startTimes | string[] | | endTimes | string[] | | days | number[] | | locations | string[] | | instructors | string[] |

Theme

| Property | Type | Description | | --------- | -------- | ----------------------------------------------------------- | | primary | string | (Optional) header color | | accent | string | (Optional) highlighted weekday text color | | background | string | (Optional) background color | | text | string | (Optional) base color for timetable ticks and weekday texts |

Example

import * as React from 'react';

import { Alert, StatusBar, StyleSheet, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import TimeTable from '@mikezzb/react-native-timetable';

const eventGroups = [
  {
    courseId: 'AIST3020',
    title: 'Intro to Computer Systems',
    sections: {
      '- - LEC': {
        days: [2, 3],
        startTimes: ['11:30', '16:30'],
        endTimes: ['12:15', '18:15'],
        locations: ['Online Teaching', 'Online Teaching'],
      },
      '-L01 - LAB': {
        days: [2],
        startTimes: ['16:30'],
        endTimes: ['17:15'],
        locations: ['Online Teaching'],
      },
    },
  },
  {
    courseId: 'CSCI2100',
    title: 'Data Structures',
    sections: {
      'A - LEC': {
        days: [1, 3],
        startTimes: ['16:30', '14:30'],
        endTimes: ['17:15', '16:15'],
        locations: ['Online Teaching', 'Online Teaching'],
      },
      'AT02 - TUT': {
        days: [4],
        startTimes: ['17:30'],
        endTimes: ['18:15'],
        locations: ['Online Teaching'],
      },
    },
  },
  {
    courseId: 'ELTU2014',
    title: 'English for ERG Stds I',
    sections: {
      'BEC1 - CLW': {
        days: [2, 4],
        startTimes: ['10:30', '8:30'],
        endTimes: ['11:15', '10:15'],
        locations: ['Online Teaching', 'Online Teaching'],
      },
    },
  },
  {
    courseId: 'ENGG2780',
    title: 'Statistics for Engineers',
    sections: {
      'B - LEC': {
        days: [1],
        startTimes: ['12:30'],
        endTimes: ['14:15'],
        locations: ['Online Teaching'],
      },
      'BT01 - TUT': {
        days: [3],
        startTimes: ['12:30'],
        endTimes: ['14:15'],
        locations: ['Online Teaching'],
      },
    },
  },
  {
    courseId: 'GESC1000',
    title: 'College Assembly',
    sections: {
      '-A01 - ASB': {
        days: [5],
        startTimes: ['11:30'],
        endTimes: ['13:15'],
        locations: ['Online Teaching'],
      },
    },
  },
  {
    courseId: 'UGEB1492',
    title: 'Data Expl - Stat in Daily Life',
    sections: {
      '- - LEC': {
        days: [4],
        startTimes: ['14:30'],
        endTimes: ['17:15'],
        locations: ['Lady Shaw Bldg LT5'],
      },
    },
  },
  {
    courseId: 'UGEC1685',
    title: 'Drugs and Culture',
    sections: {
      '- - LEC': {
        days: [4],
        startTimes: ['11:30'],
        endTimes: ['13:15'],
        locations: ['Lee Shau Kee Building LT5'],
      },
    },
  },
  {
    courseId: 'Eat!',
    title: 'No work on SUNDAY!',
    sections: {
      '': {
        days: [7],
        startTimes: ['12:30'],
        endTimes: ['13:15'],
        locations: ['Home'],
      },
    },
  },
  {
    courseId: 'Manga!',
    title: '',
    sections: {
      '': {
        days: [6],
        startTimes: ['16:30'],
        endTimes: ['19:15'],
        locations: ['Home'],
      },
    },
  },
];

const events = [
  {
    courseId: 'AIST3020',
    title: 'Intro to Computer Systems',
    section: '- - LEC',
    day: 2,
    startTime: '11:30',
    endTime: '12:15',
    location: 'Online Teaching',
    color: 'rgba(253,149,141,1)',
  },
  {
    courseId: 'AIST3020',
    title: 'Intro to Computer Systems',
    section: '- - LEC',
    day: 3,
    startTime: '16:30',
    endTime: '18:15',
    location: 'Online Teaching',
    color: 'rgba(253,149,141,1)',
  },
  {
    courseId: 'AIST3020',
    title: 'Intro to Computer Systems',
    section: '-L01 - LAB',
    day: 2,
    startTime: '16:30',
    endTime: '17:15',
    location: 'Online Teaching',
    color: 'rgba(253,149,141,1)',
  },
  {
    courseId: 'CSCI2100',
    title: 'Data Structures',
    section: 'A - LEC',
    day: 1,
    startTime: '16:30',
    endTime: '17:15',
    location: 'Online Teaching',
    color: 'rgba(241,153,40,1)',
  },
  {
    courseId: 'CSCI2100',
    title: 'Data Structures',
    section: 'A - LEC',
    day: 3,
    startTime: '14:30',
    endTime: '16:15',
    location: 'Online Teaching',
    color: 'rgba(241,153,40,1)',
  },
  {
    courseId: 'CSCI2100',
    title: 'Data Structures',
    section: 'AT02 - TUT',
    day: 4,
    startTime: '17:30',
    endTime: '18:15',
    location: 'Online Teaching',
    color: 'rgba(241,153,40,1)',
  },
  {
    courseId: 'ELTU2014',
    title: 'English for ERG Stds I',
    section: 'BEC1 - CLW',
    day: 2,
    startTime: '10:30',
    endTime: '11:15',
    location: 'Online Teaching',
    color: 'rgba(3,218,197,1)',
  },
  {
    courseId: 'ELTU2014',
    title: 'English for ERG Stds I',
    section: 'BEC1 - CLW',
    day: 4,
    startTime: '8:30',
    endTime: '10:15',
    location: 'Online Teaching',
    color: 'rgba(3,218,197,1)',
  },
  {
    courseId: 'ENGG2780',
    title: 'Statistics for Engineers',
    section: 'B - LEC',
    day: 1,
    startTime: '12:30',
    endTime: '14:15',
    location: 'Online Teaching',
    color: 'rgba(0,142,204,1)',
  },
  {
    courseId: 'ENGG2780',
    title: 'Statistics for Engineers',
    section: 'BT01 - TUT',
    day: 3,
    startTime: '12:30',
    endTime: '14:15',
    location: 'Online Teaching',
    color: 'rgba(0,142,204,1)',
  },
  {
    courseId: 'GESC1000',
    title: 'College Assembly',
    section: '-A01 - ASB',
    day: 5,
    startTime: '11:30',
    endTime: '13:15',
    location: 'Online Teaching',
    color: 'rgba(187,134,252,1)',
  },
  {
    courseId: 'UGEB1492',
    title: 'Data Expl - Stat in Daily Life',
    section: '- - LEC',
    day: 4,
    startTime: '14:30',
    endTime: '17:15',
    location: 'Lady Shaw Bldg LT5',
    color: 'rgba(102,204,255,1)',
  },
  {
    courseId: 'UGEC1685',
    title: 'Drugs and Culture',
    section: '- - LEC',
    day: 4,
    startTime: '11:30',
    endTime: '13:15',
    location: 'Lee Shau Kee Building LT5',
    color: 'rgba(255,111,199,1)',
  },
  {
    courseId: 'Eat!',
    title: 'No work on SUNDAY!',
    section: '',
    day: 7,
    startTime: '12:30',
    endTime: '13:15',
    location: 'Home',
    color: 'rgba(50,144,144,1)',
  },
  {
    courseId: 'Manga!',
    title: '',
    section: '',
    day: 6,
    startTime: '16:30',
    endTime: '19:15',
    location: 'Home',
    color: 'rgba(211,124,177,1)',
  },
];

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaContainer}>
        <StatusBar backgroundColor="rgba(21,101,192,1)" />
        <View style={styles.container}>
          <TimeTable
            eventGroups={eventGroups}
            // events={events}
            eventOnPress={(event) => Alert.alert(`${JSON.stringify(event)}`)}
          />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  safeAreaContainer: {
    flex: 1,
  },
  container: {
    flex: 1,
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT