react-native-schedule
v1.0.1
Published
A react native component that provides a time-sensitive schedule view.
Downloads
5
Readme
React Native Schedule View
This React Native component provides a scheduling view with space for unused time. Similar to Google Calendar's Day View.
Installing
Installing is pretty simple:
npm install rnschedule
OR
yarn add rnschedule
Example
import React from 'react';
import RNSchedule from 'rnschedule';
const data = [
{
title: 'Lunch Appointment',
subtitle: 'With Harry',
start: new Date(2018, 11, 2, 13, 20),
end: new Date(2018, 11, 2, 14, 20),
color: '#390099',
}
]
const App = () =>
<RNSchedule
dataArray={data}
onEventPress={(appt) => console.log(appt)}
/>
export default App
Demo
Features
- Moving "now" bar.
- Initial loads view on today centered on "now."
- Customizable appointment colors.
- Scaled size of an hour to improve readability on various device sizes.
- Adjustable hour sizing to make it size to whatever you want.
Properties API
None of the following properties are required. A simple Will still render an empty schedule.
| Prop | Description | Default | Type |
|---|---|---|---|
|hourSize
|Change the width of lines between hours.|depends on screen size
| Number |
|headerColor
|Background color of the calendar header strip. Acceptable formats: Hex, RGB(A), HSL(A), HSV(A), and named strings. See Tinycolor for all formats.|#F5F5F6
| String or Object |
|dataArray
|Array of date appointment objects. See below example.|Empty Array
| Array |
|leftIcon
|Include your own icon to the left of the day number.|Null
| React Component |
|accentColor
|Color of day circle in top left. Accepts Tinycolor formats.|#1976d2
| String or Object |
|status_bar
|Do you want extra margin for the status bar for iOS?|true
| Boolean |
|onEventPress
|Return function for pressing a schedule event. Returns original data.|null
| Function |
Data Array Appt Objects
The dataArray prop must be an Array of appointment objects with the following format.
[
{
title: 'Lunch Appointment',
subtitle: 'With Harry',
start: new Date(2018, 11, 2, 13, 20),
end: new Date(2018, 11, 2, 14, 20),
color: '#390099'
}
]
Appt Object API
| Key | Description | Type | Req |
|---|---|---|---|
|title
|Top title for the appointment.| String |Required
|
|subtitle
|Slightly less bolded subtitle.| String |Not Required
|
|start
|When the appointment starts.| Date |Required
|
|end
|When the appointment ends.| Date |Required
|
|color
|Background color for the appointment.| Tinycolor Accepted String/Object |Not Required
|
For onEventPress function - additional properties may be passed so long as they don't interfere with the above api.
Built With
- React Native Calendars (Wix) - Day selection
- Tinycolor - Smart Color Management
- Moment - Date/Time manipulation
- React Native Collapsible - Calendar drop down
Thanks to these wonderful people for making some great stuff.
Contributing
I'm looking to add new contributors/maintainers to help out. So if you like this repo and want to help make it better let me know.
To-Do List
The component is very much under-construction. Want to help build something? Here is my to-do list:
- Provide more control over Day Selector Styling.
- Work on speed optimization.
- Swipe to change days.
- Full Day appointments.
- Multi-Day appointments.
- Option for dots on days with appts.
- Events longer than 24 hours.
- Spec UI to Material Design.
- Build out testing.
- Contribution guidelines.
- Break out schedule view as stand-alone without cal select header.
- Fix Shadowing on Header - feels weird.
Special Thanks
- Special thanks to Wix's RN Calendar for getting things started and providing inspiration.