Angularjs 在具有角度UI的fullCalendar中使用gotoDate

我已经使用带角度UI的FullCalendar设置了日历。它工作正常，我可以很好地切换事件类别，但是每次更新eventSource时，日历视图都设置为当前日期

我尝试过使用

gotoDate

方法，我可以看到它可以工作（它也可以从控制台工作），但几乎是在日历恢复到当前日期之后立即工作。由于我是AngularJS新手，我可能把

gotoDate

放错地方了。但我不知道该把它放在哪里

我使用的服务返回一组事件对象，并将它们推送到

eventSources

，日历元素的ng模型中。没什么特别的，在控制器中我有：

$scope.eventSources = [];
var promise = UserCalendarEvents.get(groupName);
promise.then(
    function(events) {
        $scope.eventSources.push(events);
        $('#events-calendar').fullCalendar('gotoDate', 2012, 11);
    },
    function(reason) {
        console.log('Error: ' + reason);
    }
);

在这种情况下，获取事件并填充

$scope.eventSources

。日历视图被设置为2012年12月，之后，视图几乎立即切换到当前日期。是不是某种ng型号的手表会重新启动全日历？如果是，我该如何设置选择的日期

更新：我结束了使用joshkurz fix的过程，但是使用了一个修改版本，该版本支持所选视图，即如果用户选择了basicWeek并更改了源数据，则视图不应更改为例如月份视图。这就是我需要为我的用户

    function update() {
        scope.calendar = elm.html('');
        var view = scope.calendar.fullCalendar('getView');
        var m;
        var xtraOptions = {};
        //calendar object exposed on scope
        if(view){
          var viewDate = new Date(view.start);
          if(m !== 'Invalid Date'){
            y = viewDate.getFullYear();
            m = viewDate.getMonth();
            d = viewDate.getDate();
            if(!isNaN(y) && !isNaN(m) && !isNaN(d)){
              xtraOptions = {
                year: y,
                month: m,
                date: d
              };
            }
          }
          view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
        }
        /* If the calendar has options added then render them */
        var expression, 
            options = { defaultView : view, eventSources: sources };
        if (attrs.uiCalendar) {
            expression = scope.$eval(attrs.uiCalendar);
            // Override defaultView if is set in ui-calendar attribute - OK? 
            if (expression.defaultView) {
                expression.defaultView = view;
            }     
        } else {
            expression = {};
        }
        angular.extend(options, uiConfig.uiCalendar, expression, xtraOptions);
        scope.calendar.fullCalendar(options);

      }

---

使用AngularUI在指令中包装FullCalendar，可以通过$scope.calendar访问calendar对象。“AngularJS方式”是为了避免控制器中直接的DOM操作

在您的特定情况下，您应该写以下内容：

$scope.calendar.fullCalendar('gotoDate', 2012, 11);

AngularUI确实有一个监视eventSource和event的功能，每当其中一个的长度发生变化时，它都会调用更新函数。您可以在此处查看源代码：

您可以看到，$scope.calendar中的calendar对象在每次事件模型更改时都会使用一组新的事件重新创建。这就是为什么你的日期更改没有通过——事件正在被添加，触发更新，你的日期更改进入，整个日历被更改，你的日期更改丢失

在不改变AngularUI代码的情况下，我突然想到两件事（不是最好的）：

您可以使用AngularJS的$timeout服务并等待一段时间 加载事件后，日历完成更新， 然后给你的约会打电话

您可以在触发日期更改的范围上添加$watch 每次日历对象更改时：

---

我在上面创建了这个例子。在test（）方法中，我只是通过承诺（将在2013年3月添加）将一些虚假数据加载到事件中，然后将日期更改为2012年12月。我正在监视$scope.calendar，每次它更改（指令中触发更新）时，我都会重新发送date命令。你应该被送到2012年12月，甚至没有看到新的事件发生，但如果你回到2013年3月，他们应该在那里。我将手表卡在另一个表中。然后假设您将使用返回的某个值来动态设置日期。

这是日历的一个错误。你是第一个在StackOverflow上说这件事的人。荣誉

有几种方法可以解决这个问题。在github上有人建议我们取消指令如何在手表启动时重新创建自身，这将阻止这种行为。我相信，如果我们能在生产中使用这种方法，那么它将是最好的解决方案

但是，在此之前，解决方法是从view.start字段中创建的日期对象获取当前月份。应将此月添加到用于呈现日历的选项中

下面是新的更新函数在calendar指令中应该是什么样子的一个片段

/* update the calendar with the correct options */
        function update() {
          scope.calendar = elm.html('');
          var view = scope.calendar.fullCalendar('getView');
          var m;
          var xtraOptions = {};
          //calendar object exposed on scope
          if(view){
            var d = new Date(view.start);
            m = new Date(view.start);
            if(m !== 'Invalid Date'){
              m = m.getMonth();
              if(!isNaN(m)){
                xtraOptions = {
                  month: m
                };
              }
            }
            view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
          }
         // console.log(m)
          /* If the calendar has options added then render them */
          var expression,
            options = {
              defaultView : view,
              eventSources: sources
            };
          if (attrs.exCalendar) {
            expression = scope.$eval(attrs.exCalendar);
          } else {
            expression = {};
          }
          angular.extend(options, uiConfig.exCalendar, expression, xtraOptions);
          scope.calendar.fullCalendar(options);
        }

---

这还没有在angular ui CI服务器上正确测试过，但它运行良好，因为我目前正在生产中使用它

在不更改角度UI源的情况下解决此问题的另一种方法是如下声明日历：

<div ui-calendar="{viewDisplay:viewDisplayHandler,month:monthVal,year:yearVal}" ng-model="eventsArr"></div>

---

在GitHub上发出pull请求之前，我就是这样解决的；我想这不是最佳的方法，但我已经在生产中使用了一段时间，它似乎还可以，并且不需要更改Angular UI的代码。

啊，就是这么简单-$scope.calendar。使用DOM操作感觉像是一种黑客行为。自然而然地，手表似乎是最好的选择。我将在几天后试用该代码。fullcalendar现在不再在$scope.calendar中可用。它被定义为一个属性，例如calendar=“bob”将使其在$scope.bob.fullcalendar（）中可用。请参见@toxaq，我无法理解他们在那里的对话。我看到$scope.calendar现在不可用，那么我如何在没有直接DOM编辑的情况下使用gotoDate？@boi_echos，而不查看任何代码进行确认，并使用我的示例

$scope.bob.fullCalendar（）.gotoDate（）

修补程序工作正常，但是，我在上面的代码中将exCalender更改为uiCalendar，因为我在自定义设置中使用了该属性。属性名称是否将在即将发布的版本中更改？一件与修补程序不兼容的事情是，如果用户更改视图。它总是恢复到月视图（即默认值）。也许这周我会有时间看一下。啊，是的，我想把前名称空间留在那里。然而，我没有注意到你所指的bug。太好了！我会试试看。我希望使用回调方法更改为eventSource指定的数据，比如：$scope.eventSourceNew={url:url，键入：'GET'}$scope.addRemoveEventSource（$scope.eventSources，$scope.eventSourceNew）；不幸的是，当它从未调用URL时。

$scope.viewDisplayHandler = function(view) {
    var viewStart = view.start;
    $scope.yearVal = viewStart.getFullYear();
    $scope.monthVal = viewStart.getMonth();
}