Динамически создавая календарь - PullRequest
0 голосов
/ 23 октября 2019

Я хочу динамически создать календарь с помощью Javascript, но мой браузер показывает только текущий месяц и год, а не таблицу. Я не знаю почему. Я добавил функцию, которая вычисляет день недели с 01.01.0001 (это была суббота). Так как я добавил функцию, браузер не показывает таблицу. Я не могу найти ошибку.

var event_example = "Party";
var place_example = "Munich";

var month_days = ["31","28","31","30","31","30","31","31","30","31","30","31"];
var month_name = ["Januar","Februar","März","April","Mai","Juni","Juli","August",
                  "September","Oktober","November","Dezember"];

var current_date =  new Date();
var current_month = akt_date.getMonth();
var current_year = akt_date.getFullYear();
var current_weekday;

function weekdays() {    
    var start = 5;

    var m = 0;
    var entire_days = 0;
    var entire_years = (current_date.getFullYear() -1 );
    var entire_months = entire_years*12 + (current_date.getMonth()+1);
    // Days since 01.01.0001 (Saturday) 
    for(var q = 0; q<=entire_months;q++) {
        if(m>11) m = 0;
        entire_days += month_days[m];
        m++;
    }

    entire_days -= 11;

    var leap_year = 0;
    for(let s = 0; s <= 1599; s += 4)
    leap_year++;

    for(let s2 = 1600; s2 <= akt_date.getFullYear() -1; s += 4) {
        if(s2 % 4 == 0) {
            leap_year++;
            if(s2 % 100 == 0 && s2 % 400 !== 0) {
                leap_year--;
            }    
        }
    }

    entire_days = entire_days + leap_year + start;

    current_weekday = entire_days % 7;
    return current_weekday;
}

function dates() {
    const tab = document.createElement("table");
    const ausgabe = document.getElementById("content-container");

    tab.style.background="#feff8f";
    tab.style.color="#593309";
    tab.style.borderCollapse="collapse";

    const tabhead = document.createElement("table");

    const current_month = document.createElement("h3");

    var line0 = tabhead.insertRow(0);

    var cell_back = line0.insertCell();
    var cell_headline_month = line0.insertCell();
    var cell_headline_year = line0.insertCell();
    var cell_forward = line0.insertCell();

    cell_headline_month.appendChild(document.createTextNode(month_name[current_month]));                    

    cell_headline_year.appendChild(document.createTextNode(current_year));                                  

    cell_headline_month.style.fontSize="2em";
    cell_headline_month.style.color="#593309";
    cell_headline_year.style.fontSize="2em";
    cell_headline_year.style.color="#593309";


    ausgabe.appendChild(tabhead);
    ausgabe.appendChild(tab);

    var t = new Date();                                                   
    var today = t.getDate();    

    for (let i = 1; i <= month_days[current_weekday]; i++) {

        const line1 = tab.insertRow(-1);

        const cell_date = line1.insertCell();
        const cell_event = line1.insertCell(); 

        const line2 = tab.insertRow(-1);
        const cell_day = line2.insertCell();
        const cell_place = line2.insertCell();

        cell_day.append(document.createTextNode(weekday[current_weekday]));
        cell_place.append(document.createTextNode(place_example));

        cell_date.append(document.createTextNode(i));
        cell_event.append(document.createTextNode(event_example));

        if(today == i) {
            cell_date.style.backgroundColor=  "#E0FFFF";
            cell_event.style.backgroundColor= "#E0FFFF";
            cell_day.style.backgroundColor=   "#E0FFFF";
            cell_place.style.backgroundColor= "#E0FFFF";
        }

        cell_date.style.borderBottom="#593309 1px solid";
        cell_event.style.borderBottom="#593309 1px solid";
        cell_day.style.borderBottom="#593309 3px solid";
        cell_place.style.borderBottom="#593309 3px solid";

        cell_day.style.textAlign="center";
        cell_date.style.textAlign="center";

        cell_date.style.fontSize="2.0em";
        cell_event.style.fontSize="1.5em";
        cell_day.style.fontSize="1.3em";
        cell_place.style.fontSize="1.3em";

        cell_date.style.fontWeight="bold";

        current_weekday++;

        tab.style.width="80%";
        cell_day.style.width="20%";
        cell_date.style.width="20%";
        cell_event.style.width="50%";
        cell_place.style.width="50%";

    } //end of for(i)    

}   
...