ByteCal V1.0, die Unterstützung für dein Formular um Termine über einen Kalender einzugeben

Beschreibung zu ByteCal V1.0....

Dieser Kalender unterstützt deine User oder dich dabei in deinem Formular ein Datum, bzw. ein Datum sowie eine Uhrzeit komfortabel per Mausklicks durch einen Kalender anzugeben.

Dieser Kalender ist so konzipiert, dass er problemlos in bestehende Formulare eingebaut werden kann.

Zusätzlich bietet die Klasse dieses Kalenders dir die Möglichkeit das eingegebene Datum in ein SQL fähiges Datum bzw. in ein Unix-Timestamp/Zeitstempel umzuwandeln.

Durch die Verwendung eines auf der Webseite eingebundenen iframes der in der unmittelbaren Nähe des Mauszeigers, bei bedarf sichtbar wird, gibt es keine Probleme mit extrem eingestellten Popup Blockern.

Durch das Benutzen von normalen Text Input Feldern ist auch gewährleistet, dass der User ohne eingeschaltetem Javascript ein Datum eingeben kann.

Dieser Kalender ist nicht dafür gedacht eine Datums Eingabe vor 1970 einzugeben, sondern vielmehr für eine Datums Eingabe im Zukunftsbereich.

Beispiel des Kalenders:....

Hier kannst du den Kalender Bytecal testen, einfach auf den Kalender klicken und einen Termin wählen, nach dem absenden öffnet sich ein neues Fenster,
dass dir das über den Kalender eingegebene Datum als SQL-Eintrag und als timestamp anzeigt

Zur zeit seht ihr hier die Kalender Version 1.2 die noch in der Testphase ist, in dieser Version ist es möglich, die Tage Samstag und Sonntag für Klicks zu deaktivieren und farblich hervorzuheben.

        

Einbinden des Kalenders in deinem Formular:....

Auf der Webseite, in dem sich ein oder mehrere Formulare befinden, wird am ende des HTML-Quellcodes kurz vor dem dieser HTML-Code eingefügt.

1:
2:
3:
4:
5:

<div id='bn_frame' style='position:absolute; display:none; height:198px; width:205px; background-color:#ced7d6; overflow:hidden;'>
	<iframe src='./bytecal/bytecal.php'  style='width:208px; margin-left:-1px; border:0px; height:202px; background-color:#ced7d6; overflow:hidden;' border='0'></iframe>
</div>

Im Header Bereich ist es erforderlich diesen Javascript einzusetzen, oder diesen Javascript teil als Javascript Datei anzugeben.
Dies ist erforderlich, um zum einen, für den Kalender die aktuelle Mauszeiger Position zu ermitteln und zum anderem, um den Kalender dann anzuzeigen.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:

<script type='text/javascript'>
var bn_who="";
function kalender(s)
{	document.getElementById('bn_frame').style.top=yPos + "px";
	document.getElementById('bn_frame').style.left=xPos + "px";
	document.getElementById('bn_frame').style.display='block';	
	bn_who=s;
}

init_mousemove();

var xPos="";
var yPos="";
var docEl = (   typeof document.compatMode != "undefined" && 
                 document.compatMode        != "BackCompat"
                )? "documentElement" : "body";

function init_mousemove() 
{    if(document.layers) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove =	dpl_mouse_pos;
}

function dpl_mouse_pos(e) 
{   xPos    =  e? e.pageX : window.event.x;
  	yPos    =  e? e.pageY : window.event.y;

	
	if (document.all && !document.captureEvents && docEl) 
	{   xPos    += document[docEl].scrollLeft;
	    yPos    += document[docEl].scrollTop;
	}
    
    if (document.layers) routeEvent(e);
}
</script>

in deinem Formular müssen deine Eingabefelder die für eine Datumseingabe vorgesehen sind nun mit einer id versehen werden, dass heißt, dass sie einen solchen Aufbau haben sollten:

1:
2:
3:

<input type='text' name='start_date' value='Termin von' id='start_date'/> 

Hat dein Inputfeld bereits eine id, reicht diese aus und kann im image mit onclick übergeben werden.

neben dem Inputfeld kannst du nun eine Grafik einbinden, die den Kalender öffnet.

1:
2:
3:

<img src='bytecal/date_go.gif' alt='Klick to use Calendar input' onclick='kalender(document.getElementById("start_date"));'/>

Hat der User das Formular ausgefüllt, kann die Überprüfung der Datumseingabe über die in php geschriebene Kalender Klasse erfolgen, dazu ist in der PHP-datei nur folgendes hinzuzufügen:

1:
2:
3:
4:
5:
6:
7:
8:

Diese Angabe bezieht sich darauf, dass das Inputfeld start_date heisst, 
es ist aber natürlich auch jeder andere name möglich.

	require ("./bytecal//bytecal_class.php");
	$byte = new Kalender();
	$unix_eingabedatum  = $byte->get_unixtime($_REQUEST['start_date']);	
	$sql_eingabedatum = $byte->get_sqltimestamp($_REQUEST['start_date']);

Download und support....

Support zu diesem Script gibt es ausschließlich im Forum, E-Mails werden aus zeitgründen nicht beantwortet.

Es ist untersagt, die sichtbaren Copyright informationen zu entfernen

Die Lizenz, dass Script ohne den Copyright Hinweis zu benutzen beträgt je Domain einmalig 20,-€.

Download ByteCal.zip

Themen zu ByteCal:

      bytecal in frame
      bytecal und datums formate
      wertuebernahme von bytecal
      Bald ist eine neue Kalender Version online