Kalender mit JavaScript

[Holzwurm]

Hallo,

ich wollte gerne ein kalender bauen, habe es auch so weit fertig.
Da ich schon eine weile nix mehr mit java gemacht habe und ich grade aufen schlauch stehe habe ich eine frage.

Das ist mein Kalender

<script language="JavaScript">
<!--
setCal()
function getTime() {

now = null
var ampm = ""

 }
function leapYear(year) {
if (year % 4 == 0)
return true

return false
}
function getDays(month, year) {

var ar = new Array(12)
ar[0] = 31
ar[1] = (leapYear(year)) ? 29 : 28
ar[2] = 31
ar[3] = 30
ar[4] = 31
ar[5] = 30
ar[6] = 31
ar[7] = 31
ar[8] = 30
ar[9] = 31
ar[10] = 30
ar[11] = 31

return ar[month]
}
function getMonthName(month) {

var ar = new Array(12)
ar[0] = "Januar"
ar[1] = "Februar"
ar[2] = "März"
ar[3] = "April"
ar[4] = "Mai"
ar[5] = "Juni"
ar[6] = "Juli"
ar[7] = "August"
ar[8] = "September"
ar[9] = "October"
ar[10] = "November"
ar[11] = "Dezember"

return ar[month]
}
function setCal() {

var now = new Date()
var year = now.getYear()
if (year < 2000) year +=1900
var month = now.getMonth()
var monthName = getMonthName(month)
var date = now.getDate()
now = null

var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null

var days = getDays(month, year)

drawCal(firstDay + 1, days, date, monthName, 0 + year)
}
function drawCal(firstDay, lastDate, date, monthName, year) {

var headerHeight = 10
var border = 0
var tablecolor = "silver"
var cellspacing = 0
var headerColor = "silver"
var headerSize = "2"
var colWidth = 50
var dayCellHeight = 10
var dayColor = "silver"
var cellHeight = 20
var todayColor = "silver"
var timeColor = "silver"

var text = ""
text += '<CENTER>'
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>'
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'
text += monthName + ' ' + year
text += '</FONT>'
text += '</TH>'

var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
openCol += '<FONT COLOR="' + dayColor + '">'
var closeCol = '</FONT></TD>'

var weekDay = new Array(7)
weekDay[0] = "So"
weekDay[1] = "Mo"
weekDay[2] = "Di"
weekDay[3] = "Mi"
weekDay[4] = "Do"
weekDay[5] = "Fr"
weekDay[6] = "Sa"

text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol
}
text += '</TR>'

var digit = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>'
text += '<FONT COLOR="' + todayColor + '">'
text += digit
text += '</FONT><BR>'
text += '</TD>'
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}

text += '</TABLE>'
text += '</CENTER> '




document.write(text)
}
// -->
</script>

Futzt alles wunder paar.

Nun zu meine frage ist es möglich im Code Selber Datum´s sagen wir denn 5.09.2012, 6.09.2012, 12.09.2012 ein Termin zusagen und wenn man mit der Maus aufs Datum geht, dass unten ein feld erscheint wo dann zb heute ein text drinne steht, zb am 5.09.2012 Minecraft Event TNT Tag 6.09.2012 RedStone Day.

Es muss aber im code selber stehen da ich es in ein Forum Posten möchte und nix aufen server laden muss.

Ich habe es inmoment mit ein HTML CSS Kalender aber ich habe keine lust mehr jeden Monat die Tage ein zu tragen.

Gruß Holzwurm

 

[threadi]

Da ich schon eine weile nix mehr mit java gemacht habe

Ich nehme an Du hast noch nie etwas mit Java gemacht, denn dein Quellcode ist JavaScript.

Nun zu meine frage ist es möglich im Code Selber Datum´s sagen wir denn 5.09.2012, 6.09.2012, 12.09.2012 ein Termin zusagen und wenn man mit der Maus aufs Datum geht, dass unten ein feld erscheint wo dann zb heute ein text drinne steht, zb am 5.09.2012 Minecraft Event TNT Tag 6.09.2012 RedStone Day.

Das geht sicher. Nur bläht das deinen Quellcode sehr stark auf. Wenn Du das in einem Forum posten willst würde (falls das Forum JavaScript in Beiträgen überhaupt zulässt) ggfs. die maximale Beitragslänge erreicht werden. Daher finde ich deinen Wunsch irgendwie etwas merkwürdig?!

 

[Holzwurm]

Hallo,

das Forum läst JavaScript zu und die Beitragslänge ist auch egal.

Ich denke mal das mit JavaScript ist leichte als jeden Monat duch das HTML zu wühlen und denn Monat ein zu fügen und ^^ und dann auch noch die Termine ein Bauen.

Es gibt zwar Kalender die ihn PHP und MYSQL sind aber mir wäre es doch lieber es in Javascript ein zu Bauen.


ps: zum glück findes du meine vorstellung davon nur etwas merkwürdig:mrgreen:

 

[threadi]

Ok, dann würde ich dir folgendes vorschlagen:

Schreib eine weitere JavaScript-Funktion in der Du die Termine hinterlegst und als Array zurückgeben lässt. Beispiel:

function Termine() {
 var terminliste = new Array();
 // hier die Termine ergänzen
 terminliste['01.09.2012'] = new Object();
 terminliste['01.09.2012']['text'] = "Hier die Beschreibung hin.";
 return terminliste;
}

Vor der Ausgabe des Kalenders lädst Du dann das Array rein

var terminliste = Termine();
var text = ""

und innerhalb des Kalenders prüfst Du bei jedem Tag, ob dieser in dem Array der Terminliste existiert

if( terminliste[datum] ) {
 alert("ja, hier gibt es einen Termin");
}

Das alert() in meinem Beispiel müsstest Du dann mit einem HTML-Code ausgeben und in deine Ausgabe integrieren lassen, je nachdem wie Du es dargestellt haben willst.

 

[Holzwurm]

kannst du mir das ein mal mit mein script oben zusammen stellen ? es ist doch bissel mehr in mein kopf eingerostet als ich gedacht habe muss glaub ich doch mal wieder alles duchlesen ;(