Question

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

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

问题。当我将应用程序发送到我的设备（使用dayClick）或Chrome开发者工具时，ionic run ios事件在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>

如果您还有其他需要，请与我联系。提前谢谢。

Answer 1

第一个解决方案：

仅当使用具有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 tap听众，您将在每次点击后面临默认浏览器300ms的延迟，这会导致极差的用户体验。

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

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));
  });
}

Answer 2

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

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

我别无选择，只能修改fullcalendar.js。您可以在此处查看我的修改版本：

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

FullCalendar的日期点击日期时不点火

2 个答案: