FullCalendar's dayClick not firing when a date is tapped - angularjs

Question

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.

Answer 1

1st solution:
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>
UPD - 2nd solution:
By disabling the Ionic tap listeners, you'll face the default browser's 300ms delays after each tap is made, which leads to an extremely poor user experience.
So, another solution for your question would be to select dates programmatically.
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

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