# Calendar

## How to use

Open with codepen

##### FullCalendar

We are using the FullCalendar plugin for this calendar app. This is a great plugin for displaying events with details in a tooltip. You can change an event's name or other associated data and add a new event. It is up to you to add this functionality through FullCalendar's event hooks. Check FullCalendar documentation for more details.

    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid' ],
        defaultView: 'dayGridMonth',
        eventRender: function(info) {
          var ntoday = moment().format('YYYYMMDD');
          var eventStart = moment( info.event.start ).format('YYYYMMDD');
          info.el.setAttribute("title", info.event.extendedProps.description);
          info.el.setAttribute("data-toggle", "tooltip");
          if (eventStart < ntoday){
            info.el.classList.add("fc-past-event");
          } else if (eventStart == ntoday){
            info.el.classList.add("fc-current-event");
          } else {
            info.el.classList.add("fc-future-event");
          }
        },

        events: [
          {
            title: 'All Day Event',
            description: 'description for All Day Event',
            start: '2020-01-01'
          }
          // more events here
        ]
      });
      calendar.render();
    });

    <script src="assets/plugins/fullcalendar/core-4.3.1/main.min.js"></script>
    <script src="assets/plugins/fullcalendar/daygrid-4.3.0/main.min.js"></script>
    <script src="assets/app/app.calendar.js"></script>

    <div class="full-calendar">
     <div id="calendar">
      <a href="#" data-toggle="modal" data-target="#modal-add-event" class="btn btn-primary">
       <span class="fc-icon fc-icon-plus-squar></span> Add New Event
      </a>
     </div>
    </div>

    <link href="assets/plugins/fullcalendar/core-4.3.1/main.min.css" rel="stylesheet">
    <link href="assets/plugins/fullcalendar/daygrid-4.3.0/main.min.css" rel="stylesheet">

##### Add New Event

Title
Date
Time
Description