joshjhargreaves / React Native Event Calendar
A React-Native iOS style calendar implemented using VirtualizedList.
Stars: ✭ 127
Programming Languages
javascript
184084 projects - #8 most used programming language
flowtype
47 projects
Projects that are alternatives of or similar to React Native Event Calendar
Skcalendarview
SKCalendarView是一个高可控性的日历基础组件，为了提高应用的自由度，默认只提供了日历部分的视图封装，但不涵盖切换月份按钮、年月分显示等非关键性控件，但请不要担心，SKCalendarView为你提供了多样性的API，你可以很轻松的拿到这些信息去展示在你自己的自定义控件中。不仅如此，SKCalendarView还为你封装了公历、农历、节假日以及中国24节气的核心算法，即使你觉得默认的视图并不合胃口，也可以直接快速的利用这套算法创造出一个全新的日历控件。最后，SKCalendarView还提供了一些简单的切换动画，如果你不喜欢它，可以忽略掉，用自己的，这里完全不会受到任何限制。
Stars: ✭ 121 (-4.72%)
Mutual labels: calendar
Angularjs Responsivecalendar
A pure AngularJS responsive calendar directive
Stars: ✭ 114 (-10.24%)
Mutual labels: calendar
Cosmocalendar
📅 CosmoCalendar is a fully customizable calendar with a wide variety of features and displaying modes.
Stars: ✭ 1,547 (+1118.11%)
Mutual labels: calendar
Privacy services manager
A single management utility to administer Location Services, Contacts requests, Accessibility, and iCloud access in Apple's OS X.
Stars: ✭ 115 (-9.45%)
Mutual labels: calendar
Cypress React Selector
⚡️ cypress plugin to locate react elements by component, props and state
Stars: ✭ 121 (-4.72%)
Mutual labels: props
Calendarhtml Javascript
Simple Calendar built with Pure JavaScript (No Libraries) http://iamnitinpatel.com/projects/calendar/
Stars: ✭ 113 (-11.02%)
Mutual labels: calendar
Styled By
Simple and powerful lib to handle styled props in your components
Stars: ✭ 122 (-3.94%)
Mutual labels: props
Compactcalendarview
An android library which provides a compact calendar view much like the one used in google calenders.
Stars: ✭ 1,504 (+1084.25%)
Mutual labels: calendar
Rcalendarpicker
RCalendarPicker A date picker control, Calendar calendar control, select control, calendar, date selection, the clock selection control. 日历控件 ，日历选择控件，日历，日期选择，时钟选择控件
Stars: ✭ 121 (-4.72%)
Mutual labels: calendar
React Workshop
⚒ 🚧 This is a workshop for learning how to build React Applications
Stars: ✭ 114 (-10.24%)
Mutual labels: props
React Numpad
A numpad for number, date and time, built with and for React.
Stars: ✭ 117 (-7.87%)
Mutual labels: calendar
Sms Backup Plus
Backup Android SMS, MMS and call log to Gmail / Gcal / IMAP
Stars: ✭ 1,626 (+1180.31%)
Mutual labels: calendar
Widget
A set of widgets based on jQuery&&javascript. 一套基于jquery或javascript的插件库 ：轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等
Stars: ✭ 1,579 (+1143.31%)
Mutual labels: calendar
React Native Event Calendar
A React Native iOS style calendar implemented using VirtualizedList. This package now incorporates the work of https://github.com/duyluonglc/ who kindly added some featues and improvements.
Demo
Current API
| Property | Type | Description |
|---|---|---|
| onRef | PropTypes.function | Function fired to set the EventCalendar ref |
| events | PropTypes.array | Array of event |
| width | PropTypes.number | Container width |
| format24h | PropTypes.boolean | Use format 24hour or 12hour |
| formatHeader | PropTypes.string | Header date format |
| upperCaseHeader | PropTypes.boolean | Sets date header as uppercase (default false) |
| headerStyle | PropTypes.object | Header style |
| renderEvent | PropTypes.function | Function return a component to render event renderEvent={(event) => <Text>{event.title}</Text>}
|
| eventTapped | PropTypes.function | Function on event press |
| dateChanged | PropTypes.function | Function on date change. Passes new date as a string formatted as 'YYYY-MM-DD' |
| initDate | PropTypes.string | Show initial date (default is today) |
| scrollToFirst | PropTypes.boolean | Scroll to first event of the day (default true) |
| size | PropTypes.number | Number of date will render before and after initDate (default is 30 will render 30 day before initDate and 29 day after initDate) |
| virtualizedListProps | PropTypes.object | Prop pass to virtualizedList |
| start | PropTypes.number | Start time (default 0) |
| end | PropTypes.number | End time (default 24) |
| headerIconLeft | PropTypes.element | If specified, renders this element instead of the default left arrow image |
| headerIconRight | PropTypes.element | If specified, renders this element instead of the default right arrow image |
| _goToDate | (date : string) => void | Requires the reference set using the onRef prop. E.g. ref._goToDate('2017-09-07')
|
EventCalendar can be configured through a styles prop whereby any of the components in the calendar can be styled.
{
container: {
backgroundColor: 'white'
},
event: {
opacity: 0.5
}
}
Event color can be overridden by specifying a color attribute inside the event object. E.g.
{
color: '#F4EFDB',
start: '2017-09-07 00:30:00',
end: '2017-09-07 01:30:00',
title: 'Dr. Mariana Joseph',
summary: '3412 Piedmont Rd NE, GA 3032'
}
Install
npm i --save react-native-events-calendar
Contributing
The example project is configured to use the 'update-to-date' src of your checkout of
react-native-event-calendar. Any changes to the repo can be easily tested by
building and running the example project. The default react-native packager doesn't
easily allow for this setup, so npm run start within the example directory will launch
haul which supports this & symlinks. Make sure haul
is running when running the example project.
Examples
See example dir.
import EventCalendar from 'react-native-events-calendar'
let { width } = Dimensions.get('window')
const events = [
{ start: '2017-09-07 00:30:00', end: '2017-09-07 01:30:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-07 01:30:00', end: '2017-09-07 02:20:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-07 04:10:00', end: '2017-09-07 04:40:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-07 01:05:00', end: '2017-09-07 01:45:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-07 14:30:00', end: '2017-09-07 16:30:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-08 01:20:00', end: '2017-09-08 02:20:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-08 04:10:00', end: '2017-09-08 04:40:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-08 00:45:00', end: '2017-09-08 01:45:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-08 11:30:00', end: '2017-09-08 12:30:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-09 01:30:00', end: '2017-09-09 02:00:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-09 03:10:00', end: '2017-09-09 03:40:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' },
{ start: '2017-09-09 00:10:00', end: '2017-09-09 01:45:00', title: 'Dr. Mariana Joseph', summary: '3412 Piedmont Rd NE, GA 3032' }
]
render () {
return (
<EventCalendar
eventTapped={this._eventTapped.bind(this)}
events={this.state.events}
width={width}
initDate={'2017-09-08'}
/>
)
}
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].