CODEWITHSUNDEEP
javascripthtmlinnerhtml
user1988336
user1988336

Reputation:

Show tables in calendar

I am new to JavaScript, and for a class project, we need to make a calendar for 2017. All the values are permanently set since we only care about 2017. Here is what I have so far and when I try to run this, all that I get to show up is the footer. Why won't my tables show up?

HTML- 

<html>
    <head>
        <meta charset="utf-8" name="viewport" content="width=device-width,    initial-scale=1.0">
        <title>2017 Calendar</title>
        <link href="../css/sites.css" rel="stylesheet">
        <script src="../js/calendar.js"></script>
    </head>

    <body id="index-body">
        <header>
            <div></div>
            <nav></nav>
        </header>

        <main id="index-main">
            <div id = "calendar">
            </div>
        </main>

        <footer>Copyright &copy;  2017  CS-234 </footer>

    </body>
</html>

JS-

// sets up the days of the week in an array
 var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",      "Friday", "Saturday"];

// sets up the calendar array with all 12 months
var calendarJSON =
    '{' +
    '"calendar:": [' +
    '{"month": "January", "days": 31, "start": "Sunday", "specials": ""},' +
    '{"month": "February", "days": 28, "start": "Wednesday", "specials": ""},' +
    '{"month": "March", "days": 31, "start": "Wednesday", "specials": ""},' +
    '{"month": "April", "days": 30, "start": "Saturday", "specials": ""},' +
    '{"month": "May", "days": 31, "start": "Monday", "specials": ""},' +
    '{"month": "June", "days": 30, "start": "Thursday", "specials": ""},' +
    '{"month": "July", "days": 31, "start": "Saturday", "specials": ""},' +
    '{"month": "August", "days": 31, "start": "Tuesday", "specials": ""},' +
    '{"month": "September", "days": 30, "start": "Friday", "specials": ""},' +
    '{"month": "October", "days": 31, "start": "Sunday", "specials": ""},' +
    '{"month": "November", "days": 30, "start": "Wednesday", "specials": ""},' +
    '{"month": "December", "days": 31, "start": "Friday", "specials": ""}' +
    ']' +
    '}';


var calendarJS = JSON.parse(calendarJSON);

var current = new Date();
var currentMonth = current.getMonth();
var currentDay = current.getDate();

window.onload = function () {
    for (var i = 0; i < 12; i++) {
        var newCalendar = create_calendar();
        document.getElementById("calendar").appendChild(newCalendar);
    }
}

