rn-timetable
v1.0.3
Published
Timetable react native
Downloads
41
Maintainers
Readme
RN-timetable
How to install
npm install rn-timetable
#OR
yarn add rn-timetable
How to use
- Image Period Mode Time Mode Day Mode 1 Day Mode 2 ---
const timeTableRef = useRef()
const [timetableMode, setTimetableMode] = useState('TIME') //TIMETABLE MODE
- API Reference timeTableRef.current.changeMode(): Change mode timeTableRef.current.reset(): reset All data in table timeTableRef.current.addSchedule(day, timeStart,timeEnd,dataStore,option): add new time to table
In time mode timeStart ,timeEnd is "time in day" convert to second ,ex 3h -> 10800
In period mode timeStart, timeEnd is period ex: 1,2,3 (Period)
---
- Timetable props ref: table ref (mush have) daysMode: 1 (six day/week) - 2 (seven day/week) data: data input (example below) tableMode: time(24h) or period(Default: 12 period) numberOfPeriod: if u want more than 12 period stateNoteOption: show note if true or else (default:true) ---
- use in JSX
<Timetable
daysMode={1}
ref={tableRef}
HeaderHeight={100} // 0 for none
data={[{
mode: 'TIME',
days: 1,
timeStart: 20000,
timeEnd: 40000,
dataStore: {
text: 'Toán',
noteText: "Thi cuoi ky"
},
option:{
boxColor:'red',
fontColor:'green'
}
},
{
mode: 'TIME',
days: 2,
timeStart: 30000,
timeEnd: 40000,
}]}
tableMode={'TIME'}
onPressCreateNewEvent={(day, time) => {
}}
onPressEvent={(day, timeStart, timeEnd, dataStore, deleteEvent) => {
deleteEvent()//use to delete time on point
}}
HeaderRenderComponent={() => {
return (
<Button title='Change mode' onPress={() => {
tableRef.current.changeMode() // Change mode
}}></ Button>
)
}}
/>