maggialejandro / React Native Calendario
Licence: mit
📆 React Native Calendar
Stars: ✭ 234
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Native Calendario
Vue Mobile Calendar
a vue component of calendar for mobile移动端vue日期选择组件
Stars: ✭ 194 (-17.09%)
Mutual labels: calendar
Datepicker
Get a date with JavaScript! A datepicker with no dependencies.
Stars: ✭ 212 (-9.4%)
Mutual labels: calendar
Calendarview
A highly customizable calendar library for Android, powered by RecyclerView.
Stars: ✭ 2,862 (+1123.08%)
Mutual labels: calendar
Ember Power Calendar
Powerful and customizable calendar component for Ember
Stars: ✭ 200 (-14.53%)
Mutual labels: calendar
Customizablecalendar
CustomizableCalendar is a library that allows you to create your calendar, customizing UI and behaviour
Stars: ✭ 214 (-8.55%)
Mutual labels: calendar
Aaf Easydiary
📘 A diary application optimized for user experience.
Stars: ✭ 216 (-7.69%)
Mutual labels: calendar
Jbcalendardatepicker
A replacement for UIDatePicker made for Catalyst.
Stars: ✭ 203 (-13.25%)
Mutual labels: calendar
Kalendar
Full featured, responsive, lightweight calendar in the browser.
Stars: ✭ 213 (-8.97%)
Mutual labels: calendar
Mxlcalendarmanager
A set of classes used to parse and handle iCalendar (.ICS) files
Stars: ✭ 198 (-15.38%)
Mutual labels: calendar
React Native Add Calendar Event
Create, view or edit events in react native using the standard iOS / Android dialogs
Stars: ✭ 225 (-3.85%)
Mutual labels: calendar
Icalendar Generator
Generate calendars in the iCalendar format
Stars: ✭ 193 (-17.52%)
Mutual labels: calendar
Cornercal
A simple, clean calendar and clock app for macOS.
Stars: ✭ 213 (-8.97%)
Mutual labels: calendar
Ipoli Android
Fun & Motivational Todo List with Calendar for Android written in Kotlin. Using Redux, coroutines, Firebase and Clean Architecture.
Stars: ✭ 234 (+0%)
Mutual labels: calendar
Elegantcalendar
The elegant full screen calendar missed in SwiftUI.
Stars: ✭ 224 (-4.27%)
Mutual labels: calendar
Simple Calendar
A simple calendar with events, customizable widgets and no ads.
Stars: ✭ 2,696 (+1052.14%)
Mutual labels: calendar
React Native Calendar 📆
Installation
npm install react-native-calendario --save
Using yarn
yarn add react-native-calendario
Usage
import { Calendar } from 'react-native-calendario';
<Calendar
onChange={(range) => console.log(range)}
minDate={new Date(2018, 3, 20)}
startDate={new Date(2018, 3, 30)}
endDate={new Date(2018, 4, 5)}
theme={{
activeDayColor: {},
monthTitleTextStyle: {
color: '#6d95da',
fontWeight: '300',
fontSize: 16,
},
emptyMonthContainerStyle: {},
emptyMonthTextStyle: {
fontWeight: '200',
},
weekColumnsContainerStyle: {},
weekColumnStyle: {
paddingVertical: 10,
},
weekColumnTextStyle: {
color: '#b6c1cd',
fontSize: 13,
},
nonTouchableDayContainerStyle: {},
nonTouchableDayTextStyle: {},
startDateContainerStyle: {},
endDateContainerStyle: {},
dayContainerStyle: {},
dayTextStyle: {
color: '#2d4150',
fontWeight: '200',
fontSize: 15,
},
dayOutOfRangeContainerStyle: {},
dayOutOfRangeTextStyle: {},
todayContainerStyle: {},
todayTextStyle: {
color: '#6d95da',
},
activeDayContainerStyle: {
backgroundColor: '#6d95da',
},
activeDayTextStyle: {
color: 'white',
},
nonTouchableLastMonthDayTextStyle: {},
}}
/>
API
Prop | Description | Required? | Default | Type |
---|---|---|---|---|
onChange |
Callback called when a day is pressed. | yes | Function | |
minDate |
Minimum date that can be selected. | no | null | Date |
maxDate |
Maximum date that can be selected. | no | null | Date |
startDate |
Selected start date | no | null | Date |
endDate |
Selected end date | requires startDate | null | Date |
theme |
Calendar StyleSheet | no | null | ThemeType |
locale |
Calendar language | es, en, fr, br | 'en' | LocaleType |
showWeekdays |
Show Week columns | no | true | boolean |
showMonthTitle |
Show Month title | no | true | boolean |
initialListSize |
FlatList initialNumToRender | no | 2 | number |
startingMonth |
First month to render | no | current month | 'YYYY-MM-DD' |
numberOfMonths |
Number of months to render | no | 12 | number |
disableRange |
Turn off range date selection | no | false | boolean |
firstDayMonday |
Monday as first day of the week | no | false | boolean |
monthHeight |
Change Month row height | no | 370 | number |
disabledDays |
Disabled days | no | null | {[string]: any } |
renderDayContent |
Render custom Day content | no | null | Function |
extraData |
FlatList extraData | no | null | any |
viewableItemsChanged |
handleViewableItemsChange callback | no | null | Function |
disableOffsetDays |
Remove offset Days. | no | false | boolean |
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].