## Calendar

For the event calendar we use the fullcalendar plugin, this is a popular plugin for creating event schedules.

## How to install ?

    <script src="vendors/@fullcalendar/index.global.min.js"></script>

    <!-- Calendar Event -->
    <script>
    const fullcalendars = document.getElementById('calendar');
    if ( fullcalendars != null) {
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var date = new Date();
        var dates = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) + '-' + date.getDate().toString().padStart(2, 0);
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          initialDate: dates,
          headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
          },
          events: [
            {
              title: 'All Day Event',
              start: '2021-10-01'
            },
            {
              title: 'Long Event',
              start: '2021-10-03',
              end: '2021-10-06'
            },
            {
              groupId: '999',
              title: 'Repeating Event',
              start: '2021-10-09T16:00:00'
            },
            {
              groupId: '999',
              title: 'Repeating Event',
              start: '2021-10-16T16:00:00'
            },
            {
              title: 'Conference',
              start: '11',
              end: '2021-10-13'
            },
            {
              title: 'Meeting',
              start: '2021-10-12T10:30:00',
              end: '2021-10-12T12:30:00'
            },
            {
              title: 'Lunch',
              start: '2021-10-12T12:00:00'
            },
            {
              title: 'Meeting',
              start: '2021-10-12T14:30:00'
            },
            {
              title: 'Birthday Party',
              start: '2021-10-20T07:00:00'
            },
            {
              title: 'Evant with link',
              url: 'http://google.com/',
              start: '2021-10-28'
            }
          ]
        });
        calendar.render();

      });
    }
    </script>

Demo config available in `src/js/vendor.js` function `myCalendar();`

Html code

                    <div id="calendar"></div>

For more documentation please check in here https://github.com/fullcalendar/fullcalendar.

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts