当点击日期时，FullCalendar 的 dayClick 不会触发答案

【问题标题】：FullCalendar's dayClick not firing when a date is tapped当点击日期时，FullCalendar 的 dayClick 不会触发
【发布时间】：2015-08-03 19:45:21
【问题描述】：

我正在尝试做的事情。点击日历中的某一天，并在其下方区域显示当天活动的详细信息。

我是怎么做的。 使用 Angular 和 ui-calendar 指令。在 FullCalendar 的 dayClick 事件中，我正在创建当天发生的一组新事件。在模板中，我正在做一个典型的ng-repeat="event in daysEvents" div。当我在ionic serve 中对其进行测试时，这非常有效。

问题。当我将应用程序发送到我的设备（使用 ionic run ios）或 Chrome 开发人员工具“切换设备模式”时，dayClick 事件在 iOS 模拟器中不起作用.

代码。这是我的控制器：

angular.module('starter.controllers', ['ui.calendar'])

.controller('CalendarCtrl', function($scope) {
  $scope.eventSources = [
    {
    title: "Spring Awards Night",
    start: moment("2015-5-19 18:30"),
    description: "The Spring Awards are awesome and you should come."
    }
  ]

  $scope.uiConfig = {
    calendar:{
      height: 'auto',
      editable: false,
      header:{
        left: 'prev',
        center: 'title',
        right: 'next'
      },
      dayClick: function(date, jsEvent, view) {
        $scope.daysEvents = $scope.eventSources.filter(function(event){
          return event.start.isBetween(date, moment(date).add(1, 'days'));
        });
        $(".fc-day").removeClass("fc-selected");
        $(this).addClass("fc-selected");
      }
    }
  };

我的模板的一部分：

<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>

如果你还需要什么，请告诉我。提前致谢。

【问题讨论】：

是的。我添加了更多模板和控制器代码。
我还发现在使用 Chrome 开发者工具的“切换设备模式”时它不起作用。
做检查元素，在浏览器控制台的左上角你会看到一个移动图标，点击它，在左上角你会再次看到一个标题设备选择您要使用的手机型号，然后刷新 :)
对。这是它不起作用的视图（使用任何设备选项）。它在非设备模式（普通浏览器窗口）下工作得非常好。

标签： angularjs cordova fullcalendar ionic-framework

【解决方案1】：

在 FullCalendar 中，如果您在当天拖动，则会触发 dayclick 事件。

当您点击当天时，其他设备会触发 dragstart 和 dragend 事件，但 iOS 设备不会。

我别无选择，只能修改 fullcalendar.js。你可以在这里看到我的修改版本：

angularui-calendar-fullcalendar-dayclick-not-work-expectedly-on-ios

【讨论】：

【解决方案2】：

第一种解决方案：

这仅在使用带有 Ionic 的 UI-Calendar (FullCalendar) 时发生，因为 Ionic 会捕获所有点击事件。这就是为什么它在桌面浏览器中可以正常工作，但在移动浏览器中却不行。

要解决此问题，请将data-tap-disabled="true" 添加到 UI-Calendar 指令中，如下所示：

<div data-tap-disabled="true" ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>

UPD - 第二种解决方案：

通过禁用 Ionic 点击监听器，您将面临每次点击后默认浏览器 300 毫秒的延迟，这会导致极差的用户体验。

因此，您的问题的另一种解决方案是以编程方式选择日期。

function onViewRender( view, element ){
  // 1. Add tap listeners for each day (in my case - the date number element)
  var matches = document.querySelectorAll(".fc-day-number");

  _.forEach(matches, function(element){
    $ionicGesture.on('tap', function (event) {

      // 2. On tap - parse data-date attribute from the element
      var selectedDateStr = $(event.target).attr('data-date');

      // 3. And select an according day with uiCalendarConfig select method
      uiCalendarConfig.calendars.mobileCal.fullCalendar('select', moment(selectedDateStr), moment(selectedDateStr).add(24,'h'));
    }, angular.element(element));
  });
}

【讨论】：