Javascript にて万年カレンダーを作成しております。
目的
前任者作成の万年カレンダーJSを改造している形
CSVを呼び込み休日として表示
発生している問題・エラーメッセージ
休日の設定として現在holyday["2016/5/24"] = 0;
としてありました。
これをCSVデータを呼び込みholyday
配列に追加
var req = new XMLHttpRequest();
req.open("get", "js/date.csv", true);
req.send(null);
req.onload = function(){
convertCSVtoArray(req.responseText);
}
}
function convertCSVtoArray(str){
var tmp = str.split(",");
for(var i=0;i<tmp.length;++i){
holyday[tmp[i]] = 0;
}
}
getCSV();
その後
var cal_day_match = year + "/" + month + "/" + cal_day_cnt;
if(holyday[cal_day_match] != undefined){
dayClass = ' class="holyday"';
}
としていますがうまく適応されない感じです。
CSV
2016/5/13,2016/5/18,2016/5/16,2016/5/23
js
<!--
var classNames = new Array('holyday','saleday','mailday');
var holyday = new Object();
holyday["2016/5/24"] = 0;
holyday["2016/5/25"] = 0;
var today = new Date();
var cal_year = today.getYear();
var cal_month = today.getMonth() + 1;
var cal_day = today.getDate();
if (cal_year < 1900) cal_year += 1900;
document.write("<div id='calendar'></div>");
var cal = document.getElementById("calendar");
var defaultBackgroundColors = new Object();
var to_year = cal_year;
var to_month = cal_month;
var to_day = cal_day;
function currentCal(){
cal_year = to_year;
cal_month = to_month;
cal_day = to_day;
writeCal(cal_year,cal_month,cal_day);
}
function prevCal(){
cal_month -= 1;
if(cal_month < 1){
cal_month = 12;
cal_year -= 1;
}
writeCal(cal_year,cal_month,0);
}
function nextCal(){
cal_month += 1;
if(cal_month > 12){
cal_month = 1;
cal_year += 1;
}
writeCal(cal_year,cal_month,0);
}
function getWeek(year,month,day){
if (month == 1 || month == 2) {
year--;
month += 12;
}
var week = Math.floor(year + Math.floor(year/4) - Math.floor(year/100) + Math.floor(year/400) + Math.floor((13 * month + 8) / 5) + day) % 7;
return week;
}
function getCSV(){
var req = new XMLHttpRequest();
req.open("get", "js/date.csv", true);
req.send(null);
req.onload = function(){
convertCSVtoArray(req.responseText);
}
}
function convertCSVtoArray(str){
var tmp = str.split(",");
for(var i=0;i<tmp.length;++i){
holyday[tmp[i]] = 0;
}
}
getCSV();
function writeCal(year,month,day){
var calendars = new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
var weeks = new Array("sun","mon","tue","wed","thu","fri","sat");
var monthName = new Array('none','1','2','3','4','5','6','7','8','9','10','11','12');
var cal_flag = 0;
if(year % 100 == 0 || year % 4 != 0){
if(year % 400 != 0){
cal_flag = 0;
}
else{
cal_flag = 1;
}
}
else if(year % 4 == 0){
cal_flag = 1;
}
else{
cal_flag = 0;
}
calendars[2] += cal_flag;
var cal_start_day = getWeek(year,month,1);
var cal_tags = "<table border='0' cellspacing='0' cellpadding='0' align='center'><tr height='10'></tr><tr><td><span onClick='prevCal();' class='arrow'>« </span></td>";
cal_tags += "<td height='25' align='center' valign='middle' bgcolor='#000000'><span class='now_month'>" + monthName[month] + "</span></td>";
cal_tags += "<td><span onClick='nextCal();' class='arrow'> »</span></td></tr><tr height='10'></tr></table>" ;
cal_tags += "<table border='0' cellspacing='0' cellpadding='0' class='calendar'>";
cal_tags += "<tr class='headline'>";
for(var i=0;i<weeks.length;i++){
if(i==0){cal_tags += "<td class='dsun'>" + weeks[i] + "</td>";}
else if( i==6){cal_tags += "<td class='dsat'>" + weeks[i] + "</td>";}
else{
cal_tags += "<td class='dnormal'>" + weeks[i] + "</td>";
}
}
cal_tags += "</tr><tr>";
for(var i=0;i < cal_start_day;i++){
cal_tags += "<td > </td>";
}
//main
for(var cal_day_cnt = 1;cal_day_cnt <= calendars[month];cal_day_cnt++){
var cal_day_match = year + "/" + month + "/" + cal_day_cnt;
var dayClass = "";
if(holyday[cal_day_match] != undefined){
dayClass = ' class="holyday"';
}
else if(cal_day_cnt == day){
dayClass = ' class="Today"';
}
else if(cal_start_day == 0){
dayClass = ' class="Sun"';
}
else if(cal_start_day == 6){
dayClass = ' class="Sat"';
}
cal_tags += "<td "+dayClass+">" + cal_day_cnt + "</td>";
if(cal_start_day == 6){
cal_tags += "</tr>";
if(cal_day_cnt < calendars[month]){
cal_tags += "<tr>";
}
cal_start_day = 0;
}
else{
cal_start_day++;
}
}
while(cal_start_day <= 6 && cal_start_day != 0){
cal_tags += "<td> </td>";
if(cal_start_day == 6){
cal_tags += "</tr>";
}
cal_start_day++;
}
cal_tags += "</table>";
cal.innerHTML = cal_tags;
}
writeCal(cal_year,cal_month,cal_day);
//-->
何がいけないのかわからなくなってしまっております。
初歩的なご質問で恐縮ではありますがご教授お願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
XMLHttpRequest
は非同期で動くため、CSVが送られてくる前に writeCal(cal_year,cal_month,cal_day);
が実行されているのではないでしょうか。
なので function convertCSVtoArray
内で writeCal
を呼ぶ実装に変えるのが早いと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/13 00:07
ご教授誠にありがとうございました。
まさに、ご指摘のところを変更いたしましたら動作いたしました。
2日くらい悩んでおりました。
大変助かりました。