手機程式設計

行事曆

行事曆App

• 顯示行事曆

http://angular-ui.github.io/ui-calendar/

• 紀錄事件，需輸入日期、時間（Datepicker）

https://angular-ui.github.io/bootstrap/ 

• 會員

firebase：建立會員、建立事件資料表

安裝行事曆套件

• 安裝bower
• 安裝angular-ui-calendar套件

bower install --save angular-ui-calendar

引入外部css, js(index.html)

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="lib/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">

    <script src="lib/moment/min/moment.min.js"></script>
    <script src="lib/angular-ui-calendar/src/calendar.js"></script>
    <script src="lib/fullcalendar/dist/fullcalendar.min.js"></script>
    <script src="lib/fullcalendar/dist/lang/zh-tw.js"></script>
    <script src="lib/fullcalendar/dist/gcal.js"></script>

angular-ui calendar

full calendar

moment.io

google日曆

注入模組與使用指令(app.js, 頁面.html檔)

angular.module('app', ['ionic',/*....*/,'ui.calendar'])

<ion-view title="行事曆" id="page6" class=" ">
  <ion-content padding="true" class="has-header">
    <div ui-calendar="uiConfig.calendar" 
        class="calendar" ng-model="eventSources">
  </ion-content>
</ion-view>

Controller(controllers.js)

.controller('CalendarCtrl', function($scope) {
  $scope.eventSources = [];
  $scope.uiConfig = {
    calendar: {
      height: 450,
      editable: true,
      lang: 'zh-tw',

      header: {
        left: 'month agendaWeek agendaDay',
        center: 'title',
        right: 'today prev,next'
      },
      dayClick: $scope.alertEventOnClick,

      //$scope.alertEventOnClick,
      //eventDrop: $scope.alertOnDrop,
      //eventResize: $scope.alertOnResize
    }
  };