【问题标题】:Fullcalendar end date wrong by one day日历结束日期错了一天
【发布时间】:2015-02-09 00:06:13
【问题描述】:

我正在制作一个完整的日历支持的汽车预订功能。 这是咖啡脚本文件。

    updateEvent = (event, delta, revertFunc) ->
      $.ajax
        type: "PUT"
        dataType: "json"
        success: (data) ->
            alert "Success"
        error: (data) ->
            revertFunc()
            errors = data.responseJSON.reservations[0][1]
            for message of errors
                alert errors[message]
        url: event.updateUrl
        data:
          reservation:
            reservation_start: event.start.format('DD-MM-YYYY')
            reservation_end: event.end.format('DD-MM-YYYY')
            transport_id: event.transport_id
            user_id: event.user_id

$(document).ready ->
  $(".calendar").fullCalendar
    events: gon.path
    eventDrop: updateEvent
    eventResize: updateEvent

这是带有事件的 JSON 提要。

[{"start":"2014-12-17T00:00:00.000Z","end":"2014-12-21T00:00:00.000Z","title":"Cassio Godinho","url":"/reservas/44/edit","allDay":true,"editable":true,"updateUrl":"/reservation/44","transport_id":1,"user_id":1}]

end 的日期是 2014-12-21,但这是我在日历上的日期

文档说明了这一点(我认为):

endParam
It is the moment immediately after the event has ended. For example, if the last full day of an event is Thursday, the exclusive end of the event will be 00:00:00 on Friday!

但我不太确定如何处理这些信息...

