CODEWITHSUNDEEP
javascripthtml
steven
steven

Reputation: 47

creating a calendar in javascript / html

I'm currently trying to create a calendar that prints the date of today

However, my calendar is still blank

with when I try to print the calendar whole calendar

Because I'm not printing tables through HTML, I was trying to print the table through javascript instead.

var $ = function (id) { return document.getElementById(id); };


var getMonthText = function(currentMonth) {
    if (currentMonth === 0) { return "January"; }
    else if (currentMonth === 1) { return "February"; }
    else if (currentMonth === 2) { return "March"; }
    else if (currentMonth === 3) { return "April"; }
    else if (currentMonth === 4) { return "May"; }
    else if (currentMonth === 5) { return "June"; }
    else if (currentMonth === 6) { return "July"; }
    else if (currentMonth === 7) { return "August"; }
    else if (currentMonth === 8) { return "September"; }
    else if (currentMonth === 9) { return "October"; }
    else if (currentMonth === 10) { return "November"; }
    else if (currentMonth === 11) { return "December"; }
};

var getLastDayofMonth = function(currentMonth) {
    var dt = new Date();
    dt.setMonth(currentMonth +1);
    dt.setDate(0);
    
    return dt.getDate();
    
};

window.onload = function () {
    
    //var year =
    
};
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 360px;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 {
    color: blue;
    margin-bottom: .25em;
}
table {
    border-collapse: collapse;
    border: 1px solid black;
}
td {
    width: 3em;
    height: 3em;
    vertical-align: top;
    padding: 0.5 0 0 0.5;
    border: 1px solid black;
}
    <title>Calendar</title>
    <link rel="stylesheet" href="calendar.css">
    <script src="calendar.js"></script>

<body>
    <main>
        <h1><span id="month_year">&nbsp;</span></h1>

        <table id="calendar">
            <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
            
            
        </table>
    </main>
</body>

Upvotes: 2

Views: 1713

Answers (1)

RobG
RobG

Reputation: 147493

You need to make more of a start on the calendar part, but here's some help with what you have.

The getMonthText function would be better named getMonthName and can be as simple as:

/* Return month name
** @param {number|string} index - integer month number, zero indexed
** @returns {string} Full month name or undefined if index < 0 or > 11.
*/
function getMonthName(index) {
  return ['January','February','March','April','May','June','July',
          'August','September','October','November','December'][index];
}

var index = new Date().getMonth();

console.log(getMonthName(index));

The getLastDayofMonth function should set the date to the first of the month (or any date before 29) before adding a month, since adding 1 month to 31 January returns 2 or 3 March, so you'll get the last day of February (and similarly for any month followed by another month of fewer days), so:

/* Return a date for the last day of the month of the provided date
** @param {Date} date - date to get last day of month for
** @returns {Date} date for last day of month
*/
function getLastDayOfMonth(date) {
  // Copy date so don't modify original, default to today
  var d = date? new Date(date) : new Date();
  // Set to start of month
  d.setDate(1);
  // Add a month and set to last day of previous
  // i.e. set to last day of current month
  d.setMonth(d.getMonth() + 1, 0);
  return d;
}

console.log(getLastDayOfMonth().toString());
console.log(getLastDayOfMonth(new Date(2016,1)).toString());

The rest of your missing function body needs to create cells for each day, then fill them with appropriate values. Happy coding. ;-)

Upvotes: 1

Related Questions