I'm currently working on a little project for my office as a learning exercise. We have a tradition to bring food with us every monday so I tried to make a program that shows when eachs turn is. Currently my Webpage is able to create a calendar with a spare column for the color of a user.
(The current progress without the CSS file is linked below)
Now I want to assign a color to the coresponding user. I am able to write the PHP method but I am unsure how to put the returned value into the field. When I tried to use an AJAX method the resulting text was 'undefined'. So I read into it and realized that the AJAX functions are being executed parallel to the other processes.
Now the main question: Can I somehow make JavaScript wait until the Variables have returned befor further bulding the calendar? Or should I insert the colors afterwards. If so: How could I do it?
I don't necesseraly need writen code. Some explanation or ideas would be enough.
Thank you!
today = new Date();
currentMonth = today.getMonth();
currentYear = today.getFullYear();
currentWeek = getWeekNumber(today);
selectYear = document.getElementById("year");
selectMonth = document.getElementById("month");
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
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();
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 helper = 0;
let dt = new Date(year,month,1);
let date = (1+germanDate(dt.getDay()));
// document.getElementById('dies').innerHTML = ((dt.getDay())+"<br />"+daysInMonth(month, year)+"<br />"+date);
for (let i = 0; i < 6; i++) {
// creates a table row
let row = document.createElement("tr");
//creating individual cells, filing them up with data.
if (date > daysInMonth(month, year)) {
if (helper<5){
while (helper<5){
let row = document.createElement("tr");
cell = document.createElement("td");
cell.classList.add("text-white");
cell.classList.add("bg-white");
cell.setAttribute('disabled', true);
cellText = document.createTextNode('|');
cell.appendChild(cellText);
row.appendChild(cell);
tbl.appendChild(row);
helper++;
}
}
break;
}
else {
let dt = new Date(year,month,date)
cell = document.createElement("td");
cellText = document.createTextNode(''+getWeekNumber(dt)+'. Week'); //insert weeknumber
if (getWeekNumber(dt) === currentWeek && year === today.getFullYear() && month === today.getMonth()) {
cell.classList.add("table-info"); //if the week is the current one, make the cell blue
} // color today's date
cell.classList.add("cursorPointer"); //CSS -> change Cursor on hover
cell.classList.add("col-11");
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td"); //New cell for the color
cellText = document.createTextNode('');
cell.classList.add("col-1");
cell.classList.add("table-white");
cell.appendChild(cellText);
row.appendChild(cell);
date+=7;
helper++;
}
tbl.appendChild(row); // appending each row into calendar body.
}
}
var result = getWeekNumber(new Date());
document.write('It\'s currently week ' +result +'');
// check how many days in a month code from https://dzone.com/articles/determining-number-days-month
function daysInMonth(iMonth, iYear) {
return 32 - new Date(iYear, iMonth, 32).getDate();
}
//By RobG https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
function getWeekNumber(d) {
// Copy date so don't modify original
d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
// Set to nearest Thursday: current date + 4 - current day number
// Make Sunday's day number 7
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
// Get first day of year
var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
// Calculate full weeks to nearest Thursday
var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
// Return array of year and week number
return weekNo;
}
function goToDetails(monat, jahr){
window.open('?kalenderDetails&jahr='+jahr+'&woche='+monat);
}
function germanDate($datum){
switch($datum){
case 1: return 0;
case 0: return 1;
default: return (8-$datum);
}
}.table {
border-collapse: collapse !important; }
.table td,
.table th {
background-color: #fff !important; }
.table-bordered th,
.table-bordered td {
border: 1px solid #dee2e6 !important; }
.table-dark {
color: inherit; }
.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
border-color: #dee2e6; }
.table .thead-dark th {
color: inherit;
border-color: #dee2e6; } }
/*# sourceMappingURL=main.css.map */<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="icon" href="as" id=icon>
<script src="JavaScript/Icon.js"> </script>
</head>
<body style="min-height: 100%">
<div class='container-fluid' style='height: 100%'>
<div class="row" style="margin-top: 2em">
<div class="container col-12 col-lg-6">
<div class="card">
<h3 class="card-header" id="monthAndYear"></h3>
<div class="table-responsive">
<table class="table table-bordered table-hover" id="calendar">
<tbody id="calendar-body">
</tbody>
</table>
</div>
<div class="form-inline">
<button class="btn btn-outline-primary col-sm-6 rounded-0" id="previous" onclick="previous()">Previous</button>
<button class="btn btn-outline-primary col-sm-6 rounded-0" id="next" onclick="next()">Next</button>
</div>
<br/>
<form class="form-inline">
<label class="col-sm-4 text-left" for="month">Jump To: </label>
<select class="form-control col-sm-4 rounded-0" name="month" id="month" onchange="jump()">
<option value=0>Jan</option>
<option value=1>Feb</option>
<option value=2>Mar</option>
<option value=3>Apr</option>
<option value=4>May</option>
<option value=5>Jun</option>
<option value=6>Jul</option>
<option value=7>Aug</option>
<option value=8>Sep</option>
<option value=9>Oct</option>
<option value=10>Nov</option>
<option value=11>Dec</option>
</select>
<label for="year"></label><select class="form-control col-sm-4 rounded-0" name="year" id="year" onchange="jump()">
<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>
</div>
</div>
</div>
</div>
</body>
</html>
