全日历结束日期错误一天

问题描述 投票:0回答:14

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

    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 feed。

[{"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
,但这就是我日历上的enter image description here

文档对此做了一些说明(我认为):

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
14个回答
15
投票

我认为说明中的关键词是

exclusive
,所以无论您指定的时间都不会包含在日期范围内。

所以在你的情况下

"2014-12-21T00:00:00.000Z"
意味着该事件在12-21开始时将不再存在。如果您希望活动进行到 12-21,您需要将结束时间设置为
"2014-12-22T00:00:00.000"
(12-22 中第一个可能的时间)。


9
投票

我也遇到了同样的问题,我终于弄清楚了。

我使用的是 full day TRUE,根据文档,如果您使用 full day true,它将及时表现。

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

在我的结束日,我添加了 $endDate."T23:59:00";

这对我有用。


5
投票

您需要设置 nextDayThreshold: '00:00' 它将显示最后一天!


3
投票

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

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

这就是您所需要的。


1
投票

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

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


0
投票

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

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

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


0
投票

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

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

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


0
投票

角度 当结束日期时间大于 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'
};

`


0
投票

问题

完整日历处理以 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' 
    },";

0
投票

我正在使用 Laravel 8。我根据我的国家/地区更改了时区。我开始收到此“全日历结束日期错误一天”错误。所以我在 app.php 中将时区回滚到 UTC,这对我有用!

配置->app.php:

'timezone' => 'UTC',

或尝试:

 var calendar = $('#calendar').fullCalendar({
 timeZone: 'UTC',
 ...

0
投票

我遇到了同样的问题,通过执行以下操作解决了:

  1. 将迁移和数据库上的字段设置为日期时间。
  2. 在数据库输入中输入日期时,格式包括小时和/或分钟(例如:YYYY-MM-DD hh:mm)。
  3. 在日历上将 allDay 设置为 false。

0
投票

让它在我的 Laravel 10 项目上运行。利用惯性

资源类

class EventResource extends JsonResource
{
    public function toArray(Request $request): array
    {
        return [
            'id' => $this->id,
            'start' => $this->start_at->format("Y-m-d\TH:i:s"),
            'end' => $this->end_at->format("Y-m-d\TH:i:s"),
            'allDay' => $this->all_day,
        ];
    }
}

迁移

$table->timestamp('start_at');
$table->timestamp('end_at');

模特演员

protected $casts = [
        'start_at' => 'datetime',
        'end_at' => 'datetime',
    ];

保存在数据库中

 Event::create([
     'start' => Carbon::parse($data['start_at']),
     'end' => Carbon::parse($data['end_at'])->format('Y-m-d').'T23:59:59'
  ]);

控制器

 return Inertia::render('Calendar/Index/Page',[
      'events' => new EventCollection($events)
 ]);

-1
投票

我也面临着同样的问题,并通过在结束日期添加

"T23:59:00"
来解决它,即
"end"
=>
$end_date."T23:59:00"
,


-3
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.