zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Änderbarar er Javascript Kalender

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.01.2022, 10:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2022
Beiträge: 9
wizzardthegrey befindet sich auf einem aufstrebenden Ast
Standard Änderbarer Javascript Kalender

Guten Morgen

Ich bin auf der Suche nach einem änderbaren Javacript Jahreskalender der mir den Aktuellen Tag Farblich (Fett Schwarz) hervorhebt und den Sonntag (Rot) hervorhebt. Weiterhin muss er änderbar sein, sodass ich Termine eintragen kann. Wenn man auf einen Tag klickt, sollte eine Ausgabe unter dem Kalende erscheinen, wo man die eingetragenen Events sehen kann.

Leider habe ich nicht so die grosse ahnung von JS, das leider nicht ich mir das selbst programmieren kann.

Der Kalender soll hier erscheinen.

Asel 800

Danke im Vorraus.

Geändert von wizzardthegrey (30.01.2022 um 16:37 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2022, 11:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2022
Beiträge: 9
wizzardthegrey befindet sich auf einem aufstrebenden Ast
Standard

Guten Morgen

Ich habe einen JS Kalender gefunden, der meine Anforderungen entspricht.
Habe da nur noch kleinere Fragen.

Hier erstmal meine Kalender Seite:
Asel 800

Nun zu meinen Fragen:
1.Wie kann ich mir die Sonntage in Rot Agezeigen lassen?
2.Wie kann ich den aktuellen Tag in Grün Anzeigen lassen?
3.Wie kann ich Events eintragen und sie mir bei klick auf den Tag unten in der Ausgabebox anzeigen lassen?

Hierder html Code:
HTML-Code:
<div class="kalender"><br>
	<h2>Kalender</h><br>
	<table border=1 id='calendar'>
		<tr style='visibility:collapse;' hidden>
			<td colspan=7 id='date_memory'>---</td>
		</tr>
		<tr>
			<td class='calendar_head'><a class='calendar_link'
				href='javascript:prevMonth()'> &laquo;</a></td>
			<td colspan=5 class='calendar_head_month' id='calendar_month'>
				---</td>
			<td class='calendar_head'><a class='calendar_link'
				href='javascript:nextMonth()'> &raquo;</a></td>
		</tr>
		<tr>
			<td class='calendar_day'>Mo</td>
			<td class='calendar_day'>Di</td>
			<td class='calendar_day'>Mi</td>
			<td class='calendar_day'>Do</td>
			<td class='calendar_day'>Fr</td>
			<td class='calendar_day'>Sa</td>
			<td class='calendar_day'>So</td>
		</tr>
		<tr>
			<td class='calendar_entry' id='calendar_entry_1'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_2'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_3'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_4'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_5'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_6'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_7'>-x-</td>
		</tr>
		<tr>
			<td class='calendar_entry' id='calendar_entry_8'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_9'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_10'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_11'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_12'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_13'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_14'>-x-</td>
		</tr>
		<tr>
			<td class='calendar_entry' id='calendar_entry_15'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_16'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_17'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_18'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_19'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_20'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_21'>-x-</td>
		</tr>
		<tr>
			<td class='calendar_entry' id='calendar_entry_22'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_23'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_24'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_25'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_26'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_27'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_28'>-x-</td>
		</tr>
		<tr>
			<td class='calendar_entry' id='calendar_entry_29'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_30'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_31'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_32'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_33'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_34'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_35'>-x-</td>
		</tr>
		<tr>
			<td class='calendar_entry' id='calendar_entry_36'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_37'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_38'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_39'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_40'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_41'>-x-</td>
			<td class='calendar_entry' id='calendar_entry_42'>-x-</td>
		</tr>
	</table>

	<script type='text/javascript'>
		iniCalendar();
		
		/*0 = wie bisher, Datum wird in die Box geschrieben*/
		setReturnModus(1);
		/*1 = neu, Eventtext wird in die Box geschrieben
		Das event muss in der calendar.js in der Function
		getEventtext definiert werden.*/
		//setReturnModus(1);
	</script>


	<br />
	<br />
	<form id='myform'>
		<input id='datum' size=30/>
	</form>

	</div>
Hier der JS Code zum Kalender:
Code:
/**
* Ist ein Datum gültig
* @param y: Jahr
* @param m: Monat
* @param d: Tag
* @return true = gültig, false = ungültig
*/
function isValidDate(y,m,d)
{
	//--Gibt Datum des letzten Tag des Monats aus--
	var thisDate = new Date(y,m,1);
	//einen Tag weiter schalten
	thisDate.setMonth(thisDate.getMonth()+1);
	//vom ersten Tag des nächsten monats
	//ein Tag abziehen
	thisDate.setTime(thisDate.getTime() - 12*3600*1000);
	
	if (d>thisDate.getDate())
		{return false;}
	else
		{return true;}
}
/**
* ermittelt den letzten Tag des aktuellen Monats
* @return: gibt letzten Tag zurück
*/
function getLastDayOfMonth()
{
	var d = getDateFromMemory();
	//einen Tag weiter schalten
	d.setMonth(d.getMonth()+1);
	//den ersten des Monats setzen
	d.setDate(1);
	//vom ersten Tag des nächsten monats
	//ein Tag abziehen
	d.setTime(d.getTime() - 12*3600*1000);
	return d.getDate();
}
/**
* Übernimmt das angeklickte Datum in das Ausgabeelement
* @param n: Kalendertag zum Kombinieren mit Monat und Jahr
*/
function putDate(n)
{
	var d = getDateFromMemory();
	d.setDate(n);
	
	
	var returnValue;
	if (returnModus==0) //Datum zurückgeben
		{returnValue = d.getDate()+'.'+(d.getMonth()+1)+'.'+d.getFullYear();}
	else{
		returnValue = getEventtext( d.getFullYear(), d.getMonth(), d.getDate());
		if (!returnValue)
			{returnValue = 'kein Event!';}
	}
	
	document.forms['myform'].elements['datum'].value = returnValue;
}
/**
* setzt das übergebene Datum in die Speicherzelle
* @param d: datum zum schreiben in die Speicherzelle
*/
function setDateToMemory(d)
{
	document.all.date_memory.innerHTML = d.getFullYear()+','+(d.getMonth()+1)+','+d.getDate();
}
/**
* Gibt das Datum aus der Speicherzelle zurück
* @return: datum in Date format
*/
function getDateFromMemory()
{
	var s = document.all.date_memory.innerHTML;
	var z = s.split(',');
	return new Date(z[0],z[1]-1,z[2]);
}
/**
* schaltet einen Monat Weiter
*/
function nextMonth()
{
	var d = getDateFromMemory();
	var m = d.getMonth()+1;
	var y = d.getFullYear();
	//Falls Jahres wechsel
	if ((m+1)>12)
	{
		m = 0;
		y = y + 1;
	}
	d = new Date(y,m,01);
	setDateToMemory(d);
	loadcalendar();
}
/**
* schaltet einen Monat zurück
*/
function prevMonth()
{
	var d = getDateFromMemory();
	var m = d.getMonth()+1;
	var y = d.getFullYear();
	
	//Falls Jahres1wechsel
	if ((m-1)<1)
	{
		m = 11;
		y = y - 1;
	}
	else
	{
		m = m - 2;
	}
	d = new Date(y,m,01);
	setDateToMemory(d);
	
	loadcalendar();
}
/**
* zum erstmaligen aufrufen des Kalenders
*/
function iniCalendar()
{
	//heutiges Datum setzen
	var d = new Date();
	//aktuelles Datum speichern
	setDateToMemory(d);
	//Calender laden
	loadcalendar();
}
/**
*	Läd die Tabelle mit dem übergebenen Datum (Monat)
*/
function loadcalendar() 
{
	//aktuelles Datum holen (1. des Monats)
	var d = getDateFromMemory();
	//Monat ermitteln aus this_date (zählen beginnt bei 0, daher +1)
	var m = d.getMonth(); 
	//Jahr ermitteln aus this_date (YYYY)
	var y = d.getFullYear();
	//Monat und Jahr eintragen
	document.all.calendar_month.innerHTML = getMonthname(m+1) + ' ' + y;
	//ersten Tag des Monats festlegen
	var firstD = d;
	firstD.setDate(1);
	//Wochentag ermitteln vom 1. des übergebenen Monats (Wochentag aus firstD)
	var dateDay = firstD.getDay(); //So = 0, Mo = 1 ... Sa = 6
	//Sonntag soll den Wert 7 darstellen -> Mo = 1 ... So = 7
	dateDay = (dateDay == 0) ? 7: dateDay;
	//Speicher für aktuelle Zelle
	var entry = '';
	//Speicher für aktuellen Tag
	var zahl = '';
	//heutiges Datum ermitteln
	var hD = new Date();
	//ist event 
	//falls event, dann darf der Rahmen
	//nicht vom isHolyday überschrieben werden
	var bEvent = false;
	
	//Alle Kalender Spalten durchzählen
	for (var i = 1; i <= 42; i++)
	{
		bEvent = false;
		//holen der aktuellen Zelle
		entry = document.getElementById('calendar_entry_'+i);
		//errechnen der Tages Zahl
		zahl = (i+1)-dateDay;
		//datum zusammenschreiben
		var dx = new Date(y,m,zahl);

		//Eintragen der Daten ab ersten Tag im Monat und wenn es ein gültiges Datum ist
		if (i >= dateDay && isValidDate(y,m,zahl))		
		{
			entry.innerHTML = '<a class=calendar_link href=javascript:putDate('+zahl+')>'+zahl+'</a>';
			entry.hidden = false;
			entry.style.visibility='visible';
			entry.style.border = 'solid 1px';
			//wenn Event ist
			if (!getEventtext(y,m,zahl))
				{entry.style.color='000000';}
			else{
				entry.style.color='00FF00';
				//Eventtext wird als Tooltip angezeigt
				entry.title = getEventtext(y,m,zahl);
				bEvent = true;
			}
			//Wenn Tag ein Feiertag ist
			if (isHoliday(m,zahl))
				{entry.style.color='FF0000';}
			else{
				if (!bEvent)
					entry.style.color='000000';
			}
						
			//heutiges Datum hervorheben			
			if (hD.getDate() == dx.getDate() && 
				hD.getMonth() == dx.getMonth() && 
				hD.getYear() == dx.getYear())
			{
				entry.style.fontWeight = 'bold';
				entry.style.backgroundColor = 'FFFF33';
			}
			
				
		}
		else
		{
			entry.innerHTML = '';
		
			if (i>= dateDay)
			{//Wenn Kalenderende
				//Zelle = hidden
				entry.hidden = true;
				entry.style.border = '0px';
			}
			else
			{//Wenn Kalenderanfang
				//Border-width = 0px
				entry.style.border = '0px';
			}
		} 				  				
	}		
}

/**
 * Prüft ob an einem bestimmten Tag ein Event stattfindet
 * und gibt dieses als Text zurück.
 * @param int y: Jahr
 * @param int m: Monat
 * @param int d: tag
 * @return Veranstaltungstext, 
 * 		wenn keine veranstaltung = false
 */
function getEventtext(y,m,d)
{
	//convertieren in int-Zahlen
	y = parseInt(y);
	m = parseInt(m);
	d = parseInt(d);
	
	//Monate fangen bei 0 an zuzählen
	m++;
	//definieren der Events
	var h = new Array(7);
	
	//exemplarisch nehme ich eine
	//Liste an Festivals her
	h[0] = "22.1.2014|Rap Mayhem Festival, München";
	h[1] = "1.2.2014|Spirit Of Goa, Hamburg";
	h[2] = "16.2.2014|Emergenza Acoustic Festival, Berlin";
	h[3] = "2.3.2014|Skarneval Koblenz, Wehdem";
	h[4] = "12.4.2014|Balinger Rockfestival, Dillingen";
	h[5] = "5.7.2014|HipHop Open, Stuttgart";
	h[6] = "19.7.2014|Feeling Fine Festival, Espelkamp";
	h[7] = "26.7.2014|Beach Party, Duisburg";
	
	var dH;
	var eH;
	for ( var i = 0; i < h.length; i++) {
		//Datum eH[0] von Event eH[1] trennen
		eH = h[i].split("|");
		//Datum trennen > Tag dH[0], Monat dH[1], Jahr dH[2]
		dH = eH[0].split(".");
		
		if (parseInt(dH[0]) == d && parseInt(dH[1]) == m && parseInt(dH[2]) == y) {
			return eH[1];
		}
	}
	return false;
}

/**
* Ist das Angegebene Datum ein Feiertag?
* @param m : Monat
* @param d : Tag
*/
function isHoliday(m,d)
{	
	//Monate fangen bei 0 an zuzählen
	m++;
	//festlegen der Feiertage
	var h = new Array(7);
	h[0] = "1.1";
	h[1] = "6.1";
	h[2] = "1.5";
	h[3] = "3.10";
	h[4] = "1.11";
	h[5] = "25.12";
	h[6] = "26.12";
	h[7] = "31.12";
	var iD;
	//Alle Daten Testen
	for ( var i = 0; i < h.length; i++) {
		iH = h[i].split(".");
				
		if (iH[0] == d && iH[1] == m) {
			return true;
		}
	}
	//Wenn kein Feiertag gefunden
	return false;
	
}

/**
 * regelt welche Rückgabe erfolgt.
 * 0 = geklicktes Datum wird zurückgegeben.
 * 1 = Veranstaltungstext aus getEventtext() 
 * 		wird zurückgegeben.
 */
var returnModus = 0;

/**
 * Setzt die Art der Rückgabe bei, Datums-klick
 * @param returnIndex:
 * 		0 = geklicktes Datum zurückgeben
 * 		1 = event aus getEventtext()
 */
function setReturnModus(returnIndex)
	{returnModus = returnIndex;}

/**
* Gibt den Monatsnamen anhand der Monatsnummer zurück
*@param monthnumber: Monatsnummer (1-12)
*/
function getMonthname(monthnumber)
{
	switch(monthnumber)
	{
		case 1:
		  return 'Januar';
		  break;
		case 2:
		  return 'Februar';
		  break;
		case 3:
		  return 'März';
		  break;
		case 4:
		  return 'April';
		  break;
		case 5:
		  return 'Mai';
		  break;
		case 6:
		  return 'Juni';
		  break;
		case 7:
		  return 'Juli';
		  break;
		case 8:
		  return 'August';
		  break;
		case 9:
		  return 'September';
		  break;
		case 10:
		  return 'Oktober';
		  break;
		case 11:
		  return 'November';
		  break;
		case 12:
		  return 'Dezember';
		  break;
		default:
		  return '---';
	}
}
Ich hoffe ihr könnt mir da helfen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.02.2022, 14:26
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

Entweder du sprichst direkt die IDs der entsprechenden Felder an:
Code:
#calendar_entry_7,
#calendar_entry_14,
#calendar_entry_21,
#calendar_entry_28,
#calendar_entry_35 {
	background-color: #ff000044;
}
Eleganter finde ich es aber hier :nth-child() zu nutzen:

