react-native-timetable

timetable library for React Native

Real world example

Download at App Store, Get it On Play Store

INSTALLATION

npm install react-native-timetable

No need to link just install it.

Example

import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Alert,
} from 'react-native';
import TimeTableView, { genTimeBlock } from 'react-native-timetable';
const events_data = [
  {
    title: "Math",
    startTime: genTimeBlock("MON", 9),
    endTime: genTimeBlock("MON", 10, 50),
    location: "Classroom 403",
    extra_descriptions: ["Kim", "Lee"],
  },
  {
    title: "Math",
    startTime: genTimeBlock("WED", 9),
    endTime: genTimeBlock("WED", 10, 50),
    location: "Classroom 403",
    extra_descriptions: ["Kim", "Lee"],
  },
  {
    title: "Physics",
    startTime: genTimeBlock("MON", 11),
    endTime: genTimeBlock("MON", 11, 50),
    location: "Lab 404",
    extra_descriptions: ["Einstein"],
  },
  {
    title: "Physics",
    startTime: genTimeBlock("WED", 11),
    endTime: genTimeBlock("WED", 11, 50),
    location: "Lab 404",
    extra_descriptions: ["Einstein"],
  },
  {
    title: "Mandarin",
    startTime: genTimeBlock("TUE", 9),
    endTime: genTimeBlock("TUE", 10, 50),
    location: "Language Center",
    extra_descriptions: ["Chen"],
  },
  {
    title: "Japanese",
    startTime: genTimeBlock("FRI", 9),
    endTime: genTimeBlock("FRI", 10, 50),
    location: "Language Center",
    extra_descriptions: ["Nakamura"],
  },
  {
    title: "Club Activity",
    startTime: genTimeBlock("THU", 9),
    endTime: genTimeBlock("THU", 10, 50),
    location: "Activity Center",
  },
  {
    title: "Club Activity",
    startTime: genTimeBlock("FRI", 13, 30),
    endTime: genTimeBlock("FRI", 14, 50),
    location: "Activity Center",
  },
];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.numOfDays = 5;
    this.pivotDate = genTimeBlock('mon');
  }

  scrollViewRef = (ref) => {
    this.timetableRef = ref;
  };

  onEventPress = (evt) => {
    Alert.alert("onEventPress", JSON.stringify(evt));
  };

  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <View style={styles.container}>
          <TimeTableView
            scrollViewRef={this.scrollViewRef}
            events={events_data}
            pivotTime={9}
            pivotEndTime={20}
            pivotDate={this.pivotDate}
            nDays={this.numOfDays}
            onEventPress={this.onEventPress}
            headerStyle={styles.headerStyle}
            formatDateHeader="dddd"
            locale="ko"
          />
        </View>
      </SafeAreaView>
    );
  }
};

const styles = StyleSheet.create({
  headerStyle: {
    backgroundColor: '#81E1B8'
  },
  container: {
    flex: 1,
    backgroundColor: '#F8F8F8',
  },
});

TimeTableView Props

scrollViewRef (Function(ref)) function that takes timetableView's ref as parameter
events (array of event)
nDays (Number) it must be one of 3, 5, 6, 7
pivotTime (Number default: 8) it tells what time to start timetable view
pivotEndTime (Number default: 22) it tells what time to end timetable view
pivotDate (Date, default monday, return value of genTimeBlock)
onEventPress (function(event) callBackFunction that triggered when event is pressed
headerStyle (object) style for header
formatDateHeader (string default "dddd") dddd -> Monday, ddd -> Mon checkout more details
locale (string) country code

scrollViewRef

Type: Function

function that takes timetableView's ref as parameter

Usage:

<TimeTableView 
  scrollViewRef={(ref) => {
    this.timetableRef = ref;
  }}
/>

events

Type: array of event

event

Type: Object

title: String
startTime: Date (result of genTimeBlock)
endTime: Date (result of genTimeBlock)
location: String
extra_descriptions: Array Of String

e.g.)

{
    title: String,
    startTime: Date, // I surely recommend to make Date using genTimeBlock function
    endTime: Date,
    location: String,
    extra_descriptions: Array Of String,
}

headerStyle

Type: object

e.g.)

headerStyle: {
  backgroundColor: '#81E1B8'
}

locale

Type: string (e.g. en-US)

Check the locale options from momentjs.

Helper Functions

genTimeBlock (function(String, Number, Number)) returns Date

genTimeBlock