1.0.0 • Published 2 years ago
@abdullahnasir/fullcalendar v1.0.0
React Native Full calendar
This React Native component provides a scheduling view with space for unused time
Example
import React from 'react';
import RNSchedule from 'rnschedule';
const data = [
{
title: 'Lunch',
subtitle: 'With Abdullah',
start: new Date(2018, 11, 2, 13, 20),
end: new Date(2018, 11, 2, 14, 20),
color: '#390099',
}
]
const App = () =>
<Fullcalendar
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',
subtitle: 'With Abdullah',
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 |
1.0.0
2 years ago