# Fullcalendar

Full-sized drag & drop event calendar

## Usage

### CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

    <link rel="stylesheet" href="/docs/assets/vendor/fullcalendar/dist/fullcalendar.min.css">
    <link rel="stylesheet" href="/docs/assets/vendor/sweetalert2/dist/sweetalert2.min.css">

### JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

    <script src="/docs/assets/vendor/moment/min/moment.min.js"></script>
    <script src="/docs/assets/vendor/fullcalendar/dist/fullcalendar.min.js"></script>
    <script src="/docs/assets/vendor/sweetalert2/dist/sweetalert2.min.js"></script>

## Init

In the JS components folder located in `/docs/assets/js/components` you will find the `fullcalendar.js` file with the init script you need to use in order to make Fullcalendar work.

Use the `events` variable to store the events you want to display in the calendar:

    var events = [
        {
            id: 1,
            title: 'Call with Dave',
            start: '2018-10-18',
            allDay: true,
            className: 'bg-red',
            description: 'Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
        },
        {
            id: 2,
            title: 'Lunch meeting',
            start: '2018-10-21',
            allDay: true,
            className: 'bg-orange',
            description: 'Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
        }
    ]

## Example

##### Calendar

    <div class="card card-calendar">

        <!-- Card header -->
        <div class="card-header">

    <!-- Title -->

    <h5 class="h3 mb-0">Calendar</h5>

        </div>

        <!-- Card body -->
        <div class="card-body p-0">

        <div class="calendar" data-toggle="calendar" id="calendar"></div>

        </div>

    </div>

## Options

### Title

Use the `fullcalendar-title` class on the element you want to inject the calendar current date.

###### Fullcalendar

    <h6 class="fullcalendar-title h2 mb-0">Fullcalendar</h6>

### Controls

Use the following controls and add them next to your calendar to switch between Month, week and day and also navigate through different periods of time with the Next/Prev buttons.

Month Week Day

    <a href="#" class="fullcalendar-btn-prev btn btn-sm btn-info">
        <i class="fas fa-angle-left"></i>
    </a>
    <a href="#" class="fullcalendar-btn-next btn btn-sm btn-info">
        <i class="fas fa-angle-right"></i>
    </a>

    <a href="#" class="btn btn-sm btn-info" data-calendar-view="month">Month</a>
    <a href="#" class="btn btn-sm btn-info" data-calendar-view="basicWeek">Week</a>
    <a href="#" class="btn btn-sm btn-info" data-calendar-view="basicDay">Day</a>

### Actions

If you want to add create/edit functionality to your calendar you will need to include the modals corresponding to that action.

Event title
Status color
Event title
Status color
Description

    <!-- Create calendar event -->
    <!--* Modal header *-->

    <!--* Modal body *-->

    <!--* Modal footer *-->

    <!--* Modal init *-->
    <div class="modal fade" id="new-event" tabindex="-1" role="dialog" aria-labelledby="new-event-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <!-- Modal body -->
                <div class="modal-body">

    <form class="new-event--form">
        <div class="form-group">
            <label class="form-control-label">Event title</label>
            <input type="text" class="form-control form-control-alternative new-event--title" placeholder="Event Title">
        </div>
        <div class="form-group mb-0">
            <label class="form-control-label d-block mb-3">Status color</label>
            <div class="btn-group btn-group-toggle btn-group-colors event-tag" data-toggle="buttons">
                <label class="btn bg-info active"><input type="radio" name="event-tag" value="bg-info" autocomplete="off" checked></label>
                <label class="btn bg-warning"><input type="radio" name="event-tag" value="bg-warning" autocomplete="off"></label>
                <label class="btn bg-danger"><input type="radio" name="event-tag" value="bg-danger" autocomplete="off"></label>
                <label class="btn bg-success"><input type="radio" name="event-tag" value="bg-success" autocomplete="off"></label>
                <label class="btn bg-default"><input type="radio" name="event-tag" value="bg-default" autocomplete="off"></label>
                <label class="btn bg-primary"><input type="radio" name="event-tag" value="bg-primary" autocomplete="off"></label>
            </div>
        </div>
        <input type="hidden" class="new-event--start" />
        <input type="hidden" class="new-event--end" />
    </form>

                </div>

                <!-- Modal footer -->
                <div class="modal-footer">

    <button type="submit" class="btn btn-primary new-event--add">Add event</button>
    <button type="button" class="btn btn-link ml-auto" data-dismiss="modal">Close</button>

                </div>

            </div>
        </div>
    </div>

    <!-- Edit calendar event -->
    <!--* Modal body *-->

    <!--* Modal footer *-->

    <!--* Modal init *-->
    <div class="modal fade" id="edit-event" tabindex="-1" role="dialog" aria-labelledby="edit-event-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <!-- Modal body -->
                <div class="modal-body">

    <form class="edit-event--form">
        <div class="form-group">
            <label class="form-control-label">Event title</label>
            <input type="text" class="form-control form-control-alternative edit-event--title" placeholder="Event Title">
        </div>

        <div class="form-group">
            <label class="form-control-label d-block mb-3">Status color</label>
            <div class="btn-group btn-group-toggle btn-group-colors event-tag mb-0" data-toggle="buttons">
                <label class="btn bg-info active"><input type="radio" name="event-tag" value="bg-info" autocomplete="off" checked></label>
                <label class="btn bg-warning"><input type="radio" name="event-tag" value="bg-warning" autocomplete="off"></label>
                <label class="btn bg-danger"><input type="radio" name="event-tag" value="bg-danger" autocomplete="off"></label>
                <label class="btn bg-success"><input type="radio" name="event-tag" value="bg-success" autocomplete="off"></label>
                <label class="btn bg-default"><input type="radio" name="event-tag" value="bg-default" autocomplete="off"></label>
                <label class="btn bg-primary"><input type="radio" name="event-tag" value="bg-primary" autocomplete="off"></label>
            </div>
        </div>

        <div class="form-group">
            <label class="form-control-label">Description</label>
            <textarea class="form-control form-control-alternative edit-event--description textarea-autosize" placeholder="Event Desctiption"></textarea>
            <i class="form-group--bar"></i>
        </div>

        <input type="hidden" class="edit-event--id">
    </form>

                </div>

                <!-- Modal footer -->
                <div class="modal-footer">

    <button class="btn btn-primary" data-calendar="update">Update</button>
    <button class="btn btn-danger" data-calendar="delete">Delete</button>
    <button class="btn btn-link ml-auto" data-dismiss="modal">Close</button>

                </div>

            </div>
        </div>
    </div>