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

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

ただいまの
回答率

89.86%

javascript 万年カレンダー

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,212

nerd

score 32

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'>&laquo;&nbsp;</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'>&nbsp;&raquo;</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 >&nbsp;</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>&nbsp;</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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

XMLHttpRequest は非同期で動くため、CSVが送られてくる前に writeCal(cal_year,cal_month,cal_day); が実行されているのではないでしょうか。
なので function convertCSVtoArray 内で writeCal を呼ぶ実装に変えるのが早いと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/13 00:07

    kei344様

    ご教授誠にありがとうございました。
    まさに、ご指摘のところを変更いたしましたら動作いたしました。

    2日くらい悩んでおりました。
    大変助かりました。

    キャンセル

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

  • ただいまの回答率 89.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる