gomjellie / React Native Timetable
Licence: mit
📆timetable component library for React Native
Stars: ✭ 38
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Native Timetable
Hello Rxjava
可能是学习Rxjava最好的教程之一,另一个是《给Android开发者RxJava的详解》,这个毫无疑问。
Stars: ✭ 526 (+1284.21%)
Mutual labels: schedule
Laravel Google Calendar
Manage events on a Google Calendar
Stars: ✭ 787 (+1971.05%)
Mutual labels: schedule
Osem
Open Source Event Manager. An event management tool tailored to Free and Open Source Software conferences.
Stars: ✭ 649 (+1607.89%)
Mutual labels: schedule
Schema Org
A fluent builder Schema.org types and ld+json generator
Stars: ✭ 894 (+2252.63%)
Mutual labels: schedule
Laravel Schedule Monitor
Monitor scheduled tasks in a Laravel app
Stars: ✭ 393 (+934.21%)
Mutual labels: schedule
Angular Gantt Schedule Timeline Calendar
Angular version of gantt-schedule-timeline-calendar [ angular gantt, gantt chart, angular gantt chart, angular schedule, angular timeline, angular calendar, gantt chart, schedule, scheduler, timeline, calendar ]
Stars: ✭ 32 (-15.79%)
Mutual labels: schedule
Springboot Learning
🚕 spring boot学习案例,方便spring boot 初学者快速掌握相关知识
Stars: ✭ 724 (+1805.26%)
Mutual labels: schedule
Smart Scheduler Android
A utility library for scheduling periodic and non-periodic jobs efficiently.
Stars: ✭ 930 (+2347.37%)
Mutual labels: schedule
Incubator Dolphinscheduler
Apache DolphinScheduler is a distributed and extensible workflow scheduler platform with powerful DAG visual interfaces, dedicated to solving complex job dependencies in the data pipeline and providing various types of jobs available out of box.
Stars: ✭ 6,916 (+18100%)
Mutual labels: schedule
Crono
A time-based background job scheduler daemon (just like Cron) for Rails
Stars: ✭ 637 (+1576.32%)
Mutual labels: schedule
Mantra
A simple cron-like scheduler for a single command
Stars: ✭ 24 (-36.84%)
Mutual labels: schedule
Bell
⏱ Counting down to the next time the bell rings at school
Stars: ✭ 15 (-60.53%)
Mutual labels: schedule
Laravel Stager
Laravel Stager State Machine, Its purpose is to add state machine functionality to models
Stars: ✭ 16 (-57.89%)
Mutual labels: schedule
Phpcalfeed
A simple PHP script for providing calendar feeds for your website in a variety of different formats including iCalendar, RSS, JSON and XML.
Stars: ✭ 31 (-18.42%)
Mutual labels: schedule
Activejob Scheduler
A background job scheduler for any queue backend
Stars: ✭ 24 (-36.84%)
Mutual labels: schedule
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}
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 ofevent
) -
numberOfDays
(Number) it must be one of3
,5
,6
,7
-
pivotTime
(Numberdefault: 8
) it tells what time to start timetable view -
pivotEndTime
(Numberdefault: 22
) it tells what time to end timetable view -
pivotDate
(Date,default monday
, return value ofgenTimeBlock
) -
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
Type: Function
params
- dayOfWeek (String, One of
"SUN"
,"MON"
,"TUE"
,"WED"
,"THU"
,"FRI"
,"SAT"
) - hours (Number, default
0
) - minutes (Number, default
0
)
Inspirations
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].