## react-native-calendar A `` component for React Native Portrait mode only ## Installation `npm install react-native-calendar --save` ## Usage ```javascript this.onDateSelect(date)} // Callback after date selection onDateLongPress={(date) => this.onDateLongPress(date)} // Callback after date is long pressed onSwipeNext={this.onSwipeNext} // Callback for forward swipe event onSwipePrev={this.onSwipePrev} // Callback for back swipe event onTouchNext={this.onTouchNext} // Callback for next touch event onTouchPrev={this.onTouchPrev} // Callback for prev touch event onTitlePress={this.onTitlePress} // Callback on title press prevButtonText={'Prev'} // Text for previous button. Default: 'Prev' removeClippedSubviews={false} // Set to false for us within Modals. Default: true renderDay={} // Optionally render a custom day component scrollEnabled={true} // False disables swiping. Default: False selectedDate={'2015-08-15'} // Day to be selected showControls={true} // False hides prev/next buttons. Default: False showEventIndicators={true} // False hides event indicators. Default:False startDate={'2015-08-01'} // The first month that will display. Default: current month titleFormat={'MMMM YYYY'} // Format for displaying current month. Default: 'MMMM YYYY' today={'2017-05-16'} // Defaults to today weekStart={1} // Day on which week starts 0 - Sunday, 1 - Monday, 2 - Tuesday, etc, Default: 1 /> ``` ## Available custom styles There are a number of pre-defined styles in the calendar. Below, we will give an example of how each of them can be changed depending on your use case. ### calendarContainer `calendarContainer` changes the background of the calendar. ```js const Schedule = () => { const customStyle = { calendarContainer: { backgroundColor: 'blue', }, } return } ``` ![calendarContainer](images/calendarContainer.png) ### calendarControls `calendarControls` changes only the bar on the top that contains the month and year by default, but can also contain controls for changing the month. ```js const Schedule = () => { const customStyle = { calendarControls: { backgroundColor: 'blue', }, } return } ``` ![calendarControls](images/calendarControls.png) ### calendarHeading `calendarHeading` changes the bar that contains the days of the week. ```js const Schedule = () => { const customStyle = { calendarHeading: { backgroundColor: 'blue', }, } return } ``` ![calendarHeading](images/calendarHeading.png) ### controlButton `controlButton` shows the next and previous buttons that allow you to change the current month. The `showControls` prop must be passed through to `` in order for this style to take effect. ```js const Schedule = () => { const customStyle = { controlButton: { backgroundColor: 'blue', }, } return ( ) } ``` ![controlButton](images/controlButton.png) ### controlButtonText `controlButtonText` applies styles to the text that is rendered when the `showControls` prop is `true`. The text can also be changed using the `prevButtonText` and `nextButtonText` props. ```js const Schedule = () => { const customStyle = { controlButtonText: { color: 'blue', }, } return ( ) } ``` ![controlButtonText](images/controlButtonText.png) ### currentDayCircle `currentDayCircle` changes the style of the background behind the currently-selected day *when the currently-selected day is today*. ```js const Schedule = () => { const customStyle = { currentDayCircle: { backgroundColor: 'blue', }, } return } ``` ![currentDayCircle](images/currentDayCircle.png) ### currentDayText `currentDayText` changes the style of the current day (defaults to `red`) to differentiate it from other days. ```js const Schedule = () => { const customStyle = { currentDayText: { color: 'blue', }, } return } ``` ![currentDayText](images/currentDayText.png) ### day `day` changes the text of every day other than today and weekend days. ```js const Schedule = () => { const customStyle = { day: { color: 'blue', }, } return } ``` ![day](images/day.png) ### dayButton `dayButton` changes the background behind all valid days. ```js const Schedule = () => { const customStyle = { dayButton: { backgroundColor: 'blue', }, } return } ``` ![dayButton](images/dayButton.png) ### dayButtonFiller `dayButtonFiller` styles the background behind all invalid days. ```js const Schedule = () => { const customStyle = { dayButtonFiller: { backgroundColor: 'blue', }, } return } ``` ![dayButtonFiller](images/dayButtonFiller.png) ### dayCircleFiller `dayCircleFiller` styles a circle around all days other than the active day. ```js const Schedule = () => { const customStyle = { dayCircleFiller: { backgroundColor: 'blue', }, } return } ``` ![dayCircleFiller](images/dayCircleFiller.png) ### dayHeading `dayHeading` styles the text for non-weekend days in the day of the week bar. ```js const Schedule = () => { const customStyle = { dayHeading: { color: 'blue', }, } return ( ) } ``` ![dayHeading](images/dayHeading.png) ### eventIndicator `eventIndicator` styles the event indicator bubble for days that have events. Must pass either an `events` array or `eventDates` array and have `showEventIndicators` passed as `true` for the event indicators to display. ```js const Schedule = () => { const customStyle = { eventIndicator: { backgroundColor: 'blue', width: 10, height: 10, }, } return ( ) } ``` ![eventIndicator](images/eventIndicator.png) ### eventIndicatorFiller `eventIndicatorFiller` styles the event indicator space for days that do not have events. Must pass `showEventIndicators` as `true` for the event indicators to display. ```js const Schedule = () => { const customStyle = { eventIndicatorFiller: { backgroundColor: 'blue', width: 10, height: 10, }, } return ( ) } ``` ![eventIndicatorFiller](images/eventIndicatorFiller.png) ### hasEventCircle `hasEventCircle` styles the circle around the days that have events associated with them. Must pass either an `events` array or `eventDates` array and have `showEventIndicators` passed as `true` for the event indicators to display. ```js const Schedule = () => { const customStyle = { hasEventCircle: { backgroundColor: 'blue', }, } return ( ) } ``` ![hasEventCircle](images/hasEventCircle.png) ### hasEventDaySelectedCircle `hasEventDaySelectedCircle` styles the circle around the selected day that have events associated with them. Must pass either an `events` array or `eventDates` array and have `showEventIndicators` passed as `true` for the event indicators to display. ```js const Schedule = () => { const customStyle = { hasEventCircle: { backgroundColor: 'blue', }, hasEventDaySelectedCircle: { backgroundColor: 'red', }, } return ( ) } ```

