Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/christopherdro/react-native-calendar
[DEPRECATED] Calendar Component for React Native
https://github.com/christopherdro/react-native-calendar
Last synced: about 1 month ago
JSON representation
[DEPRECATED] Calendar Component for React Native
- Host: GitHub
- URL: https://github.com/christopherdro/react-native-calendar
- Owner: christopherdro
- License: mit
- Created: 2015-05-18T21:05:16.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-27T00:01:40.000Z (about 7 years ago)
- Last Synced: 2024-11-23T13:37:16.638Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.06 MB
- Stars: 536
- Watchers: 17
- Forks: 244
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- License: License.txt
Awesome Lists containing this project
- awesome-react-native - react-native-calendar ★559 - Calendar Component for React Native (Components / UI)
- awesome-reactnative-ui - react-native-calendar - native-calendar/master/images/demo.gif)| (Others)
- awesome-react-native - react-native-calendar ★559 - Calendar Component for React Native (Components / UI)
- awesome-reactnative-ui - react-native-calendar - native-calendar/master/images/demo.gif)| (Others)
- awesome-react-native - react-native-calendar
- awesome-react-native - react-native-calendar ★559 - Calendar Component for React Native (Components / UI)
- awesome-react-native-ui - react-native-calendar ★339 - Calendar Component for React Native (Components / UI)
- awesome-react-native - react-native-calendar ★559 - Calendar Component for React Native (Components / UI)
- ReactNativeMaterials - react-native-calendar
README
# :warning: Deprecated :warning:
This library is no longer being actively maintained.
Try https://github.com/wix/react-native-calendars
## 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
}
```
### 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
}
```
### calendarHeading
`calendarHeading` changes the bar that contains the days of the week.
```js
const Schedule = () => {
const customStyle = {
calendarHeading: {
backgroundColor: 'blue',
},
}
return
}
```
### 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 (
)
}
```
### 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 (
)
}
```
### 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
}
```
### 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
}
```
### day
`day` changes the text of every day other than today and weekend days.
```js
const Schedule = () => {
const customStyle = {
day: {
color: 'blue',
},
}
return
}
```
### dayButton
`dayButton` changes the background behind all valid days.
```js
const Schedule = () => {
const customStyle = {
dayButton: {
backgroundColor: 'blue',
},
}
return
}
```
### dayButtonFiller
`dayButtonFiller` styles the background behind all invalid days.
```js
const Schedule = () => {
const customStyle = {
dayButtonFiller: {
backgroundColor: 'blue',
},
}
return
}
```
### dayCircleFiller
`dayCircleFiller` styles a circle around all days other than the active day.
```js
const Schedule = () => {
const customStyle = {
dayCircleFiller: {
backgroundColor: 'blue',
},
}
return
}
```
### 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 (
)
}
```
### 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 (
)
}
```
### 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 (
)
}
```
### 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 (
)
}
```
### 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 (
)
}
```
### monthContainer
`monthContainer` styles the background behind the month.
```js
const Schedule = () => {
const customStyle = {
monthContainer: {
backgroundColor: 'blue',
},
}
return
}
```
### selectedDayCircle
`selectedDayCircle` styles the circle behind any selected day other than today.
```js
const Schedule = () => {
const customStyle = {
selectedDayCircle: {
backgroundColor: 'blue',
},
}
return
}
```
### selectedDayText
`selectedDayText` styles the text of the currently-selected day.
```js
const Schedule = () => {
const customStyle = {
selectedDayText: {
color: 'blue',
},
}
return
}
```
### 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
}
```
### weekendDayButton
`weekendDayButton` styles the weekends background.
```js
const Schedule = () => {
const customStyle = {
weekendDayButton: {
backgroundColor: 'red',
},
}
return
}
```
### weekendDayText
`weekendDayText` styles the text of weekends.
```js
const Schedule = () => {
const customStyle = {
weekendDayText: {
color: 'blue',
},
}
return
}
```
### weekendHeading
`weekendHeading` styles the text of the weekend heading.
```js
const Schedule = () => {
const customStyle = {
weekendHeading: {
color: 'blue',
},
}
return
}
```
### weekRow
`weekRow` styles the background of the row associated with each week.
```js
const Schedule = () => {
const customStyle = {
weekRow: {
backgroundColor: 'blue',
},
}
return
}
```
## TODOS
- [ ] Improve swipe feature
- [ ] Language support
## DEMO
