1.0.3 • Published 2 years ago

rn-timetable v1.0.3

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

RN-timetable

How to install


npm install rn-timetable
#OR
yarn add rn-timetable

How to use

  • Image Period Mode Period Mode Time Mode Time Mode Day Mode 1 Day mode 2 Day Mode 2 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>
        )
      }}
    />