显示全天活动的完整日历

时间:2017-09-03 04:45:07

标签: php jquery calendar fullcalendar

我使用的是完整日历,日历正在使用Google Calendar API引入活动。

我在WebRequest.DefaultWebProxy.Credentials = CredentialCache.DefaultNetworkCredentials; HttpClientHandler handler = new HttpClientHandler() { UseCookies = true, CookieContainer = new System.Net.CookieContainer() }; HttpClient client = new HttpClient(handler); var byteArray = Encoding.UTF8.GetBytes(USER + ":" + PASS); client.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray)); var content = new FormUrlEncodedContent(new Dictionary<string, string> { { "field1", "value1" }, { "field2", "value2" } }); Console.WriteLine("Sending request"); var response = await client.PostAsync(HTTP_URL, content); var responseString = await response.Content.ReadAsStringAsync(); Console.WriteLine("Server response (" + response.StatusCode + "):\n" + responseString); agendaWeek中查看时间段显示为全天的事件时遇到问题。这可以防止用户正确地显示他们的事件,并且他们很难确定他们在一天或一周内的可用性。

我已经确认事件有时间从早上8点到早上10点。

任何想法?很难将这个问题排除在外。

agendaDay

这是json事件列表。

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

}

$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

}

2 个答案:

答案 0 :(得分:6)

我发现了allDay的问题。

您使用start / endallDay之间存在冲突。

来自documentation

  

如果其他所有方法都失败了,FullCalendar会尝试猜测。如果start或end值的“T”作为ISO8601日期字符串的一部分,则allDay将变为false。否则,这将是真的。

当FullCalendar试图将其覆盖到true导致该问题时,似乎将其“强制”为false

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

<小时/> 但是现在,你的json一代看起来很完美。你的问题是数据 当您将ISO 8601字符串用作start / end时,请勿将所有日期设置为true

将其设置为true,但仅提供start日期...仅限日期,没有时间。
allDay设为true会使end超级...不提供它。

以下是CodePen我曾经指出这一点。

答案 1 :(得分:0)

我使用这种格式测试 allDay 有效,但我如何将事件动态更改为 allDay,

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