Creating a calendar with JSandHtml
Question
I wanted my code to display the calendar after prompting the user to place an input the output should be numbers corresponding to month and days corresponding to Monday to Sunday. I was not able to find out what I am lacking with also am I am still yet to compose a css file is this the reason why It won't show anything on browser / live server in visual studio code? Please help me
This is my html code:
<!DOCTYPE HTML>
<html lang="em">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git Demonstration</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/my.js"></script>
</body>
</html>
This is my java script code:
var inpMonth, inpDay;
inpMonth = prompt("Month 1-12")
inpDay = prompt("Start Day 1-7")
function Calendar(element, month, day) {
const days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
let mName = ''
if (month == 1)
mName = 'JANUARY'
else if (month == 2)
mName = 'FEBRUARY'
else if (month == 3)
mName = 'MARCH'
else if (month == 4)
mName = 'APRIL'
else if (month == 5)
mName = 'MAY'
else if (month == 6)
mName = 'JUNE'
else if (month == 7)
mName = 'JULY'
else if (month == 8)
mName = 'AUGUST'
else if (month == 9)
mName = 'SEPTEMBER'
else if (month == 10)
mName = 'OCTOBER'
else if (month == 11)
mName = 'NOVEMBER'
else if (month == 12)
mName = 'DECEMBER'
else
{
mName = "Invalid Input"
}
let WeekC = 0
let CDays = 1
let Adder = 1
let tblCreate =
`<table>
<tr>
<td colspan = "7"id="month" style="text-align:center; font-size: larger;">
${mName}
</td>
</tr>
<tr>
<th style="color:white; background-color: black; text-align:center;">
SUN
</th>
<th style="text-align:center">
MON
</th>
<th style="color:white; background-color: black; text-align:center">
TUE
</th>
<th style="text-align:center">
WED
</th>
<th style="color:white; background-color: black; text-align:center">
THU
</th>
<th style="text-align:center">
FRI
</th>
<th style="color:white; background-color: black; text-align:center">
SAT
</th>
</tr>`
if(month > 12 || day > 7)
{
element.innerHTML = ('<h3 style="text-align: center; color: red; background-color:black;">Invalid Input!</h3>')
}
else if(month == 0 || day == 0)
element.innerHTML = ('<h3 style="text-align: center; color: red; background-color:black;">Invalid Input!</h3>')
else
{
if(days[month-1] == 31)
{
if(day >= 6)
{
for (let i = 0; i < 42; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
else{
for (let i = 0; i < 35; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
}
else if(days[month-1] == 28)
{
if(day >= 6)
{
for (let i = 0; i < 35; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
else
{
for (let i = 0; i < 28; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
}
else{
if(day >= 6){
for (let i = 0; i < 35; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
else
{
for (let i = 0; i < 35; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
}
tblCreate += '</table>'
element.innerHTML = tblCreate ;
}
}
Calendar(Cal, inpMonth, inpDay)
1 answers
solution1
0 ACCPTED 2021-03-09 14:20:56
It seems you are missing html element in your html code and link to it in javascript.
Add element to your html code like so.
<!DOCTYPE HTML>
<html lang="em">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git Demonstration</title>
</head>
<body>
<div id="calendar-element"></div>
<script src="js/my.js"></script>
</body>
</html>
And add your element link variable.
var inpMonth, inpDay, calendarElement;
inpMonth = prompt("Month 1-12")
inpDay = prompt("Start Day 1-7")
calendarElement = document.getElementById('calendar-element')
/* here is your function */
Calendar(calendarElement, inpMonth, inpDay)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Ideas for creating a Calendar control
creating a calendar in javascript
creating a calendar in javascript / html
Creating a calendar in Javascript (Html)
Creating a calendar in HTML
Problems creating js calendar
Creating a calendar component with moment and react
Full Calendar creating simple event
Creating calendar - restrain number of columns
Using Kendo UI - Creating the Calendar
Related Tags