如何使用angular-ui / ui-calendar(arshaw / fullcalendar)加载回拨?

时间:2015-03-26 19:18:20

标签: angularjs calendar fullcalendar angular-ui

我尝试使用angular-ui日历实现加载回调函数。我希望我的日历在加载后转到特定日期,而不是转到当前日期。

我可以使用dayClick方法获得此功能,但是我根本无法使用angular实现加载功能。下面是代码,请注意加载回调不是控制台记录任何内容。

 $scope.goToRootScopeDate = function() {
     $scope.myCalendar.fullCalendar('gotoDate', $rootScope.day);
  }

    /* config calendar view  */
  $scope.uiConfig = {
    calendar: {
      defaultView: "agendaDay",
      // editable: true,
      header: {
        left: 'agendaWeek',
        center: 'title',
        right: 'today prev,next',
      },
      dayClick: $scope.goToRootScopeDate,
      loading: function(bool) {
        if (bool) {
          console.log('Done loading')
        } else {
          console.log("still loading")
        }
      }
    },
  }; 

1 个答案:

答案 0 :(得分:5)

如果您想从ng-controller管理Loading回调方法......

Loading callback接收两个参数,而不是布尔值。

  /* config calendar view  */
  $scope.uiConfig = {
    calendar: {
      defaultView: "agendaDay",
      // editable: true,
      header: {
        left: 'agendaWeek',
        center: 'title',
        right: 'today prev,next',
      },
      dayClick: $scope.goToRootScopeDate,
      loading: $scope.loading

    },
  }; 

然后使用这两个参数在控制器中管理它

$scope.loading = function(isLoading, view){
      alert("is loading" + isLoading);
    }

你可以在this plunker重现它,在那里我添加了一些烦人的警报来管理加载回调。

但是,如果您只想在第一个屏幕上加载特定日期...... 只需在配置中设置defaultdate

/* config calendar view  */
      $scope.uiConfig = {
        calendar: {
          defaultView: "agendaDay",
          // editable: true,
          header: {
            left: 'agendaWeek',
            center: 'title',
            right: 'today prev,next',
          },
          dayClick: $scope.goToRootScopeDate,
          defaultDate:$scope.myDesiredDate

        },
      };