fullcalendarのendが1日少なく表示される

Question

fullcalendarのeventsで、サーバから戻って来たJsonの値を endに設定しているのですが、カレンダーに表示されるendの日にちが想定している日にちと異なります。

サーバが返す値
start: 2015-10-07 09:00:00Z
end:2015-10-09 23:59:59Z

allDayはtrue

カレンダーに表示される期間
2015/10/07 〜 2015/10/8（1日少なく表示される）

allDayがfalseの時は
2015/10/07〜2015/10/9（期待通り）

サーバが返す値を以下のように書き換えてみましたが、
結果は変わりませんでした。
2015-10-09T18:00:00+09:00
2015-10-09T18:00:00.0+0100

allDayがtrueだと、時間が00:00:00と解釈されてしまい、
2015/10/09 でも、前日と判断されてしまうのかな？と思いますが、
回避する方法はありますでしょうか。

よろしくお願いします。

events: function(start, end, timezone, callback) {
     
     $.ajax({
                type: "POST",
                url: url,
                data: JSON.stringify(post_data),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (res) {
                    if (res) {
                        var events = [];
                        for (var cnt in res) {
                            alert(res[cnt].end);
                            events.push({
                                id: res[cnt].p_id,
                                title: res[count].title,
                                allDay:res[cnt].allDay,
                                start: res[cnt].start,
                                end: res[cnt].end
                    });
                });
                callback(events);
            }
        });
    }

Answer 1

調査しきれなかったけど、
日付型で渡すと解消されるようです。

var startDate = new Date(Date.parse( res[cnt].start ));
var endDate = new Date(Date.parse( res[cnt].end ));

events.push({
    id: res[cnt].p_id,
    title: res[cnt].title,
    allDay:res[cnt].allDay,
    start: startDate,
    end: endDate
});

どうもタイムゾーンが関係しているっぽいのですが、
allDay=trueのとき、
文字型でendを設定すると、
2015-10-09 00:00:00(GMT+00:00)
と変換され、
2015-10-07 00:00:00(GMT+00:00)～2015-10-09 00:00:00(GMT+00:00)
で描画するため、ご質問の状況が起こるようです。

Comments

[Misaco]

Data型で渡してみるという発想がありませんでした。。eventResizeでイベントを受け取る時も、同様の現象だったので合わせて確認してみます。週明けにまたソースに触れるので、結果をまたご報告します。ありがとうございました！

[Misaco]

allDay=trueのとき、Date型でわたすと正しく表示することができました。
allDay=falseのとき、Date型でわたすと一日多く表示されました。
なので、以下のような関数を作成して対応しました。
ありがとうございました！
function dateOffset(allDay, end) {
if (allDay) {
return new Date(end);
}
return end;
}