• Ionic
  • 访问本地日历

    IonicLois 10个月前 367次点击 来自 Ionic

    首先,HTML。由于这个应用程序非常简单

    <!DOCTYPE html>




    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    
    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    


    <ion-pane ng-controller="MainCtrl">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Calendar Demo</h1>
      </ion-header-bar>
      <ion-content>
    
             <div class="card" ng-repeat="event in events">
              <div class="item item-divider">
                  {{event.title}}
              </div>            
              <div class="item item-text-wrap">
                  {{ event.description }}
                  <p/>
                  <strong>When: {{ event.date | date:'short' }}</strong>
              </div>
             </div>
    
      </ion-content>
    </ion-pane>
    



    这应该都是相当锅炉板。我只是循环播放事件并为每个事件创建一个卡用户界面。现在我们来看看控制器代码。

    angular.module(‘starter.controllers’, [])

    .controller(‘MainCtrl’, function($scope, Events) {

    Events.get().then(function(events) {
        console.log("events", events); 
        $scope.events = events;
    });
    

    });
    是的,只需调用服务并呈现事件即可。不重要的。现在我们来看看这个服务。

    angular.module(‘starter.services’, [])

    .factory(‘Events’, function($q) {

    var incrementDate = function (date, amount) {
           var tmpDate = new Date(date);
           tmpDate.setDate(tmpDate.getDate() + amount)
           return tmpDate;
    };
    
    //create fake events, but make it dynamic so they are in the next week
    var fakeEvents = [];
    fakeEvents.push(
        {
           "title":"Meetup on Ionic",
           "description":"We'll talk about beer, not Ionic.",
           "date":incrementDate(new Date(), 1)
        }  
    );
    fakeEvents.push(
        {
           "title":"Meetup on Beer",
           "description":"We'll talk about Ionic, not Beer.",
           "date":incrementDate(new Date(), 2)
        }  
    );
    fakeEvents.push(
        {
           "title":"Ray's Birthday Bash",
           "description":"Celebrate the awesomeness of Ray",
           "date":incrementDate(new Date(), 4)
        }  
    );
    fakeEvents.push(
        {
           "title":"Code Review",
           "description":"Let's tear apart Ray's code.",
           "date":incrementDate(new Date(), 5)
        }  
    );
    
    var getEvents = function() {
           var deferred = $q.defer();
           deferred.resolve(fakeEvents);
           return deferred.promise;
    }
    

    return {
    get:getEvents
    };

    });
    请注意,尽管第三个事件被识别为在日历中。为了使这项工作,我更新了事件的服务调用来处理检查日历。这有点复杂,因为每次调用都是异步的,但$ q可以很容易地处理它。

    var getEvents = function() {
    var deferred = $q.defer();

        /*
        Logic is:
        For each, see if it exists an event.
        */
        var promises = [];
        fakeEvents.forEach(function(ev) {
           //add enddate as 1 hour plus
           ev.enddate = incrementHour(ev.date, 1);
           console.log('try to find '+JSON.stringify(ev));
           promises.push($cordovaCalendar.findEvent({
             title:ev.title,
             startDate:ev.date
           }));
        });
    
        $q.all(promises).then(function(results) {
           console.log("in the all done");   
           //should be the same len as events
           for(var i=0;i<results.length;i++) {
             fakeEvents[i].status = results[i].length === 1;
           }
           deferred.resolve(fakeEvents);
        });
    
        return deferred.promise;
    

    }
    我在事件上设置了一个状态值来表示事件是否存在。回到显示器端,我这样处理:

    This event is added to your calendar already!

    Add to Calendar

    相当简单,对吗?现在让我们看看添加代码。我将跳过控制器代码,因为它只是调用服务并更新范围。

    var addEvent = function(event) {
    var deferred = $q.defer();

    $cordovaCalendar.createEvent({
        title: event.title,
        notes: event.description,
        startDate: event.date,
        endDate:event.enddate
    }).then(function (result) {
        console.log('success');console.dir(result);
        deferred.resolve(1);
    }, function (err) {
        console.log('error');console.dir(err);
        deferred.resolve(0);
    }); 
    
    return deferred.promise;
    

    }

    目前暂无回复
    关于 广告投放
    ©2016 - 2019 V4.1.6 Powered by 北京雏森科技有限公司