function create_calendar() {
    //getting the starting day of the week and the amount of days in the month
    var startDay = daysOfTheWeek.indexOf(calendarJS.calendar[i].start);
    var ThisMonthDays = calendarJS.calendar[i].days;

    //creating the table
    var table = document.createElement('table');
    var th = document.createElement('th');
    th.innerHTML = calendarJS.calendar[i].month;

    //Row for days
    var tr = document.createElement('tr');
    for (var a = 0; a < 7; a++) {
        var td = document.createElement('td');
        td.innerHTML = "SMTWTFS"[a];
        tr.appendChild(td);
    }
    table.appendChild(tr);

    //loops for the first row of the month
    var tr = document.createElement('tr');
    var x;
    var spaces = 0;
    for (x = 0; x < 7; x++) {
        if (x == startDay) {
            break;
        }
        var td = document.createElement('td');
        td.innerHTML = "";
        tr.appendChild('td');
        spaces++;
    }
    var dayNumber = 1;
    for (; x < 7; x++) {
        var td = document.createElement('td');
        td.innerHTML = dayNumber;
        dayNumber++;
        tr.appendChild(td);
    }
    table.appendChild(tr);

    var daysLeft = ThisMonthDays - spaces;
    var weeksLeft = math.ceil(daysLeft / 7);

    //for loop for the rest of the days
    for (var w = 0; w < weeksLeft; w++) {
        var tr = document.createElement('tr');
        for (var h = 0; h < 7; h++) {
            if (dayNumber > ThisMonthDays) {
                table.appendChild(tr);
                return table;
            }
            var td = document.createElement('td');
            td.innerHTML = dayNumber;
            dayNumber++;
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
}

Upvotes: 1

Views: 77

Answers (1)

Alexander Nied
Alexander Nied

Reputation: 13633

You had a bunch of problems-- I fixed four of them and got stuff starting to load on the screen. I added a comment around each one and will provide a little explanation. Past that, you've got to pick up the troubleshooting for yourself for a bit :)

  1. You tried to leverage the i you defined in your onload inside of create_calendar, but it is a completely different function scope with no access to i. So I passed it as an argument.
  2. You had defined the property in calendarJSON as calendar: instead of calendar
  3. You tried to reference the Math object as math
  4. You at one point passed the string 'td' when you meant to pass a variable called td.

Point of advice-- look in the console for errors and learn to trace them. Also, in the Chrome dev tools' "Sources" panel, you can click the pause button in the octogon to cause the code to pause right before an error is about to occur, and try to suss out what is going wrong.

Good luck!

// sets up the days of the week in an array
 var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",      "Friday", "Saturday"];

// sets up the calendar array with all 12 months
var calendarJSON =
    '{' +
    '"calendar": [' + // you had this as 'calendar:'
    '{"month": "January", "days": 31, "start": "Sunday", "specials": ""},' +
    '{"month": "February", "days": 28, "start": "Wednesday", "specials": ""},' +
    '{"month": "March", "days": 31, "start": "Wednesday", "specials": ""},' +
    '{"month": "April", "days": 30, "start": "Saturday", "specials": ""},' +
    '{"month": "May", "days": 31, "start": "Monday", "specials": ""},' +
    '{"month": "June", "days": 30, "start": "Thursday", "specials": ""},' +
    '{"month": "July", "days": 31, "start": "Saturday", "specials": ""},' +
    '{"month": "August", "days": 31, "start": "Tuesday", "specials": ""},' +
    '{"month": "September", "days": 30, "start": "Friday", "specials": ""},' +
    '{"month": "October", "days": 31, "start": "Sunday", "specials": ""},' +
    '{"month": "November", "days": 30, "start": "Wednesday", "specials": ""},' +
    '{"month": "December", "days": 31, "start": "Friday", "specials": ""}' +
    ']' +
    '}';


var calendarJS = JSON.parse(calendarJSON);

var current = new Date();
var currentMonth = current.getMonth();
var currentDay = current.getDate();

window.onload = function () {
    for (var i = 0; i < 12; i++) {
        var newCalendar = create_calendar(i);
        document.getElementById("calendar").appendChild(newCalendar);
    }
}

function create_calendar(i) { // is is not available here unless you pass it in
    //getting the starting day of the week and the amount of days in the month
    var startDay = daysOfTheWeek.indexOf(calendarJS.calendar[i].start);
    var ThisMonthDays = calendarJS.calendar[i].days;

    //creating the table
    var table = document.createElement('table');
    var th = document.createElement('th');
    th.innerHTML = calendarJS.calendar[i].month;

    //Row for days
    var tr = document.createElement('tr');
    for (var a = 0; a < 7; a++) {
        var td = document.createElement('td');
        td.innerHTML = "SMTWTFS"[a];
        tr.appendChild(td);
    }
    table.appendChild(tr);

    //loops for the first row of the month
    var tr = document.createElement('tr');
    var x;
    var spaces = 0;
    for (x = 0; x < 7; x++) {
        if (x == startDay) {
            break;
        }
        var td = document.createElement('td');
        td.innerHTML = "";
        tr.appendChild(td); // shouldn't have been wrapped in quotes
        spaces++;
    }
    var dayNumber = 1;
    for (; x < 7; x++) {
        var td = document.createElement('td');
        td.innerHTML = dayNumber;
        dayNumber++;
        tr.appendChild(td);
    }
    table.appendChild(tr);

    var daysLeft = ThisMonthDays - spaces;
    var weeksLeft = Math.ceil(daysLeft / 7); // should be Math, not math

    //for loop for the rest of the days
    for (var w = 0; w < weeksLeft; w++) {
        var tr = document.createElement('tr');
        for (var h = 0; h < 7; h++) {
            if (dayNumber > ThisMonthDays) {
                table.appendChild(tr);
                return table;
            }
            var td = document.createElement('td');
            td.innerHTML = dayNumber;
            dayNumber++;
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
}
<html>
    <head>
        <meta charset="utf-8" name="viewport" content="width=device-width,    initial-scale=1.0">
        <title>2017 Calendar</title>
        <link href="../css/sites.css" rel="stylesheet">
    </head>

    <body id="index-body">
        <header>
            <div></div>
            <nav></nav>
        </header>

        <main id="index-main">
            <div id = "calendar">
            </div>
        </main>

        <footer>Copyright &copy;  2017  CS-234 </footer>

    </body>
</html>

Upvotes: 1

Related Questions