title: fullcalendar event info in modal popup
body: <p>I am working on fullCalendar and attempting to get the event info to show in a popup modal (when the event is clicked on). </p>
  
  <p>However I can only get the event title, location, start date and end date showing.</p>
  
  <p>I also need the start time and end time showing. What am I doing wrong?</p>
  
  <p>My code is below:</p>
  
  <pre><code>eventClick:  function(event, jsEvent, view) {
      var startdate= new Date(event.event.start);
      var enddate= new Date(event.event.end);
      var starttime= new Date(event.event.startTime);
      var endtime= new Date(event.event.endTime);
      //console.log(event);
      $('#modalID').html(event.event.id);
      $('#modalTitle').html(event.event.title);
      $('#modalLocation').html(event.event.extendedProps.location);
      $('#modalStartDate').html(moment(startdate.getTime()).format("DD-MM-YYYY"));
      $('#modalStartTime').html(moment(starttime.getTime()).format("hh:mm A"));
  
      //moment("01:15:00 PM", "h:mm:ss A").format("HH:mm:ss")
  
      $('#modalEndDate').html(moment(enddate.getTime()).format("DD-MM-YYYY"));
      $('#modalEndTime').html(moment(endtime.getTime()).format("hh:mm A"));
      $('#fullCalModal').modal();
  },
  </code></pre>
  
  <p>My updated code is below</p>
  
  <pre><code> &lt;script&gt;
  
   document.addEventListener('DOMContentLoaded', function() {
   var calendarEl = document.getElementById('calendar');
  
   var calendar = new FullCalendar.Calendar(calendarEl, {
  
   plugins: [ 'interaction', 'dayGrid' ],
   defaultDate: '&lt;cms:date format='Y-m-d' /&gt;',
   editable: true,
   eventLimit: true, // allow "more" link when too many events
   displayEventTime: false,
  
   events: [
   &lt;cms:pages masterpage='events.php' show_future_entries='1'&gt;
      {
   id: &lt;cms:escape_json&gt;&lt;cms:show k_page_id /&gt;&lt;/cms:escape_json&gt;, 
   title: &lt;cms:escape_json&gt;&lt;cms:show k_page_title /&gt;&lt;/cms:escape_json&gt;,
   location: &lt;cms:escape_json&gt;&lt;cms:show location /&gt;&lt;/cms:escape_json&gt;,
   start: &lt;cms:escape_json&gt;&lt;cms:show start_date /&gt;&lt;/cms:escape_json&gt;,
   startTime: &lt;cms:escape_json&gt;&lt;cms:show start_time /&gt;&lt;/cms:escape_json&gt;,
   end: &lt;cms:escape_json&gt;&lt;cms:show end_date /&gt;&lt;/cms:escape_json&gt;,
   endTime: &lt;cms:escape_json&gt;&lt;cms:show end_time /&gt;&lt;/cms:escape_json&gt;
  }&lt;cms:if "&lt;cms:not k_paginated_bottom/&gt;"&gt;,&lt;/cms:if&gt;
  &lt;/cms:pages&gt;
  ],
  eventClick: function(info) {
  
  var dateSettings = { "year": "numeric", "month": "2-digit", "day": "2-digit" 
  };
  var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false 
  };
  
  var startdate = calendar.formatDate(info.event.start,  dateSettings);
  var startTime = calendar.formatDate(info.event.start,  timeSettings);
  
  var enddate = calendar.formatDate(info.event.end || startdate, 
  dateSettings);
  var endTime = calendar.formatDate(info.event.end, timeSettings);
  
  $('#modalID').html(info.event.id);
  $('#modalTitle').html(info.event.title);
  $('#modalLocation').html(info.event.extendedProps.location);
  $('#modalStartDate').html(startdate);
  $('#modalStartTime').html(startTime);
  $('#modalEndDate').html(enddate);
  $('#modalEndTime').html(endTime);
  $('#fullCalModal').modal();
  },
  
  eventTextColor: '#FFFFFF',
  
  });
  
  calendar.render();
  });
  
  &lt;/script&gt;
  </code></pre>