全日历显示全天事件

Question

我正在使用完整日历，日历正在利用Google Calendar API引入事件。

我在agendaWeek和agendaDay中查看的时间段显示为全天的事件时遇到问题。这可以防止用户正确显示他们的事件，并且很难确定他们的可用性在一天或一周内的可用性。

例如，我已确认事件的时间从早上8点到上午10点。

任何想法？把这个分类出来很困难。

$('#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' 
}); 

这里是json事件列表。

$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返回以下;

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是建立像

$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

，我发现这个问题有关allDay。

您在使用start/end和allDay之间存在冲突。

从documentation：

如果一切都失败了，FullCalendar会尝试猜测。如果开始或结束值中有一个“T”作为ISO8601日期字符串的一部分，则allDay将变为false。否则，这将是事实。

好像“强迫”它true时FullCalendar尝试将其在此改变到false导致这个问题。

也许可能被报告为错误...因为没有错误抛出。
至少有一个错误会有所帮助。
我建议你提交一个错误报告，并看看他们的答案。 ;）

---

但现在，你的json代看起来很完美。你的问题是数据。
当您使用ISO 8601字符串作为 start/ end时，请不要将整天设置为 true。

OR将其设置为true，但只提供一个start日期......和日期而已，没有时间。
让allDay为真使end超级...不提供它。

这是一个CodePen我用来指出这一点。