# Fullcalendar

FullCalendar generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine.

Documentation for Fullcalendar

##### Getting Started

First, obtain the standard fullcalendar bundle in one of the following ways:

                  npm install fullcalendar

## Example

                            <div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="36487">0</div>
                            <div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="10">0</div>
                            <div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="856">0</div>
                            <div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="4562">0</div>
                            <div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="5321">0</div>
                            <div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="12356">0</div>

##### How to use?

Copy-paste the following `<script>` near the end of your pages under Muze Javascript Plugins to enable it.

                    <script src="../assets/vendor/fullcalendar/main.min.js"></script>

Copy-paste the following `<link>` near the end of your pages under Muze Plugins CSS to enable it.

                    <link href="../assets/vendor/fullcalendar/main.min.css" rel="stylesheet" type="text/css" media="all">

Copy-paste the init function under JS Plugins Init before the closing `</body>` tag, to enable it.

                    document.addEventListener('DOMContentLoaded', function() {
                      var calendarEl = document.getElementById('calendar');

                      var calendar = new FullCalendar.Calendar(calendarEl, {
                        initialView: 'dayGridMonth',
                        initialDate: '2021-01-07',
                        headerToolbar: {
                          left: 'prev,next today',
                          center: 'title',
                          right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                        },
                        events: [
                          {
                            title: 'All Day Event',
                            start: '2021-01-01'
                          },
                          {
                            title: 'Long Event',
                            start: '2021-01-07',
                            end: '2021-01-10'
                          },
                          {
                            groupId: '999',
                            title: 'Repeating Event',
                            start: '2021-01-09T16:00:00'
                          },
                          {
                            groupId: '999',
                            title: 'Repeating Event',
                            start: '2021-01-16T16:00:00'
                          },
                          {
                            title: 'Conference',
                            start: '2021-01-11',
                            end: '2021-01-13'
                          },
                          {
                            title: 'Meeting',
                            start: '2021-01-12T10:30:00',
                            end: '2021-01-12T12:30:00'
                          },
                          {
                            title: 'Lunch',
                            start: '2021-01-12T12:00:00'
                          },
                          {
                            title: 'Meeting',
                            start: '2021-01-12T14:30:00'
                          },
                          {
                            title: 'Birthday Party',
                            start: '2021-01-13T07:00:00'
                          },
                          {
                            title: 'Click for Google',
                            url: 'http://google.com/',
                            start: '2021-01-28'
                          }
                        ]
                      });

                      calendar.render();
                    });