Aleksej V.: Kalender

Beitrag lesen

Hallo,

Es wäre nett, wenn du mir einen Kalender zusammen basteln kannst, in dem man einzelne Monate bzw. zurück springen kann, der das aktuelle Datum hervorhebt.

Klar, hier ist das Script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body onLoad="">
<div style="border:#AAAAAA 2px solid; background-color:white; width:308px; height:350px;">
<!-- gesamter kalender -->
<div style="width:304px; border:#AAAAAA 2px solid; height:40px; text-align:center;" id="titel"></div>
<!-- Monat und Jahr -->
<script type="text/JavaScript">
 var tagarray = new Array('Mo','Di','Mi','Do','Fr','Sa','So');
 var monatarray = new Array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');
 var besonders = new Array();
   besonders[0] = new Array(10,11,2002);
   besonders[1] = new Array(23,5,2002);
   besonders[2] = new Array(16,3,2003);
///////// ^^ besondere ereignisse eintragen: tag,monat,jahr
 var hinter1 = 'white' // hintergrundfarbe der fälder
 var hinter2 = 'blue'  // hintergrundfarbe für heute
 var hinter3 = 'yellow'// hintergrundfarbe für besonderes
 mache_grundgeruest();

function mache_grundgeruest() {
  for(i=0;i!=7;i++) {
   document.write('<div style="width:40px; float:left; border:#AAAAAA 2px solid; height:40px;">'+tagarray[i]+'</div>');
////////// tage
  }
  for(i=1;i!=(7*6+1);i++) {
   if(i/7==Math.round(i/7)) {
    document.write('<div style="width:40px; float:left; border:#AAAAAA 2px solid; height:40px; color:red; background-color:'+hinter1+';" id="wochentag'+i+'"></div>');
///////// sonntage
   } else {
    document.write('<div style="width:40px; float:left; border:#AAAAAA 2px solid; height:40px; background-color:'+hinter1+';" id="wochentag'+i+'"></div>');
//////// wochentage
   }
  }
 }

var now = new Date();
 var jahr = now.getFullYear();
 var jahr1 = now.getFullYear();
 var monat = now.getMonth();
 var monat1 = now.getMonth();
 var datum = now.getDate();

eintrag_machen(jahr,monat);
 var aktuell;

function eintrag_machen(j,m) {
  var mydate = new Date(j,m,1);
  var myday = mydate.getDay();
  if (myday==0) myday=7
  document.getElementById('titel').innerHTML = j+' &nbsp '+monatarray[monat];
  var lord = 31;
  if (m==1) lord-2;
  if (m==0||m==2||m==4||m==6||m==7||m==9||m==11) lord++;
   for(i=1;i!=7*6+1;i++) document.getElementById('wochentag'+i).innerHTML = '';
   for(i=1;i!=7*6+1;i++) document.getElementById('wochentag'+i).style.backgroundColor = hinter1
   for(i=1;i!=lord;i++) document.getElementById('wochentag'+(myday+i-1)).innerHTML = i;
  if(monat==monat1&&jahr==jahr1) {
   aktuell=myday+datum-1;
   document.getElementById('wochentag'+aktuell).style.backgroundColor = hinter2;
  }
  for(i=0;i!=besonders.length;i++) {
   if(besonders[i][2]==jahr&&besonders[i][1]==monat+1) {
   document.getElementById('wochentag'+(myday-1+besonders[i][0])).style.backgroundColor = hinter3;
   }
  }
 }

function zuruck() {
  if(monat==0) {
   monat = 11;
   jahr--;
  } else monat--;
  document.getElementById('wochentag'+aktuell).style.backgroundColor = hinter1;
  eintrag_machen(jahr,monat);
 }

function vor() {
  if(monat==11) {
   monat = 0;
   jahr++;
  } else monat++;
  document.getElementById('wochentag'+aktuell).style.backgroundColor = hinter1;
  eintrag_machen(jahr,monat);
 }

</script>
</div>
<button onClick="zuruck()">&lt&lt zurück</button> &nbsp
<button onClick="vor()">vor &gt&gt</button>
</body>
</html>

Das Design musst du selber anpassen, ich hab dir komentare mit hinweisen auf die formatierung hinterlassen.

Etwas, was ich gerne noch hätte, wenns nich zu viel Ausfwand macht, wäre das Hervorheben von wichtigen Ereignissen.

Das geht, das eintragen ist etwas umständlich, aber funktioniert.

Grüße aus Düsseldorf,

Aleksej