twinssbc / Ionic-Calendar

A calendar directive for Ionic framework
http://twinssbc.github.io/Ionic-Calendar/demo
MIT License
159 stars 73 forks source link

Slide Scroll Left-Right what for up-down? #14

Open BhavanPatel opened 8 years ago

BhavanPatel commented 8 years ago

Here in Calendar everything is sliding from left-right or right -left in M D W views... but what I have to do Scroll Up-Down and Down-Up? What I need to change?

twinssbc commented 8 years ago

@BhavanPatel This directive is built based on ion-slide-box, it doesn't support slide vertically by default. But I found there's a github repository supporting vertical direction. It might worth to take a look. https://github.com/smadey/ion.superSliderBox

BhavanPatel commented 8 years ago

Thank You. @twinssbc

Manduro commented 8 years ago

@BhavanPatel Actually, from version 1.2 onwards, Ionic has a new slider component that does support vertical sliding. You can read about it here: http://blog.ionic.io/announcing-ionic-1-2/ at 'New Slide Box'

BhavanPatel commented 8 years ago

Yesss @Manduro Can you please update calendar with new slider?

Manduro commented 8 years ago

@BhavanPatel It's currently not a priority for me, so I won't be implementing it soon.

twinssbc commented 8 years ago

@Manduro Where did you learn that the new slide box will support vertical sliding? I know that it's built based on Swiper, and it supports vertical sliding. But according to the latest doc, it doesn't expose this option. http://ionicframework.com/docs/api/directive/ionSlideBox/

Manduro commented 8 years ago

There is no doc yet for the new slide box. The only docs I could find was in the blog post I linked to. It says that all swiper options are available.

<ion-slides options="options" slider="slider">
  <ion-slide-page>
  </ion-slide-page>
</ion-slides>

The options argument is passed directly to Swiper and follows the official API options. Set a $scope.$watch on slider to get full access to the Swiper object to control the internal API.

twinssbc commented 8 years ago

@Manduro Nice!

BhavanPatel commented 8 years ago

Hope this will help! @twinssbc @Manduro
must update ionic

 <!DOCTYPE html>
<html ng-app="slidesTest">
  <head>
    <meta charset="utf-8">
    <title>Slide Box</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="lib/ionic/css/ionic.css"><!-- Change Path as your folder view -->
    <script src="lib/ionic/js/ionic.bundle.js"></script><!-- Change Path as your folder view -->
  </head>

  <body ng-controller="MyCtrl">
  <ion-pane>

    <ion-header-bar class="bar-assertive">
      <ion-title>Hello Bhavan</ion-title>
    </ion-header-bar>
    <ion-content class="padding">

      <ion-slides options="options">
        <ion-slide-page>
          <h2>SLIDE 1</h2>
        </ion-slide-page>

        <ion-slide-page>
          <h2>SLIDE 2</h2>
        </ion-slide-page>

        <ion-slide-page>
          <h2>SLIDE 3</h2>
        </ion-slide-page>

        <ion-slide-page>
          <h2>SLIDE 4</h2>
        </ion-slide-page>

        <ion-slide-page>
          <h2>SLIDE 5</h2>
        </ion-slide-page>

        <ion-slide-page>
          <h2>SLIDE 6</h2>
        </ion-slide-page>
      </ion-slides>

    </ion-content>
  </ion-pane>
  <script>
    angular.module('slidesTest', ['ionic'])
    .controller('MyCtrl', ['$scope', function($scope) {
      $scope.options = {
        direction:'vertical' //All Swiper Parameters can be used here //http://www.idangero.us/swiper/api/#.VoNbIpN958c
      }
    }]);
    </script>
  </body>
</html>