React-native-calender-view NPM

react-native-calender-view

Calendar UI view for react native apps

Installation

npm install react-native-calender-view

Usage

import CalenderView from 'react-native-calender-view';

// ...

<CalenderView
  onDatePress={(date, events) => console.log('Date Pressed', date, events)}
/>;

Props

name	description	type	default
date	Initial date showned date	Date	today
markedDates	See below for more details	ReactNode	-
onDatePress	Date Press function which gives date and events has a params	Function	-
selectedDateStyle	Selected date style	ViewStyle	-
selectedDateColor	Selected Date Color	ColorValue	-
weekContainerStyle	week contianer styles	ViewStyle	-
containerStyle	Container Style	ViewStyle	-
dateStyle	Date Style mostly used for coloring the box	ViewStyle	-
weekEndColor	Used for assign color for weekends dates	ColorValue	-

markedDates

object which is accept dates has formatted DD-MM-YYYY dates to show on that date is any event was present or not.

Type	Required
object	No

import CalenderView, { getFormattedDDMMYYYY } from 'react-native-calender-view';


const today = getFormattedDDMMYYYY(new Date()) // this utility function auto format date to required format which accepts "Date" has param
// ...

<CalenderView
  onDatePress={(date, events) => console.log('Date Pressed', date, events)}
  markedDates={{
    ['20-02-2023']: {
      events: [''], // Event array which would be return when "onDatePress"
    },
    [today]: {
        style?: ViewStyle,
        events?: any[],
        dotColors?: ColorValue[]
    }
  }}
/>;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

react-native ios android calender react-native-calender react-native-date-view react-native-date

@everything-registry/sub-chunk-2573

0.1.0

2 years ago