CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcalendar
Rocking Birds
Rocking Birds

Reputation: 165

How to Apply swipe function on Div Bootstrap

I am working on a mobile App project (hybrid) where I need to implement Calendar to add Events, I had gone through many website and finally i am implementing This
calendar in My project, The code works fine but I need to change the month on swipe event instead of button Click event.I tried to understand the JS file of the code and I get to know that following event is Responsible to change the Month on NEXT Button

here is my JS file 

$('.btn-group button[data-calendar-nav]').each(function() {
    var $this = $(this);
    console.log($this);
    $this.click(function() {
        calendar.navigate($this.data('calendar-nav'));
    });
});

HTML:

<button class="btn btn-primary" data-calendar-nav="next">Next >></button>

how do I Apply the month change event on Calendar Swipe

<div id="calendar"></div>

Please Help,

Upvotes: 0

Views: 1444

Answers (1)

TheDeveloper
TheDeveloper

Reputation: 940

may i suggest two libraries, that might be useful:

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

http://hammerjs.github.io/

all then u do is bind the swipe callback to the click handler

example code may need slight tweaking: touchswipe used

$(function() {      
      $("#calendar").swipe( {
        swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
          // direction  - left , right , up , down    
          if( direction  == "left" ) $('.btn-group button[data-calendar-nav]').click()
        },            
         threshold:0
      });
});

Upvotes: 1

Related Questions