完整的日历显示了整天活动

我正在使用完整日历，日历正在使用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。

之间存在冲突

来自文档：

如果所有其他方法都失败了，FullCalendar将尝试猜测。如果启动值或最终值作为ISO8601日期字符串的一部分具有" t"，则Allday将变为false。否则，这将是正确的。

当FullCalendar试图将其过度对false的过度时，它似乎是"强制"到true。

也许可以报告为错误...因为没有错误。
至少有错误会有所帮助。
我建议您提交一个错误报告，并查看他们的答案。）

但现在，您的JSON生成看起来很完美。您的问题是数据。
当您将ISO 8601字符串用作start/end时，请勿将整天设置为true。

或将其设置为true，但仅提供start日期...和仅日期，没有时间。
让allDay真正使end超流...不要提供它。

这是 codepen 我曾经用来钉一下。

i使用这种格式测试allday工作起来，但是我如何动态地将事件更改为allday，

    {
      title: "simple event",
      start: "2021-06-14 14:00:00",
      end: "2021-06-14 15:00:00",
      allDay : true
    },

相关内容

最新更新

热门标签：