let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = document.getElementById("year");
let selectMonth = document.getElementById("month");
let btn=document.getElementById("button");
let btnTag=document.getElementById("buttonTag");
//btn.addEventListener("click",getText);
let months = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);
function next() {
currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
currentMonth = (currentMonth + 1) % 12;
showCalendar(currentMonth, currentYear);
}
function previous() {
currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
showCalendar(currentMonth, currentYear);
}
function jump() {
currentYear = parseInt(selectYear.value);
currentMonth = parseInt(selectMonth.value);
showCalendar(currentMonth, currentYear);
}
function showCalendar(month, year) {
let firstDay = (new Date(year, month)).getDay();
let daysInMonth = 32 - new Date(year, month, 32).getDate();
let tbl = document.getElementById("calendar-body"); // body of the calendar
// clearing all previous cells
tbl.innerHTML = "";
// filing data about month and in the page via DOM.
monthAndYear.innerHTML = months[month] + "" + year;
selectYear.value = year;
selectMonth.value = month;
// creating all cells
let date = 1;
for (let i = 0; i < 6; i++) {
// creates a table row
let row = document.createElement("tr");
//creating individual cells, filing them up with data.
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
let cell = document.createElement("td");
let cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
}
else if (date > daysInMonth) {
break;
}
else {
let cell = document.createElement("td");
let cellText = document.createTextNode(date);
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
cell.classList.add("bg-success");
} // color today's date
if(date === today.getDate() && year === today.getFullYear() && month === today.getMonth()){
btn.addEventListener('click', function(e) {
cell.innerHTML= today.getDate() + "=" +document.getElementById('myTextArea').value;
});
}
cell.appendChild(cellText);
row.appendChild(cell);
date++;
}
}
tbl.appendChild(row); // appending each row into calendar body.
}
}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Kalender</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"></head><body><div class="container col-sm-4 col-md-7 col-lg-4 mt-5"><div class="card"><h3 class="card-header" id="monthAndYear"></h3><table class="table table-bordered table-responsive-sm" id="calendar"><thead><tr><th>So</th><th>Mo</th><th>Di</th><th>Mi</th><th>Do</th><th>Fri</th><th>Sa</th></tr></thead><tbody id="calendar-body"></tbody></table><div class="form-inline"><button class="btn btn-outline-primary col-sm-6" id="previous" onclick="previous()">Zurück</button><button class="btn btn-outline-primary col-sm-6" id="next" onclick="next()">Nächster</button></div><br/><form class="form-inline"><label class="lead mr-2 ml-2" for="month">Wechsel zu: </label><select class="form-control col-sm-4" name="month" id="month" onchange="jump()"><option value=0>Jan</option><option value=1>Feb</option><option value=2>Mär</option><option value=3>Apr</option><option value=4>Mai</option><option value=5>Jun</option><option value=6>Jul</option><option value=7>Aug</option><option value=8>Sep</option><option value=9>Okt</option><option value=10>Nov</option><option value=11>Dez</option></select><label for="year"></label><select class="form-control col-sm-4" name="year" id="year" onchange="jump()"><option value=1990>1990</option><option value=1991>1991</option><option value=1992>1992</option><option value=1993>1993</option><option value=1994>1994</option><option value=1995>1995</option><option value=1996>1996</option><option value=1997>1997</option><option value=1998>1998</option><option value=1999>1999</option><option value=2000>2000</option><option value=2001>2001</option><option value=2002>2002</option><option value=2003>2003</option><option value=2004>2004</option><option value=2005>2005</option><option value=2006>2006</option><option value=2007>2007</option><option value=2008>2008</option><option value=2009>2009</option><option value=2010>2010</option><option value=2011>2011</option><option value=2012>2012</option><option value=2013>2013</option><option value=2014>2014</option><option value=2015>2015</option><option value=2016>2016</option><option value=2017>2017</option><option value=2018>2018</option><option value=2019>2019</option><option value=2020>2020</option><option value=2021>2021</option><option value=2022>2022</option><option value=2023>2023</option><option value=2024>2024</option><option value=2025>2025</option><option value=2026>2026</option><option value=2027>2027</option><option value=2028>2028</option><option value=2029>2029</option><option value=2030>2030</option></select></form><textarea placeholder="Gebe dein Termin ein" id="myTextArea" cols="20" rows="5"></textarea><button id="button">Klick</button></div></div><!--<button name="jump" onclick="jump()">Go</button>--><script src="scripts.js"></script><!-- Optional JavaScript for bootstrap --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script></body></html>I want to enter information(in string) in a specific date in calendar. so far i can enter information in the current day but i dont know how to do it for the day i choose in my html file. How can i combine the text and day value in html so i need to click just once to activate a buttonlistener. Below is the relevant code:
<textarea placeholder="Gebe dein Termin ein" id="myTextArea" cols="20" rows="5"></textarea>
<button id="button">Klick</button>
<input type="number" name="Tag" id="tag">
<button id="buttonTag">Klick</button>
let firstDay = (new Date(year, month)).getDay();
let daysInMonth = 32 - new Date(year, month, 32).getDate();
let tbl = document.getElementById("calendar-body"); // body of the calendar
// clearing all previous cells
tbl.innerHTML = "";
// filing data about month and in the page via DOM.
monthAndYear.innerHTML = months[month] + "" + year;
selectYear.value = year;
selectMonth.value = month;
// creating all cells
let date = 1;
for (let i = 0; i < 6; i++) {
// creates a table row
let row = document.createElement("tr");
//creating individual cells, filing them up with data.
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
let cell = document.createElement("td");
let cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
}
else if (date > daysInMonth) {
break;
}
else {
let cell = document.createElement("td");
let cellText = document.createTextNode(date);
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
cell.classList.add("bg-success");
} // color today's date
if(date === today.getDate() && year === today.getFullYear() && month === today.getMonth()){
btn.addEventListener('click', function(e) {
cell.innerHTML= today.getDate() + "=" +document.getElementById('myTextArea').value;
});
}
cell.appendChild(cellText);
row.appendChild(cell);
date++;
}
}
tbl.appendChild(row); // appending each row into calendar body.
}