We Keep Coding

Open a Comment section when pressing a date in a calendar

I have made a Calendar and a Comment section, and my goal is to open the comment section when pressing a date, and make the date change colour when a comment is witten on a certain date.
I will later on work on the backend to be able to manage all the comments, so they stay on the set day. Now Im only worried about opening the comments.
Do I need to make all the items into buttons for this to work, or is it possible with js?
<div class="calendar__container">
<div class="calendar__wrapper">
<header>
<p class="current-date"></p>
<div class="icons">
<span id="prev" class="material-symbols-rounded">❮</span><span id="next" class="material-symbols-rounded">❯</span>
</div>
</header>
<div class="calendar">
<ul class="weeks">
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
<li>Sun</li>
</ul>
<ul class="days">
<li class="inactive">9</li>
<li class="active">10</li>
<li>11</li>
<li>12</li>`your text`
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
</ul>
</div>
</div>
<div class="comment__container">
<div class="comment__main">
<h2>Plan Your days</h2>
<form>
<textarea placeholder="Your Task"></textarea>
<div class="btn">
<input type="submit" value="Add Task">
<button>Cancel</button>
</div>
</form>
</div>
</div>
//Calendar and Comment JS//
const daysTag = document.querySelector(".days"),
currentDate = document.querySelector(".current-date"),
prevNextIcon = document.querySelectorAll(".icons span");
let date = new Date(),
currYear = date.getFullYear(),
currMonth = date.getMonth();
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const renderCalendar = () => {
let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(),
lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(),
lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(),
lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate();
let liTag = "";
for (let i = firstDayofMonth; i > 0; i--) {
liTag += `<li class="inactive">${lastDateofLastMonth - i + 1}</li>`;
}
for (let i = 1; i <= lastDateofMonth; i++) {
let isToday =
i === date.getDate() &&
currMonth === new Date().getMonth() &&
currYear === new Date().getFullYear()
? "active"
: "";
liTag += `<li class="${isToday}">${i}</li>`;
}
for (let i = lastDayofMonth; i < 6; i++) {
liTag += `<li class="inactive">${i - lastDayofMonth + 1}</li>`;
}
currentDate.innerText = `${months[currMonth]} ${currYear}`;
daysTag.innerHTML = liTag;
};
renderCalendar();
prevNextIcon.forEach((icon) => {
icon.addEventListener("click", () => {
currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1;
if (currMonth < 0 || currMonth > 11) {
date = new Date(currYear, currMonth, new Date().getDate());
currYear = date.getFullYear();
currMonth = date.getMonth();
} else {
date = new Date();
}
renderCalendar();
});
});
var feild = document.querySelector("textarea");
var backUp = feild.getAttribute("placeholder");
var btn = document.querySelector(".btn");
var clear = document.getElementById("clear");
feild.onfocus = function () {
this.setAttribute("placeholder", "");
this.style.borderColor = "#333";
btn.style.display = "block";
};
feild.onblur = function () {
this.setAttribute("placeholder", backUp);
this.style.borderColor = "#aaa";
};
clear.onclick = function () {
btn.style.display = "none";
feild.value = "";
};

Contact Form 7 Datepicker: Automatically switch the date after a specified time of day