Code:
.calendar_entry:nth-child(7) {
	background-color: #f004;
}
Ach ja, hier wird deine Überschrift nicht richtig geschlossen:
HTML-Code:
<h2>Kalender</h><br>
Das sollte so:
HTML-Code:
<h2>Kalender</h2>
(Dann kannst du dir vermutlich auch den erzwungenen Umbruch sparen.)
Mit Zitat antworten
  #4 (permalink)  
Alt 01.02.2022, 15:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2022
Beiträge: 9
wizzardthegrey befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von top Beitrag anzeigen
Entweder du sprichst direkt die IDs der entsprechenden Felder an:
Code:
#calendar_entry_7,
#calendar_entry_14,
#calendar_entry_21,
#calendar_entry_28,
#calendar_entry_35 {
	background-color: #ff000044;
}
Eleganter finde ich es aber hier :nth-child() zu nutzen:

Code:
.calendar_entry:nth-child(7) {
	background-color: #f004;
}
Ach ja, hier wird deine Überschrift nicht richtig geschlossen:
HTML-Code:
<h2>Kalender</h><br>
Das sollte so:
HTML-Code:
<h2>Kalender</h2>
(Dann kannst du dir vermutlich auch den erzwungenen Umbruch sparen.)
Danke für den Vorschlag mit dem Sonntag, hab es so gemacht.

