Fullcalendar错误的时间上的点击事件 [英] Fullcalendar wrong time in on click event

问题描述

我使用的角度和fullcalendar。我有（惊讶）时区 - 的问题，我似乎无法得到它的权利。

I'm using angular and fullcalendar. I have (surprise) timezone-issues, and I can't seem to get it right.

如果在weekview我点击08.00小时，我打开一个模式，并显示的时候，我看到09.00小时。

If in the weekview I click on 08.00 hours, I open a modal and show the time, I see 09.00 hours.

timezone: "Europe/Brussels",
ignoreTimezone: false,

这是（ATM）一+0100时区，夏季期间+0200时区

This is (atm) a +0100 timezone, and during summer a +0200 timezone

的点击事件：

dayClick: function (date, jsEvent, view) {

    $scope.newEventDate = date;

    var modalInstance = $modal.open({
        templateUrl: 'newRosterEvent',
        controller: 'NewEventModalController',
        backdrop: "true",
        resolve: {
            event: function () {
                       return $scope.newEventDate;
                   },
            stage: function () {
                       return $scope.stage;
                   }
            }
       });

要显示的时间：

stagewebApp.controller('NewEventModalController', ["$scope", "$modalInstance","$filter", "event", "stage", function ($scope, $modalInstance, $filter,event, stage) {

    $scope.stage = stage;

    $scope.day = new Date($filter('date')(event._d, "yyyy-MM-dd"));

    $scope.start = event.toDate();

    ....more code....
}

在这种情况下，$ scope.start显示单击的时间+1

In this case $scope.start displays the clicked time +1

如此看来，fullcalendar需要我点击的时间，将其转换为所选择的时区，但我期待它跨preT点击的时间，在我选择的时区之中。

So it seems that fullcalendar takes the time I clicked and converts it to the timezone selected, but I would expect it to interpret the clicked time as being in the timezone I selected.

显然我解决这个问题，那么什么是做到这一点的正确方法？ （ $ scope.start 应该显示我点击（$ P在我的时区pferably $）的时间）。后来我将它发送到它被存储为UTC服务器。

Apparently I am tackling this wrong, so what is the correct way to do this? ( $scope.start should show the time I clicked (preferably in my timezone)). Afterwards I send it to the server where it is stored as UTC.

推荐答案

FullCalendar的当前版本使用 moment.js广泛 。你所描述的问题是由不正确使用时刻对象。具体做法是：

The current version of FullCalendar uses moment.js extensively. The problems you are describing are from improper use of moment objects. Specifically:

$scope.start = event.toDate();

当你调用 TODATE ，你会得到一个常规的JavaScript 日期对象 - 这将是基于相同的UTC瞬间，但会的总是的承担，其中code运行时区的行为。您有几种选择：

When you call toDate, you get back a regular JavaScript Date object - which will be based on the same UTC instant, but will always take on the behavior of the time zone where the code is running. You have a few options:

• 您可以把它作为一个时刻对象：

$scope.start = event;

您可以将其格式化到保留的时区偏移的ISO字符串：

You can format it to an ISO string that retains the time zone offset:

$scope.start = event.format(); // ex: '2015-03-04T08:00:00+01:00'

无论使用哪种方法，你需要使用 $ scope.start 期望是<$ C $的的使用的坚持到底C>时刻或字符串，而不是一个日期。

With either option, you'll need to follow through with the usage of $scope.start to expect either a moment or a string, rather than a Date.

此外，在该code：

$scope.day = new Date($filter('date')(event._d, "yyyy-MM-dd"));

您永远不应该直接访问 _D 属性，可以有意想不到的副作用。考虑下划线的意思是内部。此外，您不需要这里角的日期过滤器，因为此刻的对象具有格式化功能。相反，只是这样做：

You should never access the _d property directly, as there can be unintended side-effects. Consider the underscore to mean "internal". Also, you don't need Angular's date filter here since moment objects have formatting capabilities. Instead, just do this:

$scope.day = event.format("YYYY-MM-DD");

这篇关于Fullcalendar错误的时间上的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！