timetable-component-react-native

Timetable-react-native

How to install

---

npm install timetable-component-react-native

How to use

---

  const timeTableRef = useRef()
  const [timetableMode, setTimetableMode] = useState('TIME') //TIMETABLE MODE
  const [childKey, setChildKey] = useState(1); //MUST HAVE TO CHANGE MODE IN APP

  const onPressChangeTableMode = useCallback(() => {
    if (timetableMode == 'PERIOD') {
      setChildKey(prev => prev + 1);
      setTimetableMode('TIME')
    } else {
      setChildKey(prev => prev + 1);
      setTimetableMode('PERIOD')
    }
 }, [childKey])

• use in JSX

<Timetable
          key={childKey}  // MUST HAVE TO CHANGE MODE
          ref={timeTableRef} //
          tableMode={timetableMode} // TIME or PERIOD
          HeaderHeight={100} //Percent of header component height
          HeaderRenderComponent={ //Component will render and header of timetable
            () => (
              <>
                <Button style={{ marginTop: 100 }} title='test' onPress={() => {
                  onPressChangeTableMode() //Test change mode
                }}></Button>
              </>
            )
          }
          //When click to new box
          onPressCreateNewEvent={(days, time) => {
	        // use in time mode
        	//days in ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] //index start from 0
        	//in TIME mode timeStart, timeEnd is time convert to senconds
        	//dataStore in that timeline
        	//options we support is boxColor, textColor,textSize
        	//addSchedule(days,timeStart,timeEnd,dataStore,options)
            timeTableRef.current.addSchedule(1, 20000, 40500, {}, {
              boxColor: '#f2cc0c'
            })

            timeTableRef.current.addSchedule(1, 41000, 42500, {}, {
              boxColor: 'red'
            })

            timeTableRef.current.addSchedule(3, 35000, 42500, {}, {
              boxColor: '#f20cb8'
            })

            timeTableRef.current.addSchedule(1, 42600, 60000, {}, {
              boxColor: 'blue',
              textColor: 'white',
              textSize:10
            })

            timeTableRef.current.addSchedule(4, 20000, 45000, {}, {
              boxColor: 'orange'
            })

            timeTableRef.current.addSchedule(4, 10000, 19000, {}, {
              boxColor: 'violet'
            })
            // use in period mode
            //  timeTableRef.current.addSchedule(1, 6, 9, {}, {
            //   boxColor: 'red' 
            // })
          }}
          //When click a event box
          onPressEvent={(days, time, dataStore, deleteEvent) => {
        	//days in ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
            console.log('HAHA U HAVE PRESS EVENT BOX')
            Alert.alert('test', 'U can delete box when call deleteEvent', [{
              text: 'Delete',
              onPress: () => {
                deleteEvent()
              }
            }])
          }}
     ></Timetable>

​