【问题讨论】:

    标签: javascript fullcalendar


    【解决方案1】:

    问题

    完整日历会将以 00:00:00 结束的全天事件处理为在预期结果之前完成。 就我而言,客户希望所有内容都显示为全天事件,而不显示时间。

    解决方案

    • 首先,我按照建议添加了 nextDayThreshold: '00:00' 选项 更多。阅读此内容后,allDay 事件会忽略此变量。

    • 接下来我检查了一个事件是否跨越了多天,如果它 确实,我为此设置了 allDay: false。

    • 最后我在日历中添加了 displayEventTime: false。

    这似乎是一个完整的解决方案,无需修改原始日期数据。

        $string .= "{ 
            id: ".$event['ID'].", 
            title: '".str_replace('\'', '"', $event['Name'])."', 
            start: new Date('".(substr($event['Start_Date'], 0, 4) != '0000' ? date('Y-m-d\TH:i:s', strtotime($event['Start_Date'])) : date('Y-m-d', strtotime('- 1 year')))."'), 
            allDay:".(date('Y-m-d', strtotime($event['Start_Date'])) == date('Y-m-d', strtotime($event['End_Date'])) ? 'true' : 'false').", 
            end: new Date('".(substr($event['End_Date'], 0, 4) != '0000' ? date('Y-m-d\TH:i:s', strtotime($event['End_Date'])) : date('Y-m-d', strtotime('- 1 year')))."'), 
            className: '$class' 
        },";
    

    【讨论】:

      【解决方案2】:

      在 Angular 中 当结束日期时间大于 23:59:59 时,将结束日期时间更改为当前时间 `

      this.calendarOptions = {
        editable: false,
        eventLimit: false,
        validRange: {
          start: '',
          end: new Date(new Date().getUTCFullYear(), new Date().getUTCMonth())
        },
        header: {
          left: '',
          center: 'title',
          right: 'prev,next'
        },
        eventSources: [
      
          // your event source
          {
            events: (start, end, timezone, callback) => {
      
              var data = [];
      
      
              data.push(new Date("2019-04-11T00:19:02"))
              data.push(new Date("2019-04-12T00:19:02"))
              data.push(new Date("2019-04-13T00:19:02"))
      
              var eventData = [];
      
              var calendarEvents: CalendarEvents = new CalendarEvents();
              calendarEvents.start = data[0];
      
              //Change end time, because of when end date time is greator than 23:59:59 then end date not marked
              var m = moment(data[data.length - 1], 'ddd MMM D YYYY HH:mm:ss ZZ');
              m.set({ h: new Date().getHours() });
              calendarEvents.end = m.toDate();
      
              calendarEvents.allDay = false;
              eventData.push(calendarEvents);
      
              callback(eventData);
            },
            color: '#f99500',   // an option!
            textColor: 'black', // an option!
            // displayEventTime: false,
          }
          // any other sources...
      
        ],
        timeFormat: 'HH:mm'
      };
      

      `

      【讨论】:

        【解决方案3】:

        你需要设置 nextDayThreshold: '00:00' 会显示最后一天!

        【讨论】:

        【解决方案4】:

        我也面临同样的问题,并通过将"T23:59:00" 添加到结束日期来解决它,即"end" => $end_date."T23:59:00"

        【讨论】:

        • 但是当它被附加时,事件的大小是不可调整的。
        【解决方案5】:

        我不知道它是否仍然有用,但您可以使用此方法,在结束日期中添加一天:

        $date = new DateTime('2000-01-01');
        $date->add(new DateInterval('P0Y0M1DT0H0M0S'));
        

        这会将您的结束日期增加一天。

        【讨论】:

        • $date = new DateTime('2000-01-01'); $date->modify('+1 day'); 不是更易读吗?
        【解决方案6】:

        我有同样的问题,我终于想通了。

        我使用的是全天 TRUE,根据文档,如果您使用全天 true,它会及时运行。

        首先,我将 full day 更改为 FALSE,然后

        在我的最后一天,我添加了 $endDate."T23:59:00";

        这对我有用。

        【讨论】:

        【解决方案7】:

        最好的部分是将 20:00:00 附加到结束日期,如下所示:

        var ed = $("endDate").val();
        newVar = ed+" 20:00:00";
        

        这就是你所需要的。

        【讨论】:

          【解决方案8】:

          通过设置事件的开始和结束时间“修复”了问题。

          【讨论】:

          • 啊?你能解释一下你到底做了什么吗?
          • 是的,请详细说明 - 我目前正在设置开始和结束,但遇到了这个问题。
          • 您还能在月视图中调整事件的大小吗?
          【解决方案9】:

          我遇到了同样的问题,但我尝试了时间,这就是解决方案:)

          2014-12-21T00:00:00 => 2014-12-21T23:59:00 这将解决您的问题。

          【讨论】:

          • 这几乎是正确的,但并不完全正确:文档指出 endParam 是“立即”结束的时刻,因此您排除了额外的一分钟左右。
          • 我在结束日期中添加了时间,但随后事件在月视图中不再可调整。
          【解决方案10】:

          如果您将结束日期设置为 2014 年 12 月 21 日的 0 小时、分钟、秒等,则当天没有时间显示活动。

          您可能需要将结束日期提前到第二天的 0 小时,因为您将活动设置为全天活动,但是您也可以将时间提前任意数量(例如一小时),以便该事件在所需的结束日期内,然后是它应该呈现的全天事件。

          如果他们的事件对象包含一个您可以设置的持续时间参数会很好,至少我在他们的文档中没有看到。

          【讨论】:

          • 我正在尝试为活动增加一些时间,但效果不佳(当我拖动活动时,它会增加一天的时间)。无论如何,这对我来说似乎不对,因为该事件已经有了allDay: true
          【解决方案11】:

          我认为说明中的关键词是exclusive,因此无论您指定的时间都不会包含在日期范围内。

          因此,在您的情况下,"2014-12-21T00:00:00.000Z" 意味着该事件将不再存在于 12-21 年初。如果您希望活动在 12-21 结束,您需要将结束时间设置为 "2014-12-22T00:00:00.000"(第一个可能的时间在 12-22)。

          【讨论】:

          • 这对使用多天全天事件的人不利,因为添加时间会阻止人们在月视图中调整事件大小。如果有一个垫片可以强制多天的全天事件渲染到结束日期,那就太好了。由于结束日期始终设置为比视觉显示的时间长一天,因此调整这些事件的大小也需要修复。
          • 也就是说,我增加了日期。很好,fullcalendar 还没有提供任何修复程序吗?有没有办法也包括结束日?
          • 很好的解释,但绝不会帮助人们解决这个问题。您能否参考一些文档并构建解决方案?
          • 此外,在我看来,人们最好的解决方案是更新他们的视图逻辑(或其他逻辑)以处理似乎是 +1 天的结束日期。有关详细信息,请参阅github.com/fullcalendar/fullcalendar/issues/3679
          猜你喜欢
          • 2018-09-18
          • 1970-01-01
          • 2019-05-21
          • 2019-10-20
          • 1970-01-01
          • 1970-01-01
          • 2020-05-09
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多