Ionic framework blocking ui-calendar events

I’m creating an application with the ionic framework and I have a screen where I need to plan events in a calendar. I can drag and drop them, but the functionality of the ui-calendar directive is blocked, because ionic catches these events. This works in a desktop browser, but not on a mobile browser. I created a plunker supporting my case **in this plunker, the drag and drop does not work, but this is not the issue, the issue is modifing the events in the calendar **. I added the drag and drop functionality so you can see I need the 2 col layout

The core is this code, the ion-content is blocking the events

      <ion-header-bar class="bar-balanced">
        <h1 class="title">header</h1>
        <div class="row responsive-sm">
          <div class="col">
            <div class="event card card-royal" ng-repeat="ev in unplanned" eventid="{{}}" uidraggable="">
              <div class="item item-text-wrap">
                <span class="eventTitle">{{ev.title}}</span>
          <div class="col">
            <div ui-calendar="uiConfig.calendar" class="calendar" ng-model="eventSources"></div>
      <ion-footer-bar class="bar-balanced"></ion-footer-bar>

Have you tried adding data-tap-disable to the div with the ui-calender? This way ionic won’t catch any drag-drop evevnts in that div

Yes, but the data-tab-disable does not solve this issue

So I checked out ui-calender

And found that it doesn’t support dragging. On the full site, you can drag events around on the calendar. But while on my ipad, I wasn’t able to do this at all. This is a limitation of UI-calendar

Hi mhartington
I got it working, as you can see in the example included in my plunkr. The issue is not to get the calendar woring, the issue is to let the the calendar receive the events from my mobile device. When I’m manipulating the calendar on a mobile device, the ionic content takes over my events. The dragging works in the plunker, I just didn’t implement the adding of the events to the calendar.

Going to look into this more…
I’ll report back once I find the issue

So I messed around with this and couldn’t find a way to resolve it. Can you open an issue for this on github?

yes, thanks. I have created this issue

1 Like

I too use ui-calendar in my ionic application, Luckily there is no requirement of drag and drop in ours. I add data-tap-disabled=“true” all works except the part that scrolling isn’t working properly.

<ion-content scroll="true" has-bouncing="false">
        <div class="row">
        	<div class="col col-100" >
          <div scroll="true"  data-tap-disabled="true" ui-calendar="calendarConfig" class="calendar" ng-model="eventSource" id="dayCalendar" calendar="dayCalendar"></div>

Not sure why data-tap-disabled is causing scrolling not to work?

Any suggestions please

Can you put this into a codepen?

Thanks for the quick reply mhartington.

Here is the plunker

Strange bit is if i use 1.0.0-beta.6 or less scrolling does works…

Hope this plunker helps.

Well data-tap-disable was around in beta 6, IIRC.

Seems that if you add some padding, all works well.

All data-tap-disable does is disables scrolling if the element is touched/dragged. So by pushing the calendar away from the edges a bit, you get your scrolling back.

Thanks mharington, I wanted to achieve how it works in beta 6. I wanted the data-tap-disabled true (so that clicking on events etc works) but to allow scroll (just the scrolling) even when I drag the calendar component. Is that possible any way?

hmm so you want to allow scroll even when you’re trying to drag on the calendar? Then remove the data-tap-disable from the calendar

If I remove data-tap-disabled=true then events of calendar (eventClick, etc) is not getting fired. I guess that’s the starting point of this discussion. If I have data-tap-disabled=true then I couldn’t do smooth scrolling by dragging on the calendar.

To be more specific If I remove data-tap-disabled=true, in desktop all works fine. But in mobile click event is not getting fired. I have modified the plunker to show what I mean. On clicking the event an alert will pop. In mobile click event is not getting called.

Any help appreciated.

Hmm, lets try this.

.directive('disableTap', function($timeout) {
 return {
  link: function() {

   $timeout(function() {
    var tab = document.getElementsByClassName('fc-widget-content');

    for (i = 0; i < tab.length; ++i) {
     tab[i].setAttribute('data-tap-disabled', 'true')
   }, 500);

Thanks for the idea, adding data-tab-disabled to event’s element did the trick.

$scope.eventRender = function(event, element) {

I added to the eventRender as the event elements are dyniamic.

Thanks a lot for the idea.

Sorry for linking another topic… any suggestion for this please