JavaScript-Kalender - Bekomme Formatierung nicht hin

H

Html

Erfahrenes Mitglied
Hallo zusammen, habe im Netz einen Kalender gefunden und ihn auch schon auf meiner Seite eingebaut. Bis auf die Formatierung des aktuellen Monats + Jahr habe ich auch alles hinbekommen. Der Monat und das Jahr sollen die Schriftgröße von 10pt bekommen.

Es gibt zwar die Variable var KSchrGroesse = "1.5pt", jedoch ändere ich damit auch die Größe der Tagesabkürzungen.

Hier mal der Code:


HTML: 
<script language="JavaScript">
<!--
var d = new Date();
var dm = d.getMonth() + 1;
var dj = d.getYear();
if(dj < 2000) dj+=1900;
Kalender(dm,dj);

function Kalender(Monat,Jahr)
{
Monatsname = new Array
("Januar","Februar","M&auml;rz","April","Mai","Juni","Juli",
"August","September","Oktober","November","Dezember");
Tag = new Array ("Mo","Di","Mi","Do","Fr","Sa","So");

var KSchrArt = "Verdana,Arial"; 	/* Schriftart Kalenderkopf */
var KSchrGroesse = "1.75pt";           	/* Schriftgroesse 1-7 Kalenderkopf */
var KSchrFarbe = "#FFFFFF";     	/* Schriftfarbe Kalenderkopf */
var Khgrund = "#000000";        	/* Hintergrundfarbe Kalenderkopf */
var TSchrArt = "Verdana,Arial"; 	/* Schriftart Tagesanzeige */
var TSchrGroesse = "0.5";           	/* Schriftgroesse 1-7 Tagesanzeige */
var TSchrFarbe = "#000000";     	/* Schriftfarbe Tagesanzeige */
var Thgrund = "#FF6259";        	/* Hintergrundfarbe Tagesanzeige */
var SoFarbe = "#A52A2A";        	/* Schriftfarbe f. Sonntage */
var Ahgrund = "#B9B9B9";        	/* Hintergrundfarbe f. heutigen Tag */

var jetzt = new Date();
var DieserMonat = jetzt.getMonth() + 1;
var DiesesJahr = jetzt.getYear();
if(DiesesJahr < 2000) DiesesJahr+=1900;
var DieserTag = jetzt.getDate();
var Zeit = new Date(Jahr,Monat-1,1);
var Start = Zeit.getDay();
if(Start > 0) Start--;
else Start = 6;
var Stop = 31;
if(Monat==4 ||Monat==6 || Monat==9 || Monat==11 ) --Stop;
if(Monat==2)
{
 AnzTage=-3;
 if(Jahr%4==0) Stop++;
 if(Jahr%100==0) Stop--;
 if(Jahr%400==0) Stop++;
}
document.write("<table border=1px style=border-collapse:collapse width=85% bordercolor=#ffffff align=center cellpadding=0 cellspacing=0>");
var Monatskopf = Monatsname[Monat-1] + " " + Jahr;
SchreibeKopf(Monatskopf,Khgrund,KSchrFarbe,KSchrGroesse,KSchrArt);
var Tageszahl = 1;
for(i=0;i<=5;i++)
 {
  document.write("<tr>");
  for(j=0;j<=5;j++)
   {
    if((i==0)&&(j < Start))
     SchreibeZelle(" ",Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
    else
     {
      if(Tageszahl > Stop)
        SchreibeZelle(" ",Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
      else
       {
        if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
         SchreibeZelle(Tageszahl,Ahgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
        else
         SchreibeZelle(Tageszahl,Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
        Tageszahl++;
       }
      }
     }
    if(Tageszahl > Stop)
      SchreibeZelle(" ",Thgrund,SoFarbe,TSchrGroesse,TSchrArt);
    else
     {
      if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
        SchreibeZelle(Tageszahl,Ahgrund,SoFarbe,TSchrGroesse,TSchrArt);
      else
        SchreibeZelle(Tageszahl,Thgrund,SoFarbe,TSchrGroesse,TSchrArt);
      Tageszahl++;
     }
    document.write("</tr>");
  }
document.write("</table>");
}

function SchreibeKopf(Monatstitel,HgFarbe,SchrFarbe,SchrGroesse,SchrArt)
{
document.write("<tr>");
document.write("<td align=center colspan=7 valign=middle bgcolor="+HgFarbe+">");
document.write('<font size='+SchrGroesse+' color='+SchrFarbe+' face="'+SchrArt+'"><b>');
document.write(Monatstitel);
document.write("</b></font></td></tr>");
document.write("<tr>");
for(i=0;i<=6;i++)
  SchreibeZelle(Tag[i],HgFarbe,SchrFarbe,SchrGroesse,SchrArt);
document.write("</tr>");
}

function SchreibeZelle(Inhalt,HgFarbe,SchrFarbe,SchrGroesse,SchrArt)
{
document.write("<td align=center valign=middle bordercolor=#FFFFFF bgcolor="+HgFarbe+">");
document.write('<font size='+SchrGroesse+' color='+SchrFarbe+' face="'+SchrArt+'"><b>');
document.write(Inhalt);
document.write("</b></font></td>");
}
// -->
</script>


Hoffe da kann mir jemand weiterhelfen...


mfg,Olli
 
Hi,

ich habe die FONT-Tags entfernt und formatiere die Zelleninhalte nun mit CSS - die Angaben erfolgen jetzt in tatsächlichen
pt-Angaben. Zudem habe ich eine zusätzliche Variable für die Wochentagsnamen eingefügt, so dass diese ebenfalls
individuell angepasst werden können.
Code: 
<script type="text/javascript">
<!--
var d = new Date();
var dm = d.getMonth() + 1;
var dj = d.getYear();
if(dj < 2000) dj+=1900;
Kalender(dm,dj);

function Kalender(Monat,Jahr)
{
Monatsname = new Array
("Januar","Februar","M&auml;rz","April","Mai","Juni","Juli",
"August","September","Oktober","November","Dezember");
Tag = new Array ("Mo","Di","Mi","Do","Fr","Sa","So");

var KSchrArt = "Verdana,Arial"; 	/* Schriftart Kalenderkopf */
var KSchrGroesse = "14pt";        /* Schriftgroesse in pt für Kalenderkopf */
var WoTaSchrGroesse = "11pt";     /* Schriftgroesse für Namen der Wochentage */
var KSchrFarbe = "#FFFFFF";     	/* Schriftfarbe Kalenderkopf */
var Khgrund = "#000000";        	/* Hintergrundfarbe Kalenderkopf */
var TSchrArt = "Verdana,Arial"; 	/* Schriftart Tagesanzeige */
var TSchrGroesse = "10pt";        /* Schriftgroesse in pt für Tagesanzeige */
var TSchrFarbe = "#000000";     	/* Schriftfarbe Tagesanzeige */
var Thgrund = "#FF6259";        	/* Hintergrundfarbe Tagesanzeige */
var SoFarbe = "#A52A2A";        	/* Schriftfarbe f. Sonntage */
var Ahgrund = "#B9B9B9";        	/* Hintergrundfarbe f. heutigen Tag */

var jetzt = new Date();
var DieserMonat = jetzt.getMonth() + 1;
var DiesesJahr = jetzt.getYear();
if(DiesesJahr < 2000) DiesesJahr+=1900;
var DieserTag = jetzt.getDate();
var Zeit = new Date(Jahr,Monat-1,1);
var Start = Zeit.getDay();
if(Start > 0) Start--;
else Start = 6;
var Stop = 31;
if(Monat==4 ||Monat==6 || Monat==9 || Monat==11 ) --Stop;
if(Monat==2)
{
 AnzTage=-3;
 if(Jahr%4==0) Stop++;
 if(Jahr%100==0) Stop--;
 if(Jahr%400==0) Stop++;
}
document.write("<table border=1px style=border-collapse:collapse width=85% bordercolor=#ffffff align=center cellpadding=0 cellspacing=0>");
var Monatskopf = Monatsname[Monat-1] + " " + Jahr;
SchreibeKopf(Monatskopf,Khgrund,KSchrFarbe,KSchrGroesse,KSchrArt, WoTaSchrGroesse);
var Tageszahl = 1;
for(i=0;i<=5;i++)
 {
  document.write("<tr>");
  for(j=0;j<=5;j++)
   {
    if((i==0)&&(j < Start))
     SchreibeZelle(" ",Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
    else
     {
      if(Tageszahl > Stop)
        SchreibeZelle(" ",Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
      else
       {
        if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
         SchreibeZelle(Tageszahl,Ahgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
        else
         SchreibeZelle(Tageszahl,Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
        Tageszahl++;
       }
      }
     }
    if(Tageszahl > Stop)
      SchreibeZelle(" ",Thgrund,SoFarbe,TSchrGroesse,TSchrArt);
    else
     {
      if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
        SchreibeZelle(Tageszahl,Ahgrund,SoFarbe,TSchrGroesse,TSchrArt);
      else
        SchreibeZelle(Tageszahl,Thgrund,SoFarbe,TSchrGroesse,TSchrArt);
      Tageszahl++;
     }
    document.write("</tr>");
  }
document.write("</table>");
}

function SchreibeKopf(Monatstitel,HgFarbe,SchrFarbe,SchrGroesse,SchrArt,WoTaSchrGroesse)
{
document.write("<tr>");
document.write("<td align=center colspan=7 valign=middle bgcolor="+HgFarbe+" style=\"font-family: "+SchrArt+"; font-size:"+SchrGroesse+"; color:"+SchrFarbe+"\">");
document.write('<b>');
document.write(Monatstitel);
document.write("</b></td></tr>");
document.write("<tr>");
for(i=0;i<=6;i++)
  SchreibeZelle(Tag[i],HgFarbe,SchrFarbe,WoTaSchrGroesse,SchrArt);
document.write("</tr>");
}

function SchreibeZelle(Inhalt,HgFarbe,SchrFarbe,SchrGroesse,SchrArt)
{
document.write("<td align=center valign=middle bordercolor=#FFFFFF bgcolor="+HgFarbe+" style=\"font-family: "+SchrArt+"; font-size:"+SchrGroesse+"; color:"+SchrFarbe+"\">");
document.write('<b>');
document.write(Inhalt);
document.write("</b></td>");
}
// -->
</script>
Ciao
Quaese
 
Super vieln Dank!

So habe ich es mir vorgestellt. Nur leider funktioniert das ganze nur im IE.
Habe mal ein Screenshot von beiden Browsern angehängt.

Kannst du mir bitte noch sagen warum der firefox das mal wieder anders darstellt?


mfg,Olli
 
Bei mir wird Quaeses Lösungsvorschlag von beiden Browsern gleichermaßen interpretiert und der Kalender einheitlich dargestellt.

Wie lautet denn der vollständige Quellcode (HTML + CSS) des Dokuments?
 
Hallo, habe den code nochmal seperat getestet. Habe zuvor noch einen kleine Änderung gemacht (rot). Hatte nämlich den unteren Rand doppelt, also einmal von dem Rahmen ausenrum und von dem Zeilenrahmen.

Ohne diese Änderung wird der code von beiden browsern gleich interpretiert.

Setze einfach mal die Rahmenfarbe auf schwarz, dann siehst du was ich meine.

Wie kann ich das sonst umgehen, oder ist die Änderung nicht korrekt


Code: 
<script type="text/javascript">
<!--
var d = new Date();
var dm = d.getMonth() + 1;
var dj = d.getYear();
if(dj < 2000) dj+=1900;
Kalender(dm,dj);

function Kalender(Monat,Jahr)
{
Monatsname = new Array
("Januar","Februar","M&auml;rz","April","Mai","Juni","Juli",
"August","September","Oktober","November","Dezember");
Tag = new Array ("Mo","Di","Mi","Do","Fr","Sa","So");

var KSchrArt = "Arial"; 	/* Schriftart Kalenderkopf */
var KSchrGroesse = "10pt";        /* Schriftgroesse in pt für Kalenderkopf */
var WoTaSchrGroesse = "7pt";     /* Schriftgroesse für Namen der Wochentage */
var KSchrFarbe = "#FFFFFF";     	/* Schriftfarbe Kalenderkopf */
var Khgrund = "#000000";        	/* Hintergrundfarbe Kalenderkopf */
var TSchrArt = "Arial"; 	/* Schriftart Tagesanzeige */
var TSchrGroesse = "8pt";        /* Schriftgroesse in pt für Tagesanzeige */
var TSchrFarbe = "#000000";     	/* Schriftfarbe Tagesanzeige */
var Thgrund = "#FF6259";        	/* Hintergrundfarbe Tagesanzeige */
var SoFarbe = "#0001A2";        	/* Schriftfarbe f. Sonntage */
var Ahgrund = "#B9B9B9";        	/* Hintergrundfarbe f. heutigen Tag */

var jetzt = new Date();
var DieserMonat = jetzt.getMonth() + 1;
var DiesesJahr = jetzt.getYear();
if(DiesesJahr < 2000) DiesesJahr+=1900;
var DieserTag = jetzt.getDate();
var Zeit = new Date(Jahr,Monat-1,1);
var Start = Zeit.getDay();
if(Start > 0) Start--;
else Start = 6;
var Stop = 31;
if(Monat==4 ||Monat==6 || Monat==9 || Monat==11 ) --Stop;
if(Monat==2)
{
 AnzTage=-3;
 if(Jahr%4==0) Stop++;
 if(Jahr%100==0) Stop--;
 if(Jahr%400==0) Stop++;
}
document.write("<table style=\"border-collapse:collapse; border-width: 1px 1px 0px 1px; border-style:solid; border-color:white\" width=85% align=center cellpadding=0 cellspacing=0>");
var Monatskopf = Monatsname[Monat-1] + " " + Jahr;
SchreibeKopf(Monatskopf,Khgrund,KSchrFarbe,KSchrGroesse,KSchrArt, WoTaSchrGroesse);
var Tageszahl = 1;
for(i=0;i<=5;i++)
 {
  document.write("<tr>");
  for(j=0;j<=5;j++)
   {
    if((i==0)&&(j < Start))
     SchreibeZelle(" ",Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
    else
     {
      if(Tageszahl > Stop)
        SchreibeZelle(" ",Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
      else
       {
        if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
         SchreibeZelle(Tageszahl,Ahgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
        else
         SchreibeZelle(Tageszahl,Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
        Tageszahl++;
       }
      }
     }
    if(Tageszahl > Stop)
      SchreibeZelle(" ",Thgrund,SoFarbe,TSchrGroesse,TSchrArt);
    else
     {
      if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
        SchreibeZelle(Tageszahl,Ahgrund,SoFarbe,TSchrGroesse,TSchrArt);
      else
        SchreibeZelle(Tageszahl,Thgrund,SoFarbe,TSchrGroesse,TSchrArt);
      Tageszahl++;
     }
    document.write("</tr>");
  }
document.write("</table>");
}

function SchreibeKopf(Monatstitel,HgFarbe,SchrFarbe,SchrGroesse,SchrArt,WoTaSchrGroesse)
{
document.write("<tr>");
document.write("<td align=center colspan=7 valign=middle bgcolor="+HgFarbe+" style=\"font-family: "+SchrArt+"; font-size:"+SchrGroesse+"; color:"+SchrFarbe+"\">");
document.write('<b>');
document.write(Monatstitel);
document.write("</b></td></tr>");
document.write("<tr>");
for(i=0;i<=6;i++)
  SchreibeZelle(Tag[i],HgFarbe,SchrFarbe,WoTaSchrGroesse,SchrArt);
document.write("</tr>");
}

function SchreibeZelle(Inhalt,HgFarbe,SchrFarbe,SchrGroesse,SchrArt)
{
document.write("<td align=center valign=middle  style=\"border-collapse:collapse; border-width: 1px 1px 0px 1px; border-style:solid; border-color:white\" bgcolor="+HgFarbe+" style=\"font-family: "+SchrArt+"; font-size:"+SchrGroesse+"; color:"+SchrFarbe+"\">");
document.write('<b>');
document.write(Inhalt);
document.write("</b></td>");
}
// -->
</script>

mfg,Olli
 
Zuletzt bearbeitet:
Hallo habe den Fehler gefunden. Und zwar lag es an den zwei style-Attributen. Der Firefox hatte das letztere dann nicht mehr interpretiert.

Nur 100% ist das ganze noch nicht. Habe mal ein screenshot vom firefox angehangen.
Woran liegt das?

Auch die Breite der einzelnen Spalten ist unterschiedlich. So ist kleiner als Mo.

mfg,Olli
 

Anhänge

  • 27639attachment.gif
    27639attachment.gif
    10,2 KB · Aufrufe: 12
  • 27640attachment.gif
    27640attachment.gif
    7,7 KB · Aufrufe: 27
  • 27641attachment.bmp
    27641attachment.bmp
    38,5 KB · Aufrufe: 18
Also nach langem rum probieren habe ich den Fehler gefunden.

In folgendem code-ausschnitt:


HTML: 
.......

document.write("<table style=\"border-collapse:collapse; border-width: 1px 1px 0px 1px; border-style:solid; border-color:white\" width=85% align=center cellpadding=0 cellspacing=0>");
var Monatskopf = Monatsname[Monat-1] + " " + Jahr;
SchreibeKopf(Monatskopf,Khgrund,KSchrFarbe,KSchrGroesse,KSchrArt, WoTaSchrGroesse);
var Tageszahl = 1;
for(i=0;i<=5;i++)
 {
  document.write("<tr>");
  for(j=0;j<=5;j++)
   {
    if((i==0)&&(j < Start))
     SchreibeZelle(" ",Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
    else
     {
      if(Tageszahl > Stop)

.....

habe ich im roten Teil die fünf durch eine 4 ersetzt. Jetzt macht er mir auch keine zeile mehr zuviel.

Nur noch eine Frage:Muss im grünen code auch die 5 durch 4 ersetzt werden?


mfg,Olli
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück