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

Order a list of calendar events in Javascript and add month name

I have a list of events in HTML:
<ol id="my-list">
<li data-start="01-Jan-2019">Event on 01-Jan-2019</li>
<li data-start="25-Dec-2018">Event on 25-Dec-2018</li>
<li data-start="14-Feb-2018">Event on 14-Feb-2018</li>
<li data-start="14-Jul-2019">Event on 14-Jul-2019</li>
<li data-start="31-Oct-2019">Event on 31-Oct-2019</li>
<li data-start="13-Oct-2019">Event on 13-Oct-2019</li>
<li data-start="26-Oct-2016">Event on 26-Oct-2016</li>
<li data-start="02-Dec-2018">Event on 02-Dec-2018</li>
<li data-start="21-Dec-2018">Event on 21-Dec-2018</li>
<li data-start="18-Dec-2018">Event on 18-Dec-2018</li>
</ol>
How can I modify the list to be:
<ol id="my-list">
<span>October</span>
<li data-start="01-Jan-2019">Event on 26-Oct-2016</li>
<span>February</span>
<li data-start="25-Dec-2018">Event on 14-Feb-2018</li>
<span>December</span>
<li data-start="14-Feb-2018">Event on 02-Dec-2018</li>
<li data-start="14-Jul-2019">Event on 18-Dec-2018</li>
<li data-start="31-Oct-2019">Event on 21-Dec-2018</li>
<li data-start="13-Oct-2019">Event on 25-Dec-2018</li>
<span>January</span>
<li data-start="26-Oct-2016">Event on 01-Jan-2019</li>
<span>July</span>
<li data-start="02-Dec-2018">Event on 14-Jul-2019</li>
<span>October</span>
<li data-start="21-Dec-2018">Event on 13-Oct-2019</li>
<li data-start="18-Dec-2018">Event on 31-Oct-2019</li>
</ol>
I can also use jQuery.
More specifically, I need to compare each date and see if the month has changed, then if it is, append the right month name.
First I ordered the events (source http://jsfiddle.net/greguarr/2fr0vmhu/):
var container = $("#my-list");
var items = $("#my-list li");
items.each(function() {
// Convert the string in 'data-start' attribute to a more
// standardized date format
var BCDate = $(this).attr("data-start").split("-");
var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2];
standardDate = new Date(standardDate).getTime();
$(this).attr("data-start", standardDate);
console.log($(this).attr("data-start", standardDate));
});
items.sort(function(a,b){
a = parseFloat($(a).attr("data-start"));
b = parseFloat($(b).attr("data-start"));
return a<b ? -1 : a>b ? 1 : 0;
}).each(function(){
container.append(this);
});
Then I want to compare each event month name with its previous event month name and insert the name of the month only if the month changed.

Compare the month of each event with the previous one and if it's different, append its name before the list item:
items.each(function(i) {
var a1 = new Date($(this).data('start'));
var b1 = new Date($(this).prev().data('start'));
if (a1.getMonth() != b1.getMonth()) {
$(this).before("<span>" + defineMonth(a1.getMonth()) + "</span>");
}
});
Where defineMonth is a function to retrieve the name of the month:
function defineMonth(evt) {
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var n = month[evt];
return n;
}

How to get month in previous year?

I try to get the previous month according to current month. But the problem occurs when "year" is not 2017.
So how can I get the month of the previous year?. The code below will describe what I want, if anybody know how to get it please tell me the method. Thank you :)
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var cur_month = new Date();
var cur_month_now = month[cur_month.getMonth()];
var pre_month_1 = month[cur_month.getMonth()-1];
var pre_month_2 = month[cur_month.getMonth()-2];
var pre_month_3 = month[cur_month.getMonth()-3];
var pre_month_4 = month[cur_month.getMonth()-4];
var pre_month_5 = month[cur_month.getMonth()-5];
document.getElementById("cur_month").innerHTML = cur_month_now;
document.getElementById("pre_month_1").innerHTML = pre_month_1;
document.getElementById("pre_month_2").innerHTML = pre_month_2;
document.getElementById("pre_month_3").innerHTML = pre_month_3;
document.getElementById("pre_month_4").innerHTML = pre_month_4;
document.getElementById("pre_month_5").innerHTML = pre_month_5;
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

You are getting this undefined because month[-1] and month[-2] are undefined
You need to actually do date manipulation in a date object rather than just getting date from index.
Use this method to get last month date
function getPrevMonth(date) {
date.setMonth(date.getMonth() - 1);
return date;
}
invoke this method as many times as you need.
Demo
function getPrevMonth(date) {
date.setMonth(date.getMonth() - 1);
return date;
}
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var cur_month = new Date();
var cur_month_now = month[cur_month.getMonth()];
var pre_month_1 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_2 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_3 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_4 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_5 = month[getPrevMonth(cur_month).getMonth()];
document.getElementById("cur_month").innerHTML = cur_month_now;
document.getElementById("pre_month_1").innerHTML = pre_month_1;
document.getElementById("pre_month_2").innerHTML = pre_month_2;
document.getElementById("pre_month_3").innerHTML = pre_month_3;
document.getElementById("pre_month_4").innerHTML = pre_month_4;
document.getElementById("pre_month_5").innerHTML = pre_month_5;
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>

