# FullCalendar

Full calendar is Full-sized drag & drop event calendar.

please refer fullCalendar documentation (opens new window) to learn more about plugin

# How to use

step 1

include following css code in the page you want to use inside @section('header_styles') section

<link href="{{ asset('vendors/fullcalendar/css/fullcalendar.css') }}" rel="stylesheet" type="text/css" />

Step 2

include following js code at @section('footer_scripts') section

<script src="{{ asset('vendors/fullcalendar/js/fullcalendar.min.js') }}" type="text/javascript"></script>
 <script src="{{ asset('vendors/moment/js/moment.min.js') }}"  type="text/javascript"></script>

Step 3

write HTML markup for it.


<div id='calendar'></div>

Step 4

now, we need to initialize the plugin

you can place below code inside footer_scripts section or for better management, you can keep in a separate js file and reference that file in the current page.

Note: be sure to place initialization code below plugin js file

    // put your options and callbacks here


we are applying bootstrap theme, to do so add an option themeSystem: 'bootstrap4' i.e. your initialization looks like

    //add bootstrap4 theme
    themeSystem: 'bootstrap4'

Add Events

To show events on full calendar, you need to add them along with fullcalendar initialization ex:

  //add bootstrap4 theme
  themeSystem: 'bootstrap4',
  //add event
        title: 'All Day Event',
        start: TODAY,
        backgroundColor: ('#67C5DF')

which adds an event titled All Day Event to current day.



# more information

We have added many more examples and customization.

you can find code in following pages resources/views/admin/calendar.blade.php and resources/js/pages/calendar.js

# Used In



Last Updated: 2/13/2021, 3:18:10 PM