Beste HelpMij forum leden,
Als opdracht voor school ben ik bezig met een kalender. Deze kalender is gebaseerd op deze tutorial: http://jszen.blogspot.com/2007/03/how-to-build-simple-calendar-with.html . De opdracht was, om deze kalender te stylen, wat prima gelukt is, en 2 knoppen aan te maken waarmee je de kalender vooruit laat schuiven, of terug laat schuiven (datums etc.) Dit is deels gelukt. Echter blijft deze, zoals verwacht, altijd de nieuwe datum pakken en ik weet niet hoe ik dit WEL op de goede manier voor elkaar kan krijgen.
Hieronder mijn code:
Index.html
script.js
style.css
Het is allemaal niet zo netjes als ik gewend ben, maar dit komt omdat ik er al behoorlijk wat aan verbouwd heb.
Live versie: http://www.daan-online.nl/kalender/
Ik hoop dat jullie mij kunnen helpen met dit probleem :thumb:
Als opdracht voor school ben ik bezig met een kalender. Deze kalender is gebaseerd op deze tutorial: http://jszen.blogspot.com/2007/03/how-to-build-simple-calendar-with.html . De opdracht was, om deze kalender te stylen, wat prima gelukt is, en 2 knoppen aan te maken waarmee je de kalender vooruit laat schuiven, of terug laat schuiven (datums etc.) Dit is deels gelukt. Echter blijft deze, zoals verwacht, altijd de nieuwe datum pakken en ik weet niet hoe ik dit WEL op de goede manier voor elkaar kan krijgen.
Hieronder mijn code:
Index.html
Code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Kalender</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<script type="text/javascript">
var cal = new Calendar();
cal.generateHTML();
document.write(cal.getHTML());
</script>
</body>
</html>script.js
Code:
// Javascript
//Dagen van de week array
cal_days_labels = ['Zon', 'Maa', 'Din', 'Woe', 'Don', 'Vri', 'Zat'];
//Maanden van het jaar array
cal_months_labels = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'Novemvber', 'December'];
//Aantal dagen van de maand op volgorde van maanden array
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//Datum van vandaag
calCurrentDate = new Date();
function Calendar(month, year) {
this.month = (isNaN(month) || month == null) ? calCurrentDate.getMonth() : month;
this.year = (isNaN(year) || year == null) ? calCurrentDate.getFullYear() : year;
this.html = '';
}
var $ = document; // shortcut
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!$.getElementById(cssId))
{
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
link.media = 'all';
head.appendChild(link);
}
Calendar.prototype.generateHTML = function(){
// get first day of month
var firstDay = new Date(this.year, this.month, 1);
var startingDay = firstDay.getDay();
// find number of days in month
var monthLength = cal_days_in_month[this.month];
// compensate for leap year
if (this.month == 1) { // February only!
if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0){
monthLength = 29;
}
}
// do the header
var monthName = cal_months_labels[this.month];
var html = '<div id="container">';
html += '<h1>Javascript Kalender</h1>';
html += '<div id="left" onclick="monthBack()"></div>';
html += '<table class="calendar-table">';
html += '<tr><th colspan="7">';
html += monthName + " " + this.year;
html += '</th></tr>';
html += '<tr class="calendar-header">';
for(var i = 0; i <= 6; i++ ){
html += '<td class="calendar-header-day">';
html += cal_days_labels[i];
html += '</td>';
}
html += '</tr><tr>';
// fill in the days
var day = 1;
// this loop is for is weeks (rows)
for (var i = 0; i < 9; i++) {
// this loop is for weekdays (cells)
for (var j = 0; j <= 6; j++) {
html += '<td class="calendar-day">';
if (day <= monthLength && (i > 0 || j >= startingDay)) {
html += day;
day++;
}
html += '</td>';
}
// stop making rows if we've run out of days
if (day > monthLength) {
break;
} else {
html += '</tr><tr>';
}
}
html += '</tr></table>';
html += '<div id="right" onclick="monthForward()"></div>';
html += '</div>';
this.html = html;
Calendar.prototype.getHTML = function() {
return this.html;
}
}
function monthBack() {
var cal = new Calendar(calCurrentDate.getMonth()-1, this);
cal.generateHTML();
calCurrentDate = cal;
document.write(cal.getHTML());
// Laad css in
var $ = document; // shortcut
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!$.getElementById(cssId))
{
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
link.media = 'all';
head.appendChild(link);
}
}
function monthForward() {
var currentDate = calCurrentDate.getMonth();
var cal = new Calendar(calCurrentDate.getMonth()+1);
cal.generateHTML();
calCurrentDate = cal;
document.write(cal.getHTML());
document.write(currentDate);
// Laad css in
var $ = document; // shortcut
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!$.getElementById(cssId))
{
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
link.media = 'all';
head.appendChild(link);
}
}style.css
Code:
/* Stylesheet */
body {
background:#422F1E;
color:#000;
font-family:Verdana;
font-size:11px;
}
#container {
position:relative;
width:500px;
margin:auto;
text-align:center;
}
.calendar-table {
margin:auto;
box-shadow:1px 1px 5px #000;
padding:40px;
background:#DEDEDE;
border-radius:5px;
font-size:11px;
}
h1 {
font-family:Broadway;
font-size:40px;
text-shadow:2px 2px 1px #000;
color:#919191;
}
#left {
background:url(images/left.png);
width:66px;
height:131px;
position:absolute;
left: 55px; top: 116px;
cursor:pointer;
}
#right {
background:url(images/right.png);
width:66px;
height:131px;
position:absolute;
top: 116px; left: 379px;
cursor:pointer;
}Het is allemaal niet zo netjes als ik gewend ben, maar dit komt omdat ik er al behoorlijk wat aan verbouwd heb.
Live versie: http://www.daan-online.nl/kalender/
Ik hoop dat jullie mij kunnen helpen met dit probleem :thumb:
