Help fix my Java Code: This is my current calendar:[ fig : 1] --------------------------------- Display an annual calendar in the header section place buttons that will move forward and backward by a year place a button in the header that will allow the user to return to the current day (or current month What the calendar needs to look like: [ fig 2 ] My current code is in seperate files the js file, html file, and css file. The code needs to stay in the seperate files. How do I modify my current code to display the new calendar? js file code: var thisDay = new Date(); var currentDay = thisDay; /* Write the calendar to the element with the id "calendar" */ document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay); function createAnnualCalendar(calDate) { var calendarHTML = ""; calendarHTML += putControlBar(); calendarHTML += ""; for (var i = 0; i < 12; i++) { calDate.setMonth(i); calendarHTML += "" + createCalendar(calDate) + ""; } calendarHTML += ""; return calendarHTML; } function createCalendar(calDate) { var calendarHTML = ""; calendarHTML += calCaption(calDate); calendarHTML += calWeekdayRow(); calendarHTML += calDays(calDate); return calendarHTML; } function calCaption(calDate) { var monthName = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var thisMonth = calDate.getMonth(); var thisYear = calDate.getFullYear(); return "" + monthName[thisMonth] + " " + thisYear + ""; } function calWeekdayRow() { var dayName = ["S", "M", "T", "W", "T", "F", "S"]; var rowHTML = ""; for (var i = 0; i < dayName.length; i++) { rowHTML += "" + dayName[i] + ""; } rowHTML += ""; return rowHTML; } function daysInMonth(calDate) { var dayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var thisYear = calDate.getFullYear(); var thisMonth = calDate.getMonth(); if (thisYear % 4 === 0) { dayCount[1] = 29; if ((thisYear % 100 != 0) || (thisYear % 400 === 0)) { dayCount[1] = 29; } } return dayCount[thisMonth]; } function calDays(calDate) { var day = new Date(calDate.getFullYear(), calDate.getMonth(), 1); var weekDay = day.getDay(); var htmlCode = ""; for (var i = 0; i < weekDay; i++) { htmlCode += "" } var totalDays = daysInMonth(calDate); var highlightDay = calDate.getDate(); for (var i = 1; i <= totalDays; i++) { day.setDate(i); weekDay = day.getDay(); if (weekDay === 0) { htmlCode += ""; } if (i === highlightDay) { if (weekDay === 0 || weekDay === 6) { htmlCode += "" + i + ""; } else { htmlCode += "" + i + ""; } } else { if (weekDay === 0 || weekDay === 6) { htmlCode += "" + i + ""; } else { htmlCode += "" + i + ""; } } if (i == totalDays) { if (weekDay < 6) { for (var x = weekDay; x < 6; x++) { htmlCode += ""; } } } if (weekDay === 6) htmlCode += ""; } return htmlCode; } function putControlBar() { var cbarHtml = ""; cbarHtml += " "; cbarHtml += " Previous Year "; cbarHtml += " < "; cbarHtml += " Today "; cbarHtml += " > "; cbarHtml += " Next Year "; cbarHtml += " "; return cbarHtml; } function moveYearBackward() { var curYear = currentDay.getFullYear(); var newDate = new Date(curYear - 1, 0, 1); currentDay = newDate; document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay); } function moveYearForward() { var curYear = currentDay.getFullYear(); var newDate = new Date(curYear + 1, 0, 1); currentDay = newDate; document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay); } function moveToCurrent() { currentDay = new Date(); document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay); } html file code: css file code: td, th { text-align: center; } caption { color: white; background-color: black; } #controlbar { background-color: antiquewhite; width: 200px; } #calendar_table { background-color: antiquewhite; width: 200px; } #calendar_today { color: red; background-color: powderblue; } .calendar_weekdays { background-color: grey; color: white; } .weekend { background-color: powderblue; } .padcell { background-color: antiquewhite; } caption { color: white; background-color: black; padding: 0; margin: 0; }
Help fix my Java Code:
This is my current calendar:[ fig : 1]
---------------------------------
- Display an annual calendar
- in the header section place buttons that will move forward and backward by a year
- place a button in the header that will allow the user to return to the current day (or current month
What the calendar needs to look like: [ fig 2 ]
My current code is in seperate files the js file, html file, and css file. The code needs to stay in the seperate files. How do I modify my current code to display the new calendar?
js file code:
var thisDay = new Date();
var currentDay = thisDay;
/* Write the calendar to the element with the id "calendar" */
document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay);
function createAnnualCalendar(calDate) {
var calendarHTML = "";
calendarHTML += putControlBar();
calendarHTML += "<table id='calendar_table'>";
for (var i = 0; i < 12; i++) {
calDate.setMonth(i);
calendarHTML += "<tr><td>" + createCalendar(calDate) + "</td></tr>";
}
calendarHTML += "</table>";
return calendarHTML;
}
function createCalendar(calDate) {
var calendarHTML = "";
calendarHTML += calCaption(calDate);
calendarHTML += calWeekdayRow();
calendarHTML += calDays(calDate);
return calendarHTML;
}
function calCaption(calDate) {
var monthName = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var thisMonth = calDate.getMonth();
var thisYear = calDate.getFullYear();
return "<caption>" + monthName[thisMonth] + " " + thisYear + "</caption>";
}
function calWeekdayRow() {
var dayName = ["S", "M", "T", "W", "T", "F", "S"];
var rowHTML = "<tr>";
for (var i = 0; i < dayName.length; i++) {
rowHTML += "<th class='calendar_weekdays'>" + dayName[i] + "</th>";
}
rowHTML += "</tr>";
return rowHTML;
}
function daysInMonth(calDate) {
var dayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var thisYear = calDate.getFullYear();
var thisMonth = calDate.getMonth();
if (thisYear % 4 === 0) {
dayCount[1] = 29;
if ((thisYear % 100 != 0) || (thisYear % 400 === 0)) {
dayCount[1] = 29;
}
}
return dayCount[thisMonth];
}
function calDays(calDate) {
var day = new Date(calDate.getFullYear(), calDate.getMonth(), 1);
var weekDay = day.getDay();
var htmlCode = "<tr>";
for (var i = 0; i < weekDay; i++) {
htmlCode += "<td class='padcell'></td>"
}
var totalDays = daysInMonth(calDate);
var highlightDay = calDate.getDate();
for (var i = 1; i <= totalDays; i++) {
day.setDate(i);
weekDay = day.getDay();
if (weekDay === 0) {
htmlCode += "<tr>";
}
if (i === highlightDay) {
if (weekDay === 0 || weekDay === 6) {
htmlCode += "<td class='calendar_dates weekend' id='calendar_today'>" + i + "</td>";
} else {
htmlCode += "<td class='calendar_dates' id='calendar_today'>" + i + "</td>";
}
} else {
if (weekDay === 0 || weekDay === 6) {
htmlCode += "<td class='calendar_dates weekend'>" + i + "</td>";
} else {
htmlCode += "<td class='calendar_dates'>" + i + "</td>";
}
}
if (i == totalDays) {
if (weekDay < 6) {
for (var x = weekDay; x < 6; x++) {
htmlCode += "<td class='padcell'></td>";
}
}
}
if (weekDay === 6) htmlCode += "</tr>";
}
return htmlCode;
}
function putControlBar() {
var cbarHtml = "";
cbarHtml += "<table id='controlbar'> <tr>";
cbarHtml += "<td> <button id='prevYearBtn' onclick='moveYearBackward()'>Previous Year</button> </td>";
cbarHtml += "<td> <button id='prevMonthBtn' onclick='moveMonth(-1)'><</button> </td>";
cbarHtml += "<td> <button id='todayBtn' onclick='moveToCurrent()'>Today</button> </td>";
cbarHtml += "<td> <button id='nextMonthBtn' onclick='moveMonth(1)'>></button> </td>";
cbarHtml += "<td> <button id='nextYearBtn' onclick='moveYearForward()'>Next Year</button> </td>";
cbarHtml += "</tr> </table>";
return cbarHtml;
}
function moveYearBackward() {
var curYear = currentDay.getFullYear();
var newDate = new Date(curYear - 1, 0, 1);
currentDay = newDate;
document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay);
}
function moveYearForward() {
var curYear = currentDay.getFullYear();
var newDate = new Date(curYear + 1, 0, 1);
currentDay = newDate;
document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay);
}
function moveToCurrent() {
currentDay = new Date();
document.getElementById("calendar").innerHTML = createAnnualCalendar(currentDay);
}
html file code:
<html>
<head>
<link href="calendar.css" rel="stylesheet" />
<script src="newcalendar.js" defer></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
css file code:
td, th {
text-align: center;
}
caption {
color: white;
background-color: black;
}
#controlbar {
background-color: antiquewhite;
width: 200px;
}
#calendar_table {
background-color: antiquewhite;
width: 200px;
}
#calendar_today {
color: red;
background-color: powderblue;
}
.calendar_weekdays {
background-color: grey;
color: white;
}
.weekend {
background-color: powderblue;
}
.padcell {
background-color: antiquewhite;
}
caption {
color: white;
background-color: black;
padding: 0;
margin: 0;
}
![Previous
Year
1
- con
8
SMTWTFS
2 3
4 5 6 7
9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
S
M T
Today
January 2023
February 2023
March 2023
16
April 2023
May 2023
June 2023
July 2023
August 2023
September 2023
October 2023
November 2023
December 2023
Next
Year
W T F S
12
3 4
7 8
9 10 11
5
12
13 14 15
16 17 18
19 20 21 22 23 24 25
26 27 28
MIS
S M T W
T F S
1
2 3 4
5
6 7 8 9
10 11
12
13
14
15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
24 25 26 27 28 29
23
30
SMTWTF S
1 2
3 4 5 6
7
8 9
10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
30 31](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F3cfaf90d-828d-4289-8e45-bdb64b628c6e%2F7f7c8e9d-10f6-42f5-aa2d-867364f6282c%2F9ke5dcl_processed.png&w=3840&q=75)
![S
M
T
S
1
2 3 4
5
6
7
8
9
10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29
30 31
7
13 14
No Wa
May
S M T W
T
F
S
1
2
3 4
5
8
9
10 11 12
15
16 17 18 19
22 23 24 25 26
29 30
31
6
20 21
27 28
S
NƠ
M
January
2 3
T W
F
9 10
16 17
4
5
11 12
18 19
23 24 25 26 27 28 29
30
September
T W T F S
1
6
7 8
13
14 15
20 21 22
February
S M T W T
1
7
8
14 15
4 5 6
11 12 13
18 19 20 21
25
26 27 28
3 4 5
6
11 12 13
10
17
18 19 20
24 25 26 27
June
S M T W T F
S
1
2
7
8
9
14 15 16
21 22 23
28 29 30
S M T
1
2
7
8
9
14 15 16
21 22 23
2
28 29
2
2018
F
S
2 3
9
10
16
17
22 23
24
October
W
T
F
S
3 4
5
6
10 11 12 13
17
18 19 20
25 26 27
24
30 31
March
S M T W T F
1
2
7 8
9
14
15 16
21
22 23
28 29 30
4 5 6
11 12 13
18 19 20
25
26 27
July
W
F
150
6
s
S M T
T
S
1 2 3
4
5
7
9 10
11 12
13 14
8
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
3
10
4 5 6 7
13 14
11 12
18 19
25 26
20 21
27 28 29 30
0
17
24
31
November
S M T W T
F
1
2
8 9 10
15 16 17
22 23 24
S
3
S
1
M T
2
3
9
10
15
16 17 18 19
22 23 24 25 26
29 30
00
S
S
April
W T F S
NOGM8
T
F
2
3 4
5 6 7 8
9
10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
27 28 29 30 31
26
16
4 5
11 12
M
August
M T W
1
6 7
13 14
20 21
27 28
S
1
3
4 5 6 7
8
10 11 12 13 14
15
17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
December
T W T F
s](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F3cfaf90d-828d-4289-8e45-bdb64b628c6e%2F7f7c8e9d-10f6-42f5-aa2d-867364f6282c%2Fztmefjq_processed.png&w=3840&q=75)
![](/static/compass_v2/shared-icons/check-mark.png)
Step by step
Solved in 5 steps with 8 images
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
![C How to Program (8th Edition)](https://www.bartleby.com/isbn_cover_images/9780133976892/9780133976892_smallCoverImage.gif)
![Database Systems: Design, Implementation, & Manag…](https://www.bartleby.com/isbn_cover_images/9781337627900/9781337627900_smallCoverImage.gif)
![Programmable Logic Controllers](https://www.bartleby.com/isbn_cover_images/9780073373843/9780073373843_smallCoverImage.gif)