Full Calendar showing All Day Events

Question

I am using full calendar, the calendar is utilizing Google Calendar API to bring in the events.

I am having an issue with the events displaying as All Day for their time slots when viewed in the agendaWeek and agendaDay. This prevents the user from displaying their events properly and they're having a difficult time identifying where their availability is within the day, or week.

I have confirmed that the events have times from 8am to 10am for example.

Any on ideas? Having a difficult time sorting this one out.

$('#calendar').fullCalendar({
    theme: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    buttonIcons: {
        prev: 'circle-triangle-w',
        next: 'circle-triangle-e'
    },
    <?php if($jsonEvents !='') { ?>
    dayClick: function(date, allDay, jsEvent, view) {
      allday:false;
      var selectDate = "";
      var selectTime = "";
      if(view.name !="month") {
        if(allDay) {
          selectDate = $.fullCalendar.formatDate( date, 'yyyy-MM-dd');
        }
        else {
          selectDate = $.fullCalendar.formatDate( date, 'yyyy-MM-dd');
          selectTime = $.fullCalendar.formatDate( date, 'hh:mm TT');
        }
      }
      else {
        selectDate = $.fullCalendar.formatDate( date, 'yyyy-MM-dd');
      }

      if( selectDate !="") {
        $("#startDate").val(selectDate);
        $('#startDate').datepicker('setValue', selectDate);
        $("#endDate").val(selectDate);
        $('#endDate').datepicker('setValue', selectDate);
      }

      if(selectTime !="")   {
        $("#startTime").val(selectTime);
        $('#startTime').timepicker({'timeFormat': 'h:i A', 'scrollDefaultNow': true , 'forceRoundTime': true }).on('change', function(ev){
          $('#endTime').val(Add30Min($(this).val()));
          $('#endTime').timepicker({'timeFormat': 'h:i A', 'scrollDefaultNow': true , 'forceRoundTime': true, 'minTime': selectTime});
        });
        $("#endTime").val(Add30Min(selectTime));
        $('#endTime').timepicker({'timeFormat': 'h:i A', 'scrollDefaultNow': true , 'forceRoundTime': true, 'minTime': selectTime});
      }
      $("#eventId").val("");
      $("#mainModalHead").text("Add Event");
      $("#hidEditEventId").val("");
      $("#EventModal").modal();
    },


    eventClick: function(calEvent, jsEvent, view) {

      var startDayName = $.fullCalendar.formatDate( calEvent.start, 'ddd');
      var startMonthName = $.fullCalendar.formatDate( calEvent.start, 'MMM dd');
      var startTime = $.fullCalendar.formatDate( calEvent.start, 'hh:mm TT');
      var startDetails = startDayName+", "+startMonthName+", "+startTime;

      var endDayName = $.fullCalendar.formatDate( calEvent.end, 'ddd');
      var endMonthName = $.fullCalendar.formatDate( calEvent.end, 'MMM dd');
      var endTime = $.fullCalendar.formatDate( calEvent.end, 'hh:mm TT');
      var endDetails = endDayName+", "+endMonthName+", "+endTime;

      var eventDetails = startDetails+" - "+endDetails;
      $("#googleEventTitle").text(calEvent.title);
      $("#googleEventBody").text(eventDetails);
      $("#eventId").val(calEvent.id);
      $("#hidEventName").val(calEvent.title);
      $("#hidStartDate").val($.fullCalendar.formatDate( calEvent.start, 'yyyy-MM-dd'));
      $("#hidStartTime").val($.fullCalendar.formatDate( calEvent.start, 'hh:mm TT'));
      $("#hidEndDate").val($.fullCalendar.formatDate( calEvent.end, 'yyyy-MM-dd'));
      $("#hidEndTime").val($.fullCalendar.formatDate( calEvent.end, 'hh:mm TT'));
      $("#eventDelete").attr("disabled", false);
      $("#eventEdit").attr("disabled", false);
      $("#EditDeleteOperationModal").modal();
    },

    <?php } ?>
    weekNumbers : false,
    weekMode : 'fixed',
    editable: false,
    <?php if($jsonEvents !='') { ?>
      events: <?php echo $jsonEvents; ?>,
    <?php } ?>
    timeFormat: 'hh:mm tt',
    eventColor: '#3c8dbc',
    eventTextColor: '#ffffff'
});

