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;
}
Related
I found a question that interests me and a solution to it is here on this link: https://stackoverflow.com/a/51660131/17222337, but it's in jQuery, but I'm interested in a pure javascript solution. I reviewed what I could do, but found only non working code on this topic in pure javascript. I tried to translate from jQuery into javascript, but the code I get is wrong and does not work. Tell me please,
how to make a javascript code from the given jquery code?
I found solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items:center;
flex-direction: column;
}
form span{
display: block;
margin: 20px 0;
}
/*make form styling consistent across browsers*/
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
}
</style>
</head>
<body>
<form>
<span>
<label for="day">Day:</label>
<select name="day" id="day"></select>
</span>
<span>
<label for="month">Month:</label>
<select name="month" id="month"></select>
</span>
<span>
<label for="year">Year:</label>
<select name="year" id="year">Year:</select>
</span>
</form>
<script>
//Create references to the dropdown's
const yearSelect = document.getElementById("year");
const monthSelect = document.getElementById("month");
const daySelect = document.getElementById("day");
const months = ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August', 'September', 'October',
'November', 'December'];
//Months are always the same
(function populateMonths(){
for(let i = 0; i < months.length; i++){
const option = document.createElement('option');
option.textContent = months[i];
monthSelect.appendChild(option);
}
monthSelect.value = "January";
})();
let previousDay;
function populateDays(month){
//Delete all of the children of the day dropdown
//if they do exist
while(daySelect.firstChild){
daySelect.removeChild(daySelect.firstChild);
}
//Holds the number of days in the month
let dayNum;
//Get the current year
let year = yearSelect.value;
if(month === 'January' || month === 'March' ||
month === 'May' || month === 'July' || month === 'August'
|| month === 'October' || month === 'December') {
dayNum = 31;
} else if(month === 'April' || month === 'June'
|| month === 'September' || month === 'November') {
dayNum = 30;
}else{
//Check for a leap year
if(new Date(year, 1, 29).getMonth() === 1){
dayNum = 29;
}else{
dayNum = 28;
}
}
//Insert the correct days into the day <select>
for(let i = 1; i <= dayNum; i++){
const option = document.createElement("option");
option.textContent = i;
daySelect.appendChild(option);
}
if(previousDay){
daySelect.value = previousDay;
if(daySelect.value === ""){
daySelect.value = previousDay - 1;
}
if(daySelect.value === ""){
daySelect.value = previousDay - 2;
}
if(daySelect.value === ""){
daySelect.value = previousDay - 3;
}
}
}
function populateYears(){
//Get the current year as a number
let year = new Date().getFullYear();
//Make the previous 100 years be an option
for(let i = 0; i < 101; i++){
const option = document.createElement("option");
option.textContent = year - i;
yearSelect.appendChild(option);
}
}
populateDays(monthSelect.value);
populateYears();
yearSelect.onchange = function() {
populateDays(monthSelect.value);
}
monthSelect.onchange = function() {
populateDays(monthSelect.value);
}
daySelect.onchange = function() {
previousDay = daySelect.value;
}
</script>
</body>
</html>
I have written a simple javascript function that takes the input of a date textfield and convert it to dd-mm-yyyy format.
function dateConvert(dateValue) {
if(dateValue == null) {
var grDate = null;
}
else {
var n = dateValue.search("/");
if( n >= 0) {
var res = dateValue.split("/");
var day = res[0];
if( day.length == 1 ) {
day = "0"+day;
}
var month = res[1];
if( month.length == 1 ) {
month = "0"+month;
}
var year = res[2];
var grDate = day+"-"+month+"-"+year;
/*alert(grDate);*/
}
else {
var grDate = dateValue;
}
}
document.getElementById("mydate").value = grDate;
}
<input type="text" name="mydate" id="mydate" onblur="dateConvert(this.value)" />
Is there a way to make function "global" and use it to every textfield that calls the function without having to write it e.g. 3 times if I want to use it in 3 different date textfields?
Thanks for the replay to Dominik. Make my mind spin
I didn't use event listener but querySelectorAll
Here is the correct version. It works fine
function myFunction() {
var x = document.querySelectorAll(".mydate");
var i;
for (i = 0; i < x.length; i++) {
var dateValue = x[i].value;
if(dateValue == null) {
var grDate = null;
}
else {
var n = dateValue.search("/");
if( n >= 0) {
var res = dateValue.split("/");
var day = res[0];
if( day.length == 1 ) {
day = "0"+day;
}
var month = res[1];
if( month.length == 1 ) {
month = "0"+month;
}
var year = res[2];
var grDate = day+"-"+month+"-"+year;
/*alert(grDate);*/
}
else {
var grDate = dateValue;
}
}
x[i].value = grDate;
}
}
for inputs
<p><input type="text" name="field1" class="mydate" onblur="myFunction()" /></p>
<p><input type="text" name="field2" class="mydate" onblur="myFunction()" /></p>
<p><input type="text" name="field3" class="mydate" onblur="myFunction()" /></p>
Excellent question - because this is the perfect example where a custom element solves the problem.
It's really easy:
customElements.define('my-date', class extends HTMLInputElement {
constructor() {
super();
this.dateConvert = this.dateConvert.bind(this);
this.addEventListener('blur', this.dateConvert);
}
dateConvert() {
if (this.value) {
let n, res, day, month, year;
n = this.value.search("/");
if (n >= 0) {
res = this.value.split("/");
day = res[0];
if (day.length == 1) {
day = "0" + day;
}
month = res[1];
if (month.length == 1) {
month = "0" + month;
}
year = res[2];
this.value = `${day}-${month}-${year}`;
}
}
}
}, { extends: 'input' });
<input is="my-date" />
Now you can even add new date inputs dynamically and they come with your behaviour automatically. No fuddling around in the DOM, just an element that does exactly what you need any time it's in the HTML anywhere.
Please note that unfortunately Safari does not support customizing built-in elements, so you either will have to resort to a polyfill (check https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements or https://github.com/ungap/custom-elements#readme) for that, or use an autonomous custom elements like this:
customElements.define('my-date', class extends HTMLElement {
constructor() {
super();
this.input = document.createElement('input');
this.appendChild(this.input);
this.dateConvert = this.dateConvert.bind(this);
this.input.addEventListener('blur', this.dateConvert);
}
dateConvert() {
if (this.value) {
let n, res, day, month, year;
n = this.value.search("/");
if (n >= 0) {
res = this.value.split("/");
day = res[0];
if (day.length == 1) {
day = "0" + day;
}
month = res[1];
if (month.length == 1) {
month = "0" + month;
}
year = res[2];
this.value = `${day}-${month}-${year}`;
}
}
}
get value() {
return this.input.value;
}
set value(val) {
this.input.value = val;
}
});
<my-date></my-date>
Just as a sidenote, you might want to consider using the built-in API for dateTime conversion/formatting:
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
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
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>
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];