我使用的是完整日历，该日历使用 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);     

最佳答案

我发现了关于 allDay 的问题。

您对 start/end 和 allDay 的使用存在冲突。

来自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.

当 FullCalendar 试图将其覆盖为 false 时，似乎“强制”它为 true 导致了该问题。

也许可以将其报告为错误...因为没有抛出任何错误。
至少有一个错误会有所帮助。
我建议您提交错误报告并查看他们的回答。 ;)

或将其设置为true，但只提供开始日期...而且只有日期，没有时间。
将 allDay 设置为 true 会使 end 变得多余...不要提供它。

这是一个CodePen我曾经解决过这个问题。

关于php - 显示全天事件的完整日历，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46020353/