### hasEventText `hasEventText` styles the text of the days that have events associated with them. Must pass either an `events` array or `eventDates` array and have `showEventIndicators` passed as `true` for the event indicators to display. ```js const Schedule = () => { const customStyle = { hasEventText: { backgroundColor: 'blue', }, } return ( ) } ``` ![hasEventText](images/hasEventText.png) ### monthContainer `monthContainer` styles the background behind the month. ```js const Schedule = () => { const customStyle = { monthContainer: { backgroundColor: 'blue', }, } return } ``` ![monthContainer](images/monthContainer.png) ### selectedDayCircle `selectedDayCircle` styles the circle behind any selected day other than today. ```js const Schedule = () => { const customStyle = { selectedDayCircle: { backgroundColor: 'blue', }, } return } ``` ![selectedDayCircle](images/selectedDayCircle.png) ### selectedDayText `selectedDayText` styles the text of the currently-selected day. ```js const Schedule = () => { const customStyle = { selectedDayText: { color: 'blue', }, } return } ``` ![selectedDayText](images/selectedDayText.png) ### title `title` styles the title at the top of the calendar. `titleText` styles text within title. ```js const Schedule = () => { const customStyle = { title: { color: 'blue', }, titleText: { fontSize: 12, }, } return } ``` ![title](images/title.png) ### weekendDayButton `weekendDayButton` styles the weekends background. ```js const Schedule = () => { const customStyle = { weekendDayButton: { backgroundColor: 'red', }, } return } ``` ![weekendDayButton](images/weekendDayButton.png) ### weekendDayText `weekendDayText` styles the text of weekends. ```js const Schedule = () => { const customStyle = { weekendDayText: { color: 'blue', }, } return } ``` ![weekendDayText](images/weekendDayText.png) ### weekendHeading `weekendHeading` styles the text of the weekend heading. ```js const Schedule = () => { const customStyle = { weekendHeading: { color: 'blue', }, } return } ``` ![weekendHeading](images/weekendHeading.png) ### weekRow `weekRow` styles the background of the row associated with each week. ```js const Schedule = () => { const customStyle = { weekRow: { backgroundColor: 'blue', }, } return } ``` ![weekRow](images/weekRow.png) ## TODOS - [ ] Improve swipe feature - [ ] Language support ## DEMO ![Demo gif](images/demo.gif)

	Stars	Issues	Version	Updated	Created
react-day-picker	5,744	34	8.10.1	9 days ago	9 years ago
react-event-calendar			0.3.0	8 years ago	9 years ago
react-native-calendar			0.13.1	7 years ago	9 years ago
react-scheduler-smartdata			0.7.32	6 years ago	7 years ago

react-day-picker vs react-event-calendar vs react-native-calendar vs react-scheduler-smartdata

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past