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
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.
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.
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?
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.