Let Date do the wrap-around for you. There are also a couple of improvements we can make to the code, see comments:
// Array initializers are cleaner and less typing
var month = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var dt = new Date();
var cur_month_now = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1); // Date handles wrapping to previous year
var pre_month_1 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_2 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_3 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_4 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_5 = month[dt.getMonth()];
document.getElementById("cur_month").innerHTML = cur_month_now;
document.getElementById("pre_month_1").innerHTML = pre_month_1;
document.getElementById("pre_month_2").innerHTML = pre_month_2;
document.getElementById("pre_month_3").innerHTML = pre_month_3;
document.getElementById("pre_month_4").innerHTML = pre_month_4;
document.getElementById("pre_month_5").innerHTML = pre_month_5;
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>

Nothing really new, but for smaller js code …
function getPrevMonth(date, m) {
date.setMonth(date.getMonth() - m);
return date;
}
//no need for such array
locale = "en-us";//or e.g. navigator.languages[0]
var d = new Date();
for (var i=0; i<6; i++){
//also worth trying: create element instead of writing to exiting ones only: https://www.w3schools.com/jsref/met_document_createelement.asp
document.getElementById("pre_month_"+i).innerHTML = getPrevMonth(d,1).toLocaleString(locale, { month: "long" });
}
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>

You could do this a bit more concise, and using modulo operator:
var month = "January,February,March,April,May,June,July,August,September,October,November,December"
.split(','),
monthNum = 12 + new Date().getMonth();
Array.from(document.querySelectorAll('.dropdown-menu a'), function (elem, i) {
elem.textContent = month[(monthNum-i)%12];
});
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
NB: It is better practice to use textContent instead of innerHTML, since you want to put text, not HTML.

jQuery UI Datepicker separate date/month+year

I want a datepicker like the one on booking.com.
It automatically changes the day+date of the month when a month+year in another select box is changed. I have had a look at the API of jQuery datepicker but I couldn't find anything that would help me.

See i Created One Fiddle Where you Select Date From DatePicker then it will change in Day/Month/year on Another Field . : Demo
$(function() {
$("#fullDate").datepicker({
onClose: function(dateText, inst) {
$('#year').val(dateText.split('/')[2]);
$('#month').val(dateText.split('/')[0]);
$('#day').val(dateText.split('/')[1]);
}
});
});

Thanks for your input. I finally figured how to get it working.
So here is the answer for anyone else who wants this kind of functionality.
HTML
<select name="day" id="day">
<option value="">Select Day</option>
</select>
<select name="month" id="month">
<option value="">Select Month</option>
</select>
JS
function getMonths() {
var months = new Array(12);
months[0] = "Jan";
months[1] = "Feb";
months[2] = "Mar";
months[3] = "Apr";
months[4] = "May";
months[5] = "Jun";
months[6] = "Jul";
months[7] = "Aug";
months[8] = "Sep";
months[9] = "Oct";
months[10] = "Nov";
months[11] = "Dec";
var d = new Date();
var month = d.getMonth();
var year = d.getFullYear();
var monthsArray = new Array(13);
for (var i = 0; i < 13; i++) {
var now = new Date();
if (now.getMonth() == 11) {
var current = new Date(now.getFullYear() + 1, 0, 1);
} else {
var current = new Date(now.getFullYear(), now.getMonth() + i, 1);
}
monthsArray[current.getMonth() + 1 + '_' + current.getFullYear()] = months[current.getMonth()] + ' ' + current.getFullYear();
}
return monthsArray;
}
function getDaysInMonth(month, year, daySelector) {
var names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var date = new Date(year, month - 1, 1);
var days = [];
while (date.getMonth() == month - 1) {
days[date.getDate()] = (date.getDate() + " " + names[date.getDay()]);
date.setDate(date.getDate() + 1);
}
daySelector.find('option').remove();
daySelector.append($("<option></option>").attr("value", '').text("Day"));
for (var key in days) {
daySelector.append($("<option></option>").attr("value", key).text(days[key]));
}
}
var months = getMonths();
for (var key in months) {
$('#month')
.append($("<option></option>")
.attr("value", key)
.text(months[key]));
}
$('#month').change(function () {
var monthYear = $('#month').val().split('_');
getDaysInMonth(monthYear[0], monthYear[1], $('#day'));
});
Demo & Code

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