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|