从 UICalendar 中选择一天

Question

我是 angular 的新手我正在尝试使用 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
      });
    }
  }
};

Answer 1

在您的配置变量中，您可以添加一个 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
    });
}

这将 return 在这一天发生或与之重叠的所有事件。

可以找到 FullCalendar 文档 here。

从 UICalendar 中选择一天

selecting a day from UICalendar

javascript

angularjs

twitter-bootstrap

angularjs-ng-click

ui-calendar