1

我对角度相当陌生，我正在尝试使用 ui-calendar 实现日历。到目前为止，我已经能够在上面显示一个非常基本的日历和一些事件。

现在我需要能够单击一天并在侧选项卡上显示详细事件。我似乎迷失了如何实现这个点击日的事情。这可能看起来很天真，我想我会在日历上找到每天单元格的 html，然后就像附加一个 ng-click 一样简单。但我似乎找不到日历的 html 所在的任何模板。我所能看到的只是指令，它没有多大帮助。我根本不懂 jquery，所以我也很难找到任何答案。

总而言之，我只想知道如何让日历上的一天可以点击。

提前致谢。

代码：

$scope.uiConfig = {
  calendar: {
    height: 450,
    editable: true,
    header: {
      left: 'title',
      center: '',
      right: 'today prev,next'
    },
    eventClick: $scope.alertOnEventClick,
    eventDrop: $scope.alertOnDrop,
    eventResize: $scope.alertOnResize,
    eventRender: $scope.eventRender,
    dayClick: function(date, jsEvent, view) {
      console.log("inside dayClick");
      alert('Clicked on: ' + date.format());
      var events = myCalendar.fullCalendar('clientEvents', function(event) {
        return event.start.isSame(date) || event.end.isSame(date) || date.isBetween(event.start, event.end); // Will return all events starting/ending on this date or overlapping this date
      });
    }
  }
};
4

1 回答 1

2

在您的配置变量中，您可以添加一个dayClick回调，在此回调中您可以执行以下操作：

dayClick: function( date, jsEvent, view ) { 
    var events = myCalendar.fullCalendar('clientEvents', function(event) {
        return event.start.isSame(date) || event.end.isSame(date) || date.isBetween(event.start, event.end); // Will return all events starting/ending on this date or overlapping this date
    });
}

这将返回当天或与其重叠的所有事件。

FullCalendar 文档可以在这里找到。

于 2016-02-17T12:55:17.097 回答