カレンダーを表示する、iosアプリをXcode/Cordovaで開発しています。
必要な部分は一通り書いたのですが、うまく動きません。
不安に思っていることは、
・APIとの通信の部分と、
・ローカルストレージに格納できるデータに変換しないといけないかもしれない
ということです。
・通信部分の記述はあっていますでしょうか。
・ローカルストレージに保存するときと、
ローカルストレージから取り出して、取り出したデータ配列をinArrayする時に、データ型の変換は必要でしょうか?
APIはJSONファイルです。
まだ知識が浅いので、間違った言葉を使っていたら、
申し訳ありません。
質問でおかしいところがあれば、教えてください。
[仕様]
・土日祝の文字色を赤く。
・今日の文字色を青く。
・1年分だけの祝日データを決められたタイミングで一括取得し、ローカルストレージに保存。
・オフラインでも、ローカルストレージの祝日データを反映。
jsでAPIと通信して値を取得したいのですが、
下記のコードでどこが間違っているでしょうか。
※APIに値を入れる作業(ターミナル)は終了しています。
※日付固定なので、年によって日付が変わるなどの配慮はいりません。
■□■□■□■□■□■□■□■□■□■□■□■□■
■APIの中身
https://gyazo.com/0e91174714160226dc4fd921c7f1a9c0
html
1<h3 id="thismonth">0年00月</h3> 2<table id="calender"></table> 3
■calendar_api.js
javascript
1//コンストラクタ 2function calendarAPI() { 3 this.baseURL = "http://calendar.jp/"; 4 this.holiday ="holiday/"; 5} 6 7//祝日データ取得 APIに通信してローカルストレージに保存 8calendarAPI.prototype.getHoliday = function(){ 9 $.ajax({ 10 type: "POST", 11 url: this.baseURL + this.holiday, 12 dataType: 'json', 13 success: function (data, dataType) { 14 calendarLocalStorage.saveHoliday(arrayHoliday); 15 callback("ok"); 16 }, 17 error: function (XMLHttpRequest, textStatus, errorThrown) { 18 return; 19 }, 20 complete: function (XMLHttpRequest, textStatus) { 21} 22}); 23}; 24
■local_storage.js
javascript
1//localstorageに保存・localstorageから取得するための関数定義 2saveHoliday: function(apiHoliday){ 3 localStorage.setItem("apiHoliday",apiHoliday); 4 }, 5getHoliday: function() { 6 if(localStorage.getItem("apiHoliday") === null){ 7 return 0; 8 }else{ 9 return localStorage.getItem("apiHoliday"); 10 } 11}, 12
■common.js(共通関数など)
javascript
1//TOPページを表示したときとリセットしたときに、APIから祝日データを取得する 2calendarAPI.getHoliday(calendarLocalStorage.getHoliday(), calendarLocalStorage.getToken(), function(data) { 3 check = data; 4 debugDate(); 5 if (check === "err") { 6 callback(check); 7 return; 8 } 9
■TopPage.js
javascript
1var today = new Date(); 2//4ケタの年を取得する 3var year = String(today.getFullYear()); 4//2桁の月を取得する 5var month = String(100 + today.getMonth() + 1).substr(1, 2); 6//2桁の日を取得する 7var day = String(100 + today.getDate()).substr(1, 2); 8 9var html = ""; 10html += year + '年' + month + '月'; 11$("#thismonth").html(html); 12 13 14 15//1日の曜日データ取得 16var KongetuNoTsuitachi = new Date('2015/12/1'); 17//1日が何曜日か 18var blank = KongetuNoTsuitachi.getDay(); 19console.log(blank); 20 21var html; 22html += '<thead><tr><th class="sun">日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th class="sat">土</th></tr></thead>'; 23 24html += '<tbody>'; 25 26//1weekのため 27var count = 0; 28 29 30 31//ここから1日の曜日までの空欄 32for (var i = 0; i < blank; i++) { 33 34 //セルの数が7個になったら改行 35 if (count % 7 == 0) { 36 html += '<tr>'; 37 } 38 39 html += '<td></td>'; 40 count++; 41} 42 43 44 45// 現在日を取得 46var now = new Date(); 47// 来月 48var monthOfNext = now.getMonth() + 1; 49 50if (monthOfNext == 12) { // 来月が13月になってしまったら、 51 monthOfNext = 0; // 1月とする 52} 53 54// 来月の0日を調べると、今月の末日がわかる 55var yokugetsunozeronichi = new Date(now.getFullYear(), monthOfNext, 0); 56var KongetuNoNissu = yokugetsunozeronichi.getDate(); 57console.log(KongetuNoNissu); 58 59//ここから祝日の対応 60var arrayHoliday = new Array(); //new必要? 61//arrayHoliday = ["20150101","20151223"]; 62arrayHoliday = getHoliday(apiHoliday); //ここが自信ないです 63 64 65//日数分回す 66for (i = 1; i <= KongetuNoNissu; i++) { 67 if (count % 7 == 0) { 68 html += '</tr></tr>'; 69 } 70 //回しているときに年月日を取得 71 var holiday = year + month + (String(100 + i).substr(1, 2)); 72 console.log(holiday); 73 74//祝日か祝日じゃないか、さらに今日か今日ではないかの判定 75//祝日の時 76 if ($.inArray(holiday, arrayHoliday) != -1){ 77 //今日 78 if((year + month + day)==(year + month + i)){ 79 html += "<td class='holiday today'>" + i + "</td>" ; 80 } 81 //今日じゃない 82 else{ 83 html += '<td class="holiday">' + i + "</td>" ; 84 } 85 count++; 86//祝日じゃない場合 87 } else { 88 //今日 89 if((year + month + day)==(year + month + i)){ 90 html += "<td class='today'>" + i + "</td>"; 91 } 92 //今日じゃない 93 else{ 94 html += "<td>" + i + "</td>"; 95 } 96 count++; 97 } 98} 99 100//最後の日から土曜までの空欄 101while (count % 7 != 0) { 102 103 html += '<td></td>'; 104 count++; 105 if (count % 7 == 0) { 106 html += '</tr>'; 107 108 } 109 110} 111 112html += '</tbody>' 113 114$("#calender").append(html); 115}
■CSS
css
1td { 2 background-color: white; 3 height: 20px; 4 color: black; 5} 6 7td:first-child, 8td:last-child, 9.holiday{ 10 color: red; 11} 12 13.today{ 14 color:blue; 15} 16 17
■□■□■□■□■□■□■□■□■□■□■□■□■
どんな些細なことでも良いので、アドバイスなどいただけると助かります。
以上、宜しくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。