Navy Penguin Mariachi

    fullcalendar-reactwrapper

    1.0.7 • Public • Published

    fullcalendar-reactwrapper

    A react wrapper component for the the FullCalendar (a javascript event calendar).

    Table of contents

    1. Installation
    2. Building
    3. Basic usage
    4. Examples
    5. License

    Installation

    npm install fullcalendar-reactwrapper --save

    Include fullcalendar-reactwrapper/dist/css/fullcalendar.min.css for styles.

    Building

    Basic usage

    fullcalendar-reactwrapper creates a <FullCalendar/> component. You can use it just like any other React component. For example:

    // import React...
    import React from 'react';
    import ReactDOM from 'react-dom';
     
    // ... and fullcalendar-reactwrapper.
    import FullCalendar from 'fullcalendar-reactwrapper';
     
    class ExampleComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
        events:[
                    {
                        title: 'All Day Event',
                        start: '2017-05-01'
                    },
                    {
                        title: 'Long Event',
                        start: '2017-05-07',
                        end: '2017-05-10'
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2017-05-09T16:00:00'
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2017-05-16T16:00:00'
                    },
                    {
                        title: 'Conference',
                        start: '2017-05-11',
                        end: '2017-05-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2017-05-12T10:30:00',
                        end: '2017-05-12T12:30:00'
                    },
                    {
                        title: 'Birthday Party',
                        start: '2017-05-13T07:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2017-05-28'
                    }
                ],
        }
      }
     
      render() {
        return (
          <div id="example-component">
            <FullCalendar
                 id = "your-custom-ID"
             header = {{
                left: 'prev,next today myCustomButton',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            }}
             defaultDate={'2017-09-12'}
            navLinks{true} // can click day/week names to navigate views
            editable{true}
            eventLimit{true} // allow "more" link when too many events
            events = {this.state.events}
        />
          </div>
        );
      }
    }

    The id property declares the id of the root element for the FullCalendar component. It is optional - if it isn't provided, the FullCalendar component will get a random generated id.

    Examples

    License

    MIT

    Dependencies

    • fullcalendar
    • moment
    • jquery

    Peer dependencies

    • react
    • react-dom

    Install

    npm i fullcalendar-reactwrapper

    DownloadsWeekly Downloads

    655

    Version

    1.0.7

    License

    MIT

    Last publish

    Collaborators

    • sanjeev07