rn-react-native-calendar

5.1.2 • Public • Published

rn-react-native-calendar

This is a calendar package for react native

Installation

npm install rn-react-native-calendar

Note

Week Calendar Usage

import {WeekCalendar} from "rn-react-native-calendar"


const App =()=>{
    const items = {
        '2022-04-28':{},
        '2022-05-03':{}
    }
    return(
        <View>
            <WeekCalendar items={items} itemsOnThisDate={(items)=>console.log(items)} />
        </View>
    )
}




Screenshot_20220503_185314 (1)

Week Calendar Props

Prop description type defualt value
items items which you want to be marked on calendar object {}
buttonColor color on left and right button background string '#FFEADF'
selectedDateColor selected date background Color string '#ff5a3d'
todayDateColor today's date backgroundColor string 'gray'
itemsOnThisDate callback which triggers when you click on date with items data function (item)=>{ }

CalendarModal Usage

import {CalendarModal} from "rn-react-native-calendar"

const App =()=>{
    const [showCalendar,setShowCalendar] = useState(false)
     const [date,setDate] = useState(new Date())
    const items = {
        '2022-04-28':{},
        '2022-05-03':{}
    }
    const onDayPressChanges = (date)=>{
    
    return(
        <View>
            <CalendarModal 
            items={items}
             currentDate={date} 
            visible={showCalendar} 
            onDayPress={(date)=>onDayPressChanges(date)} 
            onDismiss={()=>setShowCalendar(false)} 
            selectedDateColor={'#ff5a3d'}
            
            />
        </View>
    )
}

CalendarModal Props

Prop description type defualt value
items items which you want to be marked on calendar object {}
visible should show calendar modal or not boolean false
selectedDateColor selected date background Color string '#ff5a3d'
onDayPress callback triggered when a day is pressed function (data)=>{ }
onDismiss callback which triggers when calendar modal closes function ()=>{ }

Screenshot_20220503_182451_com example (1) Screenshot_20220503_182454_com example Screenshot_20220503_182459_com example

Contributing

feel free to contribute

License

MIT

Package Sidebar

Install

npm i rn-react-native-calendar

Weekly Downloads

6

Version

5.1.2

License

MIT

Unpacked Size

77.2 kB

Total Files

10

Last publish

Collaborators

  • nitinvarda