What I'm trying to do. Tap a day in the calendar and have show the details of that day's events in the area below it.
How I'm doing it. With Angular and the ui-calendar directive. In FullCalendar's dayClick
event, I'm creating a new set of events that are happening on that day. In the template, I'm doing a typical ng-repeat="event in daysEvents"
div. This works perfectly fine when I'm testing it in ionic serve
.
The problem. The dayClick
event doesn't work in the iOS emulator, when I send the app to my device (with ionic run ios
) or Chrome Developer Tools "Toggle device mode".
The code. Here's my controller:
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");
}
}
};
And part of my template:
<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
If you need anything else, let me know. Thanks in advance.
This happens only when using UI-Calendar (FullCalendar) with Ionic, because Ionic catches all tap events. That's why it works fine for you in a desktop browser, but not in a mobile browser.
To solve this issue, add data-tap-disabled="true"
to UI-Calendar directive, like this:
<div data-tap-disabled="true" ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
In FullCalendar, if you drag on the day then the dayclick
event is fired.
Other devices fire the dragstart
and dragend
events when you tap on the day, but iOS devices don't.
I had no choice but to modify fullcalendar.js. You can see my modified version here:
angularui-calendar-fullcalendar-dayclick-not-work-expectedly-on-ios