dongliling6336 2017-09-02 20:45
浏览 67
已采纳

显示全天活动的完整日历

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);     

}

展开全部

  • 写回答

1条回答 默认 最新

  • dongzouqie4220 2017-09-11 12:51
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部