Question: In this exercise, youll create an application that displays a calendar for the current month: Note: To build this calendar, youre going to need the
In this exercise, youll create an application that displays a calendar for the current month:
Note: To build this calendar, youre going to need the getDay() method of a Date object. This method returns the number of the day of the week (0 for Sunday, 1 for Monday, etc.).
2. In the HTML file, note the span element within the h1 element that will
display the month name and year. Note also the table element that contains
one row. To build the calendar, you need to add rows to this table after the row that it already contains.
3. In the CSS file, note the style rule for the td elements of the table. The rules in this set will format the calendar as shown above.
4. In the JavaScript file, note the ready event handler with two functions. A getMonthText() function that accepts the number for a month and returns the month name in text. And the start of a getLastDayofMonth() function.
5. Write the code for the getLastDayofMonth() function. It should use the number passed in the currentMonth parameter to calculate and return the last day of the current month. See figure 13-10 for ideas on how to code this.
6. In the ready event handler, write the code that gets and displays the name of the current month and the current year above the month table.
7. In the ready event handler, write the code that loops through the days of the month to create the rows for the calendar. Remember to deal with the blank dates that can occur at the beginning of the first week and the end of the last week of the month. Use a tr element for each new row and td elements within the rows for the days of the months. To display the rows, use the jQuery html() method of the calendar table, but remember that the new rows have to go after the row thats already in the HTML
HTML
html> <html> <head> <title>Calendartitle> <link rel="stylesheet" href="calendar.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js">script> <script src="calendar.js">script> head> <body> <main> <h1><span id="month_year"> span>h1> <table id="calendar"> <tr><th>Sunth><th>Month><th>Tueth><th>Wedth><th>Thuth><th>Frith><th>Satth>tr> table> main> body> html>
CSS
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; } JavaScript
"use strict"; $(document).ready(function(){ 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(); }; var today = new Date(); var thisMonth = today.getMonth(); // display month and year $("#month_year").text( getMonthText(thisMonth) + " " + today.getFullYear() ); var lastDayofMonth = getLastDayofMonth(thisMonth); var rows = $("#calendar").html(); var date; // the current date; eg, the 1st, the 22nd, etc var day; // the day of the week; eg, Sat, Sun, etc var start; // loop through the number of days in the month for (var i = 0; i < lastDayofMonth; i++) { // add one to index and use that number as current date today.setDate(i + 1); // get the current date and day date = today.getDate(); day = today.getDay(); // start a new row if it's the first of the month or the day is Sunday if (date === 1 || day === 0) { rows = rows.concat(""); } // add blank dates at the beginning of the calendar until // you get to the day of the week the month starts on if (date === 1 ) { start = 0; while (start < day) { rows = rows.concat("", date, " "); // add blank dates at the end of the calendar until // you get to the last day of the week the month ends in if (date === lastDayofMonth) { start = day; while (start < 6) { rows = rows.concat(" "); } } // display calendar rows $("#calendar").html(rows); });
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help