Code:
.calendar_entry:nth-child(7) {
	background-color: #ff5757;
}
Code:
HTML-Code:
<h2>Kalender</h2>
Mit Zitat antworten
  #5 (permalink)  
Alt 02.02.2022, 12:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2022
Beiträge: 9
wizzardthegrey befindet sich auf einem aufstrebenden Ast
Standard

Guten Tag

Kann mir hier keiner helfen?

Nochmal zur erklärung wie mache ich es, das ich Termine im Kalender eintragen kann und sie dann unter dem Kalender angezeigt werden?
Mit Zitat antworten
  #6 (permalink)  
Alt 02.02.2022, 14:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Mir ist nicht ganz klar was du genau brauchst. Einen fertigen Kalender? Dann brauchst du ja auch eine Datenbank, wo du die Events speicherst. Wie schaut deine Datenbank zur Zeit denn aus?
Dann braucht es natürlich auch noch eine Möglichkeit, alle nötigen Daten zu holen und dann anzuzeigen... Bei welchem Punkt hast du genau Probleme?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Software Engineer JavaScript Framework (m/w) itchristian Jobs 0 09.01.2012 18:27
Erkennen ob JavaScript deaktiviert ist und anderen Inhalt anzeigen Ares Javascript & Ajax 7 02.02.2011 13:45
Wort in Javascript Code einfügen; dann Javascript Code ausgeben Sp33dy G0nz4l3s Javascript & Ajax 1 23.05.2008 10:37
Impressumsaufruf mit Javascript Sinclair Javascript & Ajax 6 19.05.2008 16:41
JavaScript Dateien dynamisch nachladen Dave.ch Javascript & Ajax 1 07.12.2007 01:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:25 Uhr.