@mikezzb/react-native-timetable
v0.2.6TypeScript
React Native TimeTable Component
0/weekUpdated 3 years agoMITUnpacked: 39.7 KB
Published by mikezzb
npm install @mikezzb/react-native-timetableReact Native Timetable
React Native Timetable View
Try It
Run example by performing the following steps:
``sh`
git clone https://github.com/mikezzb/react-native-timetable.git
cd react-native-timetable
yarn install
yarn example install
yarn example android
Installation
`sh`
yarn add @mikezzb/react-native-timetable
Usage
Use events
tsx
import TimeTable from '@mikezzb/react-native-timetable';// ...
{
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
tsx
import TimeTable from '@mikezzb/react-native-timetable';// ...
{
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
$3
You can choose to pass either
or events to make timetable events| Property | Type | Description |
| --------------------- | ----------------------------- | ------------------------------------------------------------ |
|
eventGroups | [EventGroup[]](#EventGroup) | Collection of event group, events parsed from one eventGroup share the same courseId, title and color, but different section |
| events | [Event[]](#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 |$3
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 |$3
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 |$3
Collection of events sharing common properties like
courseId| Property | Type | Description |
| ---------- | ----------------------- | ------------------------------------------------------------ |
|
| 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) |$3
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[] |$3
| 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
`tsx
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 (
// events={events}
eventOnPress={(event) => Alert.alert(
${JSON.stringify(event)})}
/>
);
}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