I'm using Contact Form 7 as a booking tool for a restaurant. The date you can book a table is set on next day by default. Also booking for the present day is not possible.
I want the tool to show the present date until 2pm and after 2pm it automatically switches to the next day's date. Also it makes booking for the present day unpossible after 2pm.
I'm a complete newbie in coding, I hope you guys can help me out.
This is how the Contact Form is currently set up:
<label> Personenanzahl *
[select* res-number "1 Person" "2 Personen" "3 Personen" "4 Personen" "5 Personen" "6 Personen"] </label>
<label> Datum *
[date* res-date id:datepicker min:today] </label>
<div class="vc_col-sm-6 padding-column"><label> Start *
[select* res-start id:start-time "17:00" "17:15" "17:30" "17:45" "18:00" "18:15" "18:30" "18:45"
"19:00" "19:15" "19:30" "19:45" "20:00" "20:15" "20:30" "20:45" "21:00" "21:15" "21:30" "21:45"
"22:00" "22:15" "22:30" "22:45" "23:00" "23:15" "23:30" "23:45" "00:00" "00:15" "00:30" "00:45"
"01:00"] </label></div>
<div class="vc_col-sm-6 padding-column"><label> Ende *
[select* res-end id:end-time "17:00" "17:15" "17:30" "17:45" "18:00" "18:15" "18:30" "18:45"
"19:00" "19:15" "19:30" "19:45" "20:00" "20:15" "20:30" "20:45" "21:00" "21:15" "21:30" "21:45"
"22:00" "22:15" "22:30" "22:45" "23:00" "23:15" "23:30" "23:45" "00:00" "00:15" "00:30" "00:45"
"01:00"] </label></div>
<label> Name *
[text* res-name] </label>
<label> Telefon *
[tel* res-tel] </label>
<label> E-Mail Adresse *
[email* res-email] </label>
[submit "Senden"]
And this is additional code which is implemented on the website:
<script type="text/javascript">
// initialize datepicker
var datepicker = jQuery('#datepicker');
var today = new Date();
var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var dd = today.getDate();
var mm = today.getMonth()+1; // January is 0!
var yyyy = today.getFullYear();
var tomday = tomorrow.getDate();
var tommonth = tomorrow.getMonth() + 1;
var tomyear = tomorrow.getFullYear();
if(tomday<10){tomday='0'+tomday} if(tommonth<10){tommonth='0'+tommonth} tomorrow = tomyear+'-'+tommonth+'-'+tomday;
jQuery(datepicker).attr('value', tomorrow);
// initialize time boxes
var startTimeBox = jQuery('#start-time')[0];
var endTimeBox = jQuery('#end-time')[0];
jQuery(startTimeBox).val("17:00");
jQuery(endTimeBox).val("18:45");
// handling of time changes
jQuery(startTimeBox).change(function (event) {
var startTimeValue = event.currentTarget.value;
var startHour = Number(startTimeValue.slice(0,2));
var startMinute = Number(startTimeValue.slice(3,5));
var endHour = 0;
var endMinute = 0;
if ((startHour == 23) || (startHour == 0) || (startHour == 1)) {
if ((startHour == 23) && (startMinute == 0)) {
endHour = 0;
endMinute = 45;
} else {
endHour = 1;
endMinute == 0;
}
} else {
if (startMinute == 0) {
endHour = startHour + 1;
endMinute = 45;
} else if (startMinute == 15) {
endHour = startHour + 2;
endMinute = 0;
} else if (startMinute == 30) {
endHour = startHour + 2;
endMinute = 15;
} else if (startMinute == 45) {
endHour = startHour + 2;
endMinute = 30;
}
if (endHour == 24) {
endHour = 0;
}
}
if (endHour == 24) {
endHour = 0;
}
var endHourString = endHour.toString();
var endMinuteString = endMinute.toString();
if (endHourString.length == 1) {
endHourString = "0" + endHourString;
}
if (endMinuteString.length == 1) {
endMinuteString = "0" + endMinuteString;
}
var endTimeString = endHourString + ":" + endMinuteString;
jQuery(endTimeBox).val(endTimeString);
});
</script>
Thank you very much!

You can use contact form7 date picker plugin its easy and usefull for time and date with curent tim

Show any Month/Year Javascript Calendar

