Narcissistic Project Managers

    @abdullahnasir/fullcalendar

    1.0.0 • Public • Published

    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

    Gif 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

    Install

    npm i @abdullahnasir/fullcalendar

    DownloadsWeekly Downloads

    15

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    352 kB

    Total Files

    128

    Last publish

    Collaborators

    • abdullahnasir