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}
            pivotDate={this.pivotDate}
            numberOfDays={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)
numberOfDays (Number) it must be one of 3, 5, 6, 7
pivotTime (Number default: 8) it tells what time to start timetable view
pivotDate (Date, 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

code	language
`en`	English
`es`	Spanish
`de`	German
`fr`	French
`ja`	Japanese
`ko`	Korean
`ms`	Malay
`ru`	Russian
`zh-cn`	Chinese (China)
af	Afrikaans
ar-dz	Arabic (Algeria)
ar-kw	Arabic (Kuwait)
ar-ly	Arabic (Libya)
ar-ma	Arabic (Morocco)
ar-sa	Arabic (Saudi Arabia)
ar-tn	Arabic (Tunisia)
ar	Arabic
az	Azerbaijani
be	Belarusian
bg	Bulgarian
bm	Bambara
bn	Bengali
bo	Tibetan
br	Breton
bs	Bosnian
ca	Catalan
cs	Czech
cv	Chuvash
cy	Welsh
da	Danish
de-at	German (Austria)
de-ch	German (Switzerland)
dv	Divehi
el	Greek
en-au	English (Australia)
en-ca	English (Canada)
en-gb	English (United Kingdom)
en-ie	English (Ireland)
en-nz	English (New Zealand)
eo	Esperanto
es-do	Spanish (Dominican Republic)
es-us	Spanish (United States)
et	Estonian
eu	Basque
fa	Persian
fi	Finnish
fo	Faroese
fr-ca	French (Canada)
fr-ch	French (Switzerland)
fy	Western Frisian
gd	Scottish Gaelic
gl	Galician
gom-latn	gom (Latin)
gu	Gujarati
he	Hebrew
hi	Hindi
hr	Croatian
hu	Hungarian
hy-am	Armenian (Armenia)
id	Indonesian
is	Icelandic
it	Italian
jv	Javanese
ka	Georgian
kk	Kazakh
km	Khmer
kn	Kannada
ky	Kirghiz
lb	Luxembourgish
lo	Lao
lt	Lithuanian
lv	Latvian
me	me
mi	Maori
mk	Macedonian
ml	Malayalam
mr	Marathi
ms-my	Malay (Malaysia)
mt	Maltese
my	Burmese
nb	Norwegian Bokmål
ne	Nepali
nl-be	Dutch (Belgium)
nl	Dutch
nn	Norwegian Nynorsk
pa-in	Punjabi (India)
pl	Polish
pt-br	Portuguese (Brazil)
pt	Portuguese
ro	Romanian
sd	Sindhi
se	Northern Sami
si	Sinhala
sk	Slovak
sl	Slovenian
sq	Albanian
sr-cyrl	Serbian (Cyrillic)
sr	Serbian
ss	Swati
sv	Swedish
sw	Swahili
ta	Tamil
te	Telugu
tet	Tetum
th	Thai
tl-ph	Tagalog (Philippines)
tlh	Klingon
tr	Turkish
tzl	tzl
tzm-latn	tzm (Latin)
tzm	tzm
uk	Ukrainian
ur	Urdu
uz-latn	Uzbek (Latin)
uz	Uzbek
vi	Vietnamese
x-pseudo	x-pseudo
yo	Yoruba
zh-hk	Chinese (Hong Kong SAR China)
zh-tw	Chinese (Taiwan)

Helper Functions

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

genTimeBlock