質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
mBaaS

mBaaSとはモバイルアプリケーションでの利用に特化したBaaSです。スマートフォン向けのWebアプリケーションが必要とするサーバ側の様々な機能をインターネットを通じてサービスとして提供しています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

解決済

1回答

2422閲覧

mBaaS カレンダーとして表示したい

退会済みユーザー

退会済みユーザー

総合スコア0

mBaaS

mBaaSとはモバイルアプリケーションでの利用に特化したBaaSです。スマートフォン向けのWebアプリケーションが必要とするサーバ側の様々な機能をインターネットを通じてサービスとして提供しています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

0クリップ

投稿2017/01/18 14:55

Nifty mobilebackendとAngularJsでスケジューラーを実装したいです。

カレンダー表示、スケジュール一覧はそれぞれ実装したのですが、
連動の仕方が分からず試行錯誤しております。

カレンダーの日付とスケジュールの日付を紐づけて、
スケジュールがある日はクリックでスケジュール画面に遷移、といった形で実装したいです。

実際にこのような方法でスケジューラーを実装することは可能でしょうか?
ご教授お願い致します。


カレンダー

javascript

1var app = angular.module("demo", []); 2 3app.controller("calendarDemo", function($scope,$timeout) { 4 $scope.day = moment(); 5}); 6 7app.directive("calendar", function() { 8 return { 9 restrict: "E", 10 templateUrl: "calendar.html", 11 scope: { 12 selected: "=" 13 }, 14 link: function(scope) { 15 // scope.selected = _removeTime(scope.selected || moment()); 16 scope.month = scope.selected.clone(); 17 18 var start = scope.selected.clone(); 19 start.date(1); 20 _removeTime(start.day(0)); 21 22 _buildMonth(scope, start, scope.month); 23 24 scope.select = function(day) { 25 scope.selected = day.date; 26 }; 27 28 scope.next = function() { 29 var next = scope.month.clone(); 30 _removeTime(next.month(next.month() + 1).date(1)); 31 scope.month.month(scope.month.month() + 1); 32 _buildMonth(scope, next, scope.month); 33 }; 34 35 scope.previous = function() { 36 var previous = scope.month.clone(); 37 _removeTime(previous.month(previous.month() - 1).date(1)); 38 scope.month.month(scope.month.month() - 1); 39 _buildMonth(scope, previous, scope.month); 40 }; 41 } 42 }; 43 44 function _removeTime(date) { 45 return date.day(0).hour(0).minute(0).second(0).millisecond(0); 46 } 47 48 function _buildMonth(scope, start, month) { 49 scope.weeks = []; 50 var done = false, 51 date = start.clone(), 52 monthIndex = date.month(), 53 count = 0; 54 while (!done) { 55 scope.weeks.push({ 56 days: _buildWeek(date.clone(), month) 57 }); 58 date.add(1, "w"); 59 done = count++ > 2 && monthIndex !== date.month(); 60 monthIndex = date.month(); 61 } 62 } 63 64 function _buildWeek(date, month) { 65 var days = []; 66 for (var i = 0; i < 7; i++) { 67 days.push({ 68 name: date.format("dd").substring(0, 1), 69 number: date.date(), 70 isCurrentMonth: date.month() === month.month(), 71 isToday: date.isSame(new Date(), "day"), 72 date: date 73 }); 74 date = date.clone(); 75 date.add(1, "d"); 76 } 77 return days; 78 } 79});

html

1<script type="text/ng-template" id="calendar.html"> 2 <div class="header"> 3 <i class="fa fa-angle-left" ng-click="previous()"></i> 4 <span>{{month.format("MMMM, YYYY")}}</span> 5 <i class="fa fa-angle-right" ng-click="next()"></i> 6 </div> 7 <div class="wrappWeek"> 8 <div class="week names"> 9 <span class="">Sun</span> 10 <span class="">Mon</span> 11 <span class="">Tue</span> 12 <span class="">Wed</span> 13 <span class="">Thu</span> 14 <span class="">Fri</span> 15 <span class="">Sat</span> 16 </div> 17 <div class="week" ng-repeat="week in weeks"> 18 <div class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected) }" ng-click="select(day)" ng-repeat="day in week.days"> 19 <div id="content"> 20 {{day.number}} 21 </div> 22 </div> 23 </div> 24</script> 25 26 27<ons-template id="sample.html"> 28 <div id="pageCalendar"> 29 <ons-page ng-controller="calendarDemo" class="ng-scop"> 30 <calendar selected="day"></calendar> 31 </ons-page> 32 </div> 33</ons-template> 34

スケジュール一覧

javascript

1module.controller("ScheduleListController", function(userInfo, $rootScope, $scope, $timeout) { 2 3 $scope.onLoadNewScheduleList = function() { 4 var Schedule = NCMB.Object.extend("Schedule"); 5 var newScheduleQuery = new NCMB.Query(Schedule); 6 newScheduleQuery.ascending("createDate"); 7 newScheduleQuery.find({ 8 success: function (results) { 9 function insertJSONObject(data, results) { 10 for (var i = 0; i < results.length; i++) { 11 var newSchedule = {}; 12 newSchedule.ScheduleTitle = results[i].get("ScheduleTitle"); 13 newSchedule.ScheduleContent = results[i].get("ScheduleContent"); 14 newSchedule.ScheduleDate = results[i].get("ScheduleDate"); 15 Schedule.objectId = results[i].id; 16 data.newScheduleList[i] = newSchedule; 17 } 18 } 19 var data = {}; 20 data.newScheduleList = []; 21 insertJSONObject(data, results); 22 $scope.$apply(function() { 23 $scope.newScheduleList = data.newScheduleList; 24 }); 25 }, 26 error: function (error){ 27 ons.notification.alert({ 28 message: error.message, 29 title: "Error", 30 buttonLabel: "OK", 31 animation: "default" 32 }); 33 } 34 }); 35 }; 36 $scope.onLoadNewScheduleList(); 37});

html

1 2<ons-template id="scheduleList.html"> 3 <ons-page ng-controller="ScheduleListController"> 4 5 <ons-list-header class="person-list-header">スケジュール一覧</ons-list-header> 6 <ons-list> 7 <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="newSchedule in newScheduleList" ng-click="showNewScheduleDetail($index);"> 8 <ons-row> 9 <ons-col> 10 <div class="owner"> 11 {{newSchedule.ScheduleDate | date:'MM年dd月yyyy年'}} 12 </div> 13 <div class="title"> 14 {{newSchedule.ScheduleTitle}} 15 </div> 16 <div class="desc"> 17 {{newSchedule.ScheduleContent}} 18 </div> 19 </ons-col> 20 <ons-col width="40px"></ons-col> 21 </ons-row> 22 </ons-list-item> 23 </ons-list> 24 </ons-page> 25</ons-template>

コードが大変長くなり申し訳ございません。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

違う方法で実装することにいたします。

投稿2017/01/21 12:15

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問