Rn-react-native-calendar NPM

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	()=>{ }