Here is the json Event List.

$eventItems = $eventList['items']; //From Google        
$x=0;
$events   = array();
$startDateTime ='';
$endDateTime ='';
$summary = '';
$start = array();
$end = array();

foreach($eventItems as $item) {
    if(isset($item['summary'])) {

         $summary = $item['summary'];

    }
    $start = $item['start'];
    if(isset($start['dateTime'])) { 

        $startDateTime = $start['dateTime'];

    }
    else if(isset($start['date'])) {

        $startDateTime = $start['date'];

    }
    $end = $item['end'];
    if(isset($end['dateTime'])) {

        $endDateTime = $end['dateTime'];

    }
    else if(isset($end['date'])) {

        $endDateTime = $end['date'];

    }

    $events[$x]['id']               = $item['id'];          
    $events[$x]['title']            = $summary;
    $events[$x]['start']            = $startDateTime;
    $events[$x]['end']              = $endDateTime;
    $events[$x]['allDay']           = true;
    $events[$x]['backgroundColor']  = '#0092D0';
    $x++;
}
$jsonEvents = json_encode($events);     

}

$jsonEvents returns the following;

string(3742) "[{
    "id":"32rsm3h04dsuoikk2r1arfc3m0_20170624T160000Z","title":"Car payment $330.00 28th","start":"2017-06-24T09:00:00-07:00","end":"2017-06-24T10:00:00-07:00","allDay":true,"backgroundColor":"#0092D0"},
}]"

jsonEvents is built like

$eventList  = $cal->events->listEvents(
    'primary',
    array(
        'timeMin' =>''.$pastEvents.'T01:00:00Z',
        'timeMax' =>''.$futureEvents.'T23:59:59Z',
        'singleEvents' => true
    )
);
$eventItems = $eventList['items']; //From Google        
$x=0;
$events   = array();
$startDateTime ='';
$endDateTime ='';
$summary = '';
$start = array();
$end = array();

foreach($eventItems as $item) {
    if(isset($item['summary'])) {

         $summary = $item['summary'];

    }
    $start = $item['start'];
    if(isset($start['dateTime'])) { 

        $startDateTime = $start['dateTime'];

    }
    else if(isset($start['date'])) {

        $startDateTime = $start['date'];

    }
    $end = $item['end'];
    if(isset($end['dateTime'])) {

        $endDateTime = $end['dateTime'];

    }
    else if(isset($end['date'])) {

        $endDateTime = $end['date'];

    }

    $events[$x]['id']               = $item['id'];          
    $events[$x]['title']            = $summary;
    $events[$x]['start']            = $startDateTime;
    $events[$x]['end']              = $endDateTime;
    $events[$x]['allDay']           = true;
    $events[$x]['backgroundColor']  = '#0092D0';
    $x++;
}
$jsonEvents = json_encode($events);     

}

Answer 1

I found the issue about allDay.

There is a conflict between your use of start / end and allDay.

From the documentation:

If all else fails, FullCalendar will try to guess. If either the start or end value has a "T" as part of the ISO8601 date string, allDay will become false. Otherwise, it will be true.

Seems like "forcing" it to true when FullCalendar tries to overide it to false is causing that issue.

Maybe that could be reported as a bug... Since there is no error thrown.
Having at least an error would help.
I suggest you submit a bug report and see their answer about it. ;)

---

But for now, your json generation looks perfect. Your issue is the data.
When you use ISO 8601 strings as start / end, do not set all day to true.

OR set it to true, but only provide a start date... And date only, no time.
Having allDay to true make the end superflous... don't provide it.

Here is a CodePen I used to nail this out.