I am trying to code a calendar using HTML and JavaScript that allows the user to choose any month in a given year to look at. I set up an HMTL form that has a drop down list to choose the month and an input box to enter the desired year. There are also buttons coded to toggle between the month and year, along with showing the current month. All of that is working, and I was able to get the calendar to show up as well for the current month.
What I am struggling with is getting the calendar display to change when I hit the toggle buttons or when I choose a desired month/year and hit the display button. I'm not sure what to do to get my calendar to work the way it is supposed to.
HTML
<!DOCTYPE html>
<html>
<head>
<script src = "CalendarFunction.js"></script>
<link href="Calendartest.css" rel="stylesheet"/>
</head>
<body onLoad = "CreateCalendar()">
<form name = "DateControl" id = "DateControl" onSubmit = "return false;" method = "post">
<!--Select the month and year to be shown -->
<select name = "Month" id = "month" onChange = "ChooseDate()">
<option value="January" id="January">January</option>
<option value="February" id="February">February</option>
<option value="March" id="March">March</option>
<option value="April" id="April">April</option>
<option value="May" id="May">May</option>
<option value="June" id="June">June</option>
<option value="July" id="July" >July</option>
<option value="August" id="August">August</option>
<option value="September" id="September">September</option>
<option value="October" id="October" >October</option>
<option value="November" id="November">November</option>
<option value="December" id="December">December</option>
</select>
<input name = "Year" type = "text" maxlength = "4">
<!-- Show Calendar -->
<input type = "button" name = "create" value = "Show" onClick = "ChooseDate()">
</TD>
</TR>
<!--Toggle between the months of the year -->
<input type = "button" name = "previousYear" value = "<Year" onClick = "PreviousYear()">
<input type = "button" name = "previousMonth" value = "<Month" onClick = "PreviousMonth()">
<input type = "button" name = "current" value = "Current" onClick = "SetDate()">
<input type = "button" name = "nextYear" value = ">Year" onClick = "NextYear()">
<input type = "button" name = "nextMonth" value = ">Month"onClick = "NextMonth()" >
</form>
<div id = "calendar"></div>
</body>
</html>
JS
function SetDate() {
var now = new Date();
var day = now.getDate();
var month = now.getMonth();
var year = now.getFullYear();
this.focusDay = day;
document.DateControl.Month.selectedIndex = month;
document.DateControl.Year.value = year;
displayCalendar(month, year);
}
function isFourDigitYear(year) {
if (year.length != 4) {
alert("Sorry, the year must be four-digits in length.");
document.DateControl.Year.select();
document.DateControl.Year.focus();
} else {
return true;
}
}
function ChooseDate() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
displayCalendar(month, year);
}
}
function PreviousYear() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
year--;
document.DateControl.Year.value = year;
displayCalendar(month, year);
}
}
function PreviousMonth() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
if (month == 0) {
month = 11;
if (year > 1000) {
year--;
document.DateControl.Year.value = year;
}
} else {
month--;
}
document.DateControl.Month.selectedIndex = month;
displayCalendar(month, year);
}
}
function NextMonth() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
if (month == 11) {
month = 0;
year++;
document.DateControl.Year.value = year;
} else {
month++;
}
document.DateControl.Month.selectedIndex = month;
displayCalendar(month, year);
}
}
function NextYear() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
year++;
document.DateControl.Year.value = year;
displayCalendar(month, year);
}
}
function CreateCalendar() {
var htmlContent = "";
var FebNumberOfDays = "";
var counter = 1;
var now = new Date();
var day = now.getDate();
var month = now.getMonth();
var year = now.getFullYear();
var nextMonth = month + 1;
var prevMonth = month - 1;
if (month == 1) {
if ((year % 100 != 0) && (year % 4 == 0) || (year % 400 == 0)) {
FebNumberOfDays = 29;
} else {
FebNumberOfDays = 28;
}
}
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
var nextDate = new Date(nextMonth + ' 1 ,' + year);
var weekdays = nextDate.getDay();
var weekdays2 = weekdays;
var numOfDays = dayPerMonth[month];
while (weekdays > 0) {
htmlContent += "<td class='monthPre'></td>";
weekdays--;
}
while (counter <= numOfDays) {
if (weekdays2 > 6) {
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
if (counter == day) {
htmlContent += "<td class='dayNow'>" + counter + "</td>";
} else {
htmlContent += "<td class='monthNow'>" + counter + "</td>";
}
weekdays2++;
counter++;
}
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>" +
monthNames[month] + " " + year + "</th></tr>";
calendarBody += "<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>" +
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
document.getElementById("calendar").innerHTML = calendarBody;
}
CSS
.monthPre{
color: gray;
text-align: center;
}
.monthNow{
color: blue;
text-align: center;
}
.dayNow{
border: 2px solid black;
color: #FF0;
text-align: center;
}
.calendar td{
htmlContent: 2px;
border: 2px solid black;
width: 140px;
height: 140px;
}
.monthNow th{
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.dayNames{
background: #0FF000;
color: #FFFFFF;
text-align: center;
}

Why does it not update on the website?

This code show time and date, but does not update it?
So it shows for example : 03:04 - but 1 min later it shows the same.
var language = window.navigator.language;
if (language.length > 2) {
language = language.split('-');
language = language[0];
}
//language = "fr"; // manually set language
if (language === "en") {
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
} else if (language === "cz") {
var weekday = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"];
var month = ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"];
} else if (language === "it") {
var weekday = ['Domenica', 'Luned&#236', 'Marted&#236', 'Mercoled&#236', 'Gioved&#236', 'Venerd&#236', 'Sabato'];
var month = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
} else if (language === "sp") {
var weekday = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
var month = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
} else if (language === "de") {
var weekday = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
var month = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Ju li", "August", "September", "Oktober", "November", "Dez ember"];
} else if (language === "fr") {
var weekday = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
var month = ["Janvie", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
} else if (language === "zh") {
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var month = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', 'ä¹æœˆ', 'å月', 'å一月', 'å二月'];
} else {
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
}
(function clock() {
"use strict";
var adjDay, twentyfour, currentTime, currentHours, currentMinutes, mnth, day, oday, year, dat;
twentyfour = false; ///set twentyfour here.
adjDay = function (day, daynum) {
var offset, doffset, left;
switch (day.length) {
case 6:
offset = "0px";
doffset = "1px";
left = "-1px";
break;
case 7:
offset = "0px";
doffset = "0px";
left = "-1px";
break;
case 8:
offset = "2px";
doffset = "0px";
left = "-4px";
break;
case 9:
offset = "3.5px";
doffset = ".1px";
left = "-6px";
break;
default:
offset = "0px";
doffset = "0px";
left = "0px";
}
if (daynum === 1) {
offset = "1px";
left = "-2px";
}
if (daynum === 5) {
doffset = "1.5px";
}
if (daynum === 6) {
left = "-4px";
offset = "2px";
doffset = ".1px";
}
document.getElementById('year').style.letterSpacing = offset;
document.getElementById('day').style.letterSpacing = doffset;
document.getElementById('dates').style.left = left;
};
currentTime = new Date();
currentHours = currentTime.getHours();
currentMinutes = currentTime.getMinutes();
currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
mnth = currentTime.getMonth();
dat = currentTime.getDate();
day = currentTime.getDay();
oday = (dat < 10 ? "0" : "") + dat;
year = currentTime.getFullYear();
if (!twentyfour) {
currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
currentHours = (currentHours === 0) ? 12 : currentHours;
}
document.getElementById('clock').innerHTML = currentHours + ":" + currentMinutes;
document.getElementById('date').innerHTML = weekday[day] + ", " + month[mnth] + " " + oday;
adjDay(weekday[day], day);
setTimeout(function () {
clock();
}, 30000);
}());

Javascript calendar won't show current day+month

I'm making a calendar in javascript, and i wan't to show the current day, dayname and monthname inside a <div id=taken> it is inside my function Kalender() but for some reason if i execute the function volgende() (Next Month) it changes the month in the <div id=taken> aswell which isn't the current day and month how can i fix this?
var dayNames = ['Zon', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
//Volledige Dagnamen//
var dayNamesFull = ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'];
//Volledige Maandnamen//
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'Oktober', 'November', 'December'];
//Maand lengte van 0 - 11//
var monthLength = [31,28,31,30,31,30,31,31,30,31,30,31];
//Nieuwe datum//
var today = new Date();
//Vandaag//
var day = today.getDay();
//vandaag zoekmaand//
var month = today.getMonth();
//vandaag//
var vandaag = today.getDate();
//volledig jaar//
var year = today.getFullYear();
//Kalender schrijf functie//
function Kalender() {
var buttons = '<button id="vorige" onclick="vorige()">Vorige</button><button id="volgende" onclick="volgende()">Volgende</button>'
var kalender = "";
document.getElementById('Header').innerHTML = monthNames[month]+" "+year+buttons;
kalender += '<table id="cal"><div id="taken"></div>';
for (var j = 1; j <= monthLength[month]; j++) {
if (vandaag == j ) {
kalender +="<td id='tabeldagen' class='dagVandaag'>"+j;
}
else {
kalender += "<td id='tabeldagen'>"+j;
}
if (j % 7 == 0) {
kalender += "<tr>";
}
kalender += '</td>';
}
kalender += '</table>';
document.getElementById('kalen').innerHTML = kalender;
document.getElementById('taken').innerHTML += dayNamesFull[day]+" "+vandaag+" "+monthNames[month];
}
//Leap Year//
if (month == 1) {
if (year % 4 == 0) {
monthLength = 29;
}
}
//Volgende Maand functie//
function volgende() {
month = month + 1;
if(month > 11) {
month = -1;
month = month + 1;
year = year + 1;
}
Kalender();
}
//Vorige maand functie//
function vorige() {
month = month - 1;
if(month < 0) {
month = + 12;
month = month - 1;
year = year - 1;
}
Kalender();
}
HTML:
<!DOCTYPE html>
<head>
<title>Kalender</title>
<link type="text/css" rel="stylesheet" href="kalender.css">
</head>
<body onload="Kalender()">
<div id="kalender">
<div id="Header">
</div>
<div id="kalen">
</div>
</div>
<script type="text/javascript" src="Kalender.js"></script>
</body>
</html>

The problem is that you change day and month variables in functions volgende() and vorige(). Try adding another variables for current day and month:
//Vandaag//
var day = today.getDay();
var currentDay = day;
//vandaag zoekmaand//
var month = today.getMonth();
var currentMonth= month;
and use them in taken element:
document.getElementById('taken').innerHTML += dayNamesFull[currentDay]+" "+vandaag+" "+monthNames[currentMonth];