Swipe-able ionic calendar


#1

Hello all I’m trying to make a swipe-able calendar grid from divs but I can not get it to work on device.

So far, I have a basic bounding “calendar” div and ng-repeat created rows and day divs

        <div id="calendar">
            <div class="daysHeader">
                <div class="day">Mon</div><div class="day">Tue</div><div class="day">Wed</div><div class="day">Thu</div><div class="day">Fri</div>
            </div>
            <div class="daysRow" ng-repeat="week in month.weeks">
                <div class="day" ng-repeat="day in week.days">Day number goes here</div>
            </div>
        </div>

I’m then using a really basic $ionicGesture delegate injected into my controller to just print out the detected swipes…

        var ngCalendar = angular.element(document.getElementById("calendar"));
        var swipeRight = function(){
            console.log("right swipe!");
            //Logic code goes here
        };
        var swipeLeft = function(){
            console.log("left swipe!");
            //Logic code goes here
        };
        $ionicGesture.on('swiperight',swipeRight,ngCalendar);
        $ionicGesture.on('swipeleft',swipeLeft,ngCalendar);

This creates a 5x5 grid of days (with an additional 5 header boxes to put the name of the day in above each row of days), if you then ionic serve this it runs in chrome and works perfectly; if you ionic run android it and test it in android webview v33.0.0.0 on kitkat 4.4.4 the events “do” work, but not very well, you really have to swipe away at the screen and every now and again you’ll get the gesture to be recognised.

I suspect it’s something to do with propagation of events but I don’t know how to fix it???


#2

OK scratch that, I’ve just realised, if you put the $ionicGesture.on on the ion-content and remove everything inside the ion-content (so you literally have a blank page) the swipe gesture is “still” just as bad???

Is there a way to increase the sensitivity of a swipe???

EDIT: sounds similar to: On-swipe-left="func()" sensitivity


#3

Why don’t you use ion-slide-box?
Here is an example extract from my app with ion-slide-box… maybe it can help :

<ion-slide-box does-continue="false" show-pager="false" pager-click="false" ng-if="agenda.calendar.months">
                <ion-slide ng-repeat="(id, month) in agenda.calendar.months">
                    <div>
                        <div class="row">
                            <div class="col-10 text-left padding" ng-click="previousSlide()"><i class="icon ion-chevron-left"></i></div>
                            <div class="col-80 text-center light padding">{{month.name}}</div>
                            <div class="col-10 text-right padding" ng-click="nextSlide()"><i class="icon ion-chevron-right"></i></div>
                        </div>
                        <div class="row">
                            <div class="col">Lun</div>
                            <div class="col">Mar</div>
                            <div class="col">Mer</div>
                            <div class="col">Jeu</div>
                            <div class="col">Ven</div>
                            <div class="col">Sam</div>
                            <div class="col">Dim</div>
                        </div>
                        <div class="row" ng-repeat="i in myrange(month.days)" >
                        <div class="col" ng-repeat="day in month.days.slice(i,i+7)">
                            <a class="padding button button-small" ng-class="getClass(day)" ng-click="test(day)">{{day.num}}</a>
                        </div>
                        </div>
                    </div>
                </ion-slide>
            </ion-slide-box>

Controller :

$scope.myrange = function(tab) {
var range = [];
for (var i = 0; i < tab.length; i = i + 7)
   range.push(i);
return range;
}

$scope.agenda is filled by a JSON file :

{
    "calendar": {
        "months": {
            "042015": {
                "name": "April 2015",
                "days": [
                    {},
                    {},
                    {"num":1},
                    {"num":2},
                    {
                        "num":3,
                        "datakey": "other data",
                    },
                    {"num":4},
                    {"num":5},
                    {"num":6},
                    {"num":7},
...

#4

Very interesting suggestion! I already am familiar with slide boxes and they do work fairly well. The problem is I’m trying to mimic functionality where there is a calendar grid above vertically scrolling list (doing a quick google image search, this sort of thing: http://geekshavelanded.com/wp-content/uploads/2013/01/Google-Calendar.png), therefore the problem with a slide box is (as far as I’m aware) it’s full screen


#5

Weird, if you put in “dragleft” or “dragright”, you suddenly get a better result.

On a desktop browser you basically get lots and lots of console logging events as you drag your finger (which is what you’d expect), on android, dragging across the divs does make the drag work but only once, dragging across another part of the screen gets you the same effect as in a desktop browser.

It’s almost as if the detection of the drag is effected by the width of the element it is being detected from. So I wonder if “swipe” events are firing properly as I’m not moving my finger over enough pixels inside the top level div element in order to fire the swipe events???


#6

For those curious as to what I ended up doing…

I used a slide box as suggested. It’s way too much hassle to make the calendar like an android calendar, i.e. swipeable calendar on the top with an agenda list on the bottom of the “same” page.