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 = "";
};

How to get next month Previous month in Bootstrap date picker instead of next previous icon?

I am using bootstrap datepicker & I want to change display next month & previous month instead of arrows. I have done some functionality but is not working accurately...
$(document).ready(function() {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
$('#datepicker').datepicker({
inline: true,
todayHighlight: true,
}).on('changeDate', function(e) {
$('#dt_due').val(e.format('dd/mm/yyyy'));
}).on('changeMonth', function(e) {
var prevMonth = new Date(e.date).getMonth()-1;
console.log(prevMonth);
prevMonth > 12 ? prevMonth = 0 : prevMonth;
var currMonth = new Date(e.date).getMonth();
console.log(currMonth);
$('.pickDate').find('table .prev').html(monthNames[prevMonth]);
var nextMonth = new Date(e.date).getMonth() + 1;
console.log(nextMonth);
nextMonth > 12 ? nextMonth = 0 : nextMonth;
$('.pickDate').find('table .next').html(monthNames[nextMonth]);
$('#dt_due').val(e.format('dd/mm/yyyy'));
});
function getInitMonths() {
var prevMonth = new Date().getMonth();
console.log(prevMonth);
var currMonth = new Date().getMonth() + 1;
console.log(currMonth);
console.log(monthNames[currMonth - 1])
$('.pickDate').find('table .prev').html(monthNames[currMonth - 2]);
var nextMonth = new Date().getMonth() + 2;
console.log(nextMonth);
nextMonth > 12 ? nextMonth = 0 : nextMonth;
$('.pickDate').find('table .next').html(monthNames[nextMonth]);
}
getInitMonths();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div id="datepicker" class="pickDate"></div>
How can I do that?
Note:- Issue comes when month is December, January...
Please Help/suggest to me...

You need to define the implementation of getInitMonths() outside the
document.ready.
Here is the JSFiddle running without errors.
$(document).ready(function() {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
$('#datepicker').datepicker({
inline: true,
todayHighlight: true,
}).on('changeDate', function(e) {
$('#dt_due').val(e.format('dd/mm/yyyy'));
}).on('changeMonth', function(e) {
var prevMonth = new Date(e.date).getMonth()-1;
console.log(prevMonth);
prevMonth > 12 ? prevMonth = 0 : prevMonth;
var currMonth = new Date(e.date).getMonth();
console.log(currMonth);
$('.pickDate').find('table .prev').html(monthNames[prevMonth]);
var nextMonth = new Date(e.date).getMonth() + 1;
console.log(nextMonth);
nextMonth > 12 ? nextMonth = 0 : nextMonth;
$('.pickDate').find('table .next').html(monthNames[nextMonth]);
$('#dt_due').val(e.format('dd/mm/yyyy'));
});
function getInitMonths() {
var prevMonth = new Date().getMonth();
console.log(prevMonth);
var currMonth = new Date().getMonth() + 1;
console.log(currMonth);
console.log(monthNames[currMonth - 1])
$('.pickDate').find('table .prev').html(monthNames[currMonth - 2]);
var nextMonth = new Date().getMonth() + 2;
console.log(nextMonth);
nextMonth > 12 ? nextMonth = 0 : nextMonth;
$('.pickDate').find('table .next').html(monthNames[nextMonth]);
}
getInitMonths();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div id="datepicker" class="pickDate"></div>

$(document).ready(function() {
var monthMinusOneName = moment().subtract(1, "month").startOf("month").format('MMMM');
var monthPlusOneName = moment().add(1, "month").startOf("month").format('MMMM');
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
$('#datepicker').datepicker({
inline: true,
todayHighlight: true,
}).on('changeDate', function(e) {
$('#dt_due').val(e.format('dd/mm/yyyy'));
}).on('changeMonth', function(e) {
var monthMinusOneName = moment(e.date).subtract(1, "month").startOf("month").format('MMMM');
var monthPlusOneName = moment(e.date).add(1, "month").startOf("month").format('MMMM');
$('.pickDate').find('table .prev').html(monthMinusOneName);
$('.pickDate').find('table .next').html(monthPlusOneName);
});
function onInit() {
var monthMinusOneName = moment().subtract(1, "month").startOf("month").format('MMMM');
var monthPlusOneName = moment().add(1, "month").startOf("month").format('MMMM');
$('.pickDate').find('table .prev').html(monthMinusOneName);
$('.pickDate').find('table .next').html(monthPlusOneName);
}
onInit()
})
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<div id="datepicker" class="pickDate"></div>
Note:- I have added moment js for next month & previous month's name.

Slider value adding to date

I am producing a slider that adds to a date using pure JavaScript. I need the slider to be able to add the value of the element to the date.
For example, if the value of the slider is 24, I need to add 24 days onto the date.
I have tried adding onto the getDate() function, but all that does is add it together if its a string. I then tried to use parseInt() to make the value of the slider into an integer but then it makes the day into an integer when I add the value to the days.
var sliderDate = document.getElementById('dateSlider');
var outputDate = document.getElementById('dateOutput');
var today = new Date();
var sliderAdded = today;
var day = sliderAdded.getDay();
var month = sliderAdded.getMonth();
var date = sliderAdded.getDate() + sliderDate.value;
var daysOfWeek = [
"N/A",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
];
var nameOfMonths = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var sliderDateValue = sliderDate.value;
//connection between slider and input textbox
outputDate.value = sliderDate.value;
sliderDate.oninput = function() {
outputDate.value = this.value;
};
outputDate.oninput = function() {
sliderDate.value = this.value;
};
function dateBoundries() {
if (outputDate.value > 35) {
outputDate.value = 35;
} else if (outputDate.value < 0) {
outputDate.value = 0;
} else {}
}
if (date == 1 || date == 21 || date == 31) {
suffix = "st ";
} else if (date == 2 || date == 22) {
suffix = "nd ";
} else if (date == 3 || date == 23) {
suffix = "rd ";
} else {
suffix = "th ";
}
document.getElementById('dateTest').innerHTML =
daysOfWeek[day] +
" " +
date +
suffix +
" " +
nameOfMonths[month] +
" " +
today.getFullYear();
<h1>
<span id="dateTest"></span>
<input type="textbox" id="dateOutput" onfocusout="dateBoundries()"><br>
<input type="range" min="1" max="35" value="1" class="slider" id="dateSlider">
<br>
</h1>

var sliderDate = document.getElementById('dateSlider');
var outputDate = document.getElementById('dateOutput');
var daysOfWeek = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
var nameOfMonths = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var sliderDateValue = sliderDate.value;
//connection between slider and input textbox
outputDate.value = sliderDate.value;
sliderDate.oninput = function() {
var today = new Date();
today.setDate(today.getDate() + Number(this.value));
outputDate.value = this.value;
formattedDate(today)
};
outputDate.oninput = function() {
var today = new Date();
today.setDate(today.getDate() + Number(this.value));
sliderDate.value = this.value;
formattedDate(today)
};
function dateBoundries() {
if (outputDate.value > 35) {
outputDate.value = 35;
} else if (outputDate.value < 0) {
outputDate.value = 0;
} else {}
}
function formattedDate(dateN) {
var date = dateN.getDate()
if (date == 1 || date == 21 || date == 31) {
suffix = "st ";
} else if (date == 2 || date == 22) {
suffix = "nd ";
} else if (date == 3 || date == 23) {
suffix = "rd ";
} else {
suffix = "th ";
}
document.getElementById('dateTest').innerHTML =
daysOfWeek[dateN.getDay()] +
" " +
date +
suffix +
" " +
nameOfMonths[dateN.getMonth()] +
" " +
dateN.getFullYear();
}
formattedDate(new Date());
</h1> <span id="dateTest"></span>
<input type="textbox" id="dateOutput" onfocusout="dateBoundries()"><br>
<input type="range" min="0" max="35" value="1" class="slider" id="dateSlider">
<br>
By your question, I have tried inserting the logic. Please do let me know if satisfies. In your code there was an error in calculating days remember week starts from sunday.

<h1>
<span id="dateTest"></span>
<input type="textbox" id="dateOutput" onfocusout="dateBoundries()"><br>
<input type="range" min="1" max="35" value="1" class="slider" id="dateSlider" onchange="dateOutput.value = parseInt(dateOutput.value) + parseInt(dateSlider.value);"><br>
</h1>

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;
}

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];