react-native-calendar

react-native-calendar

A component for React Native

Portrait mode only

Installation

npm install react-native-calendar --save

Usage

``javascript
currentMonth={'2015-08-01'} // Optional date to set the currently displayed month after initialization
customStyle={{day: {fontSize: 15, textAlign: 'center'}}} // Customize any pre-defined styles
dayHeadings={Array} // Default: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
eventDates={['2015-07-01']} // Optional array of moment() parseable dates that will show an event indicator
events={[{date:'2015-07-01', ..}]}// Optional array of event objects with a date property and custom styles for the event indicator
monthNames={Array} // Defaults to english names of months
nextButtonText={'Next'} // Text for next button. Default: 'Next'
onDateSelect={(date) => 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.

$3

calendarContainer changes the background of the calendar.

`js
const Schedule = () => {
const customStyle = {
calendarContainer: {
backgroundColor: 'blue',
},
}
return
}
`

!calendarContainer

$3

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

$3

calendarHeading changes the bar that contains the days of the week.

`js
const Schedule = () => {
const customStyle = {
calendarHeading: {
backgroundColor: 'blue',
},
}
return
}
`

!calendarHeading

$3

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 (
showControls
customStyle={customStyle} />
)
}
`

!controlButton

$3

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 (
showControls
customStyle={customStyle} />
)
}
`

!controlButtonText

$3

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

$3

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

$3

day changes the text of every day other than today and weekend days.

`js
const Schedule = () => {
const customStyle = {
day: {
color: 'blue',
},
}
return
}
`

!day

$3

dayButton changes the background behind all valid days.

`js
const Schedule = () => {
const customStyle = {
dayButton: {
backgroundColor: 'blue',
},
}
return
}
`

!dayButton

$3

dayButtonFiller styles the background behind all invalid days.

`js
const Schedule = () => {
const customStyle = {
dayButtonFiller: {
backgroundColor: 'blue',
},
}
return
}
`

!dayButtonFiller

$3

dayCircleFiller styles a circle around all days other than the active day.

`js
const Schedule = () => {
const customStyle = {
dayCircleFiller: {
backgroundColor: 'blue',
},
}
return
}
`

!dayCircleFiller

$3

dayHeading styles the text for non-weekend days in the day of the week bar.

`js
const Schedule = () => {
const customStyle = {
dayHeading: {
color: 'blue',
},
}
return (
showEventIndicators
customStyle={customStyle} />
)
}
`

!dayHeading

$3

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 (
showEventIndicators
eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}
customStyle={customStyle} />
)
}
`

!eventIndicator

$3

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 (
showEventIndicators
eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}
customStyle={customStyle} />
)
}
`

!eventIndicatorFiller

$3

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 (
showEventIndicators
eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}
customStyle={customStyle} />
)
}
`

!hasEventCircle

$3

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 (
showEventIndicators
eventDates={['2016-12-03', '2016-12-21', '2016-12-22', '2016-12-30']}
customStyle={customStyle} />
)
}
`

$3

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 (
showEventIndicators
eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}
customStyle={customStyle} />
)
}
`

!hasEventText

$3

monthContainer styles the background behind the month.

`js
const Schedule = () => {
const customStyle = {
monthContainer: {
backgroundColor: 'blue',
},
}
return
}
`

!monthContainer

$3

selectedDayCircle styles the circle behind any selected day other than today.

`js
const Schedule = () => {
const customStyle = {
selectedDayCircle: {
backgroundColor: 'blue',
},
}
return
}
`

!selectedDayCircle

$3

selectedDayText styles the text of the currently-selected day.

`js
const Schedule = () => {
const customStyle = {
selectedDayText: {
color: 'blue',
},
}
return
}
`

!selectedDayText

$3

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

$3

weekendDayButton styles the weekends background.

`js
const Schedule = () => {
const customStyle = {
weekendDayButton: {
backgroundColor: 'red',
},
}
return
}
`

!weekendDayButton

$3

weekendDayText styles the text of weekends.

`js
const Schedule = () => {
const customStyle = {
weekendDayText: {
color: 'blue',
},
}
return
}
`

!weekendDayText

$3

weekendHeading styles the text of the weekend heading.

`js
const Schedule = () => {
const customStyle = {
weekendHeading: {
color: 'blue',
},
}
return
}
`

!weekendHeading

$3

weekRow styles the background of the row associated with each week.

`js
const Schedule = () => {
const customStyle = {
weekRow: {
backgroundColor: 'blue',
},
}
return
}
``

!weekRow

TODOS

- [ ] Improve swipe feature
- [ ] Language support

DEMO

!Demo gif