PHP calendar with AJAX agenda

How well PHP and AJAX can make a handshake is easy to demonstrate with a web based calendar (see screenshots below). This script is made of three parts: the calendar (basic PHP), two OOP Classes (one for the handling of agenda data, one for the handling of the complex agenda form) and the script for the AJAX-Requests and validation. Design and handling of the dynamic content are separated as it is usefull and loading problems are notified with a warning message. Calendar offers two features: actual day and day matching agenda entry. The entry form offers task, location, importance, status, date, start time, end time and a textarea for the task details (new: all-day, morning, noon, evening and night reservation). One of the main parts is the completely dynamic created form - offering several possibilities of manipulation. Among other things you can enable and disable certain input forms as you like, the control over the form content is powerfull: It can also be database driven. In the menu modus for example you have the full control over selected values. In total you have the control over ten form elements.

The scripts snippets you see here (the complete script is downloadable) is only a small part of the complete application. Thats it. The sql code for the database action and other stuff is all prepared for your convenience (create-table-, css- and connection-file included). Best regards Claudio Biesele


Part of the PHP Calendar Code:

for ($i = $firstday; $i < $liste; $i++)
{
$dayvar = array($i);
if($i % 7 != '0' && $span == '1' )
{
if (in_array($i, $termday))
{
$setCol = "<td class=\"matchday\"><a href='#' onclick='showAgenda($y,$m,$i);'>$i</a></td>\r";
echo $setCol;
}
elseif (in_array($day, $dayvar))
{
$setCol = "<td class=\"now\">$i</td>\r";
echo $setCol;
}
else
{
$setCol = "<td class=\"tdc\">$i</td>\r";
echo $setCol;
}
}


Part of the Ajax Code:

function updateForm(updid)
{
this.document.getElementById("message").style.visibility = "visible";
if(this.document.FormAgenda.task.value == ''
|| this.document.FormAgenda.lokation.value == ''
|| this.document.FormAgenda.todo.value == '')
{
document.getElementById("message").innerHTML = 'All fields are required.';
return false;
}

if(this.document.FormAgenda.status[0].checked
|| this.document.FormAgenda.status[1].checked
|| this.document.FormAgenda.status[2].checked
|| this.document.FormAgenda.status[3].checked)
{
val1 = this.document.FormAgenda.status[0].checked;
val2 = this.document.FormAgenda.status[1].checked;
val3 = this.document.FormAgenda.status[2].checked;
val4 = this.document.FormAgenda.status[3].checked;
valf = val1+val2; vals = val3+val4; valv = valf + vals;
if(valv > '1')
{
document.getElementById("message").innerHTML = 'Only one Status is required.';
return false;
}
}

this.document.getElementById("message").style.visibility = "hidden";
var okay = '1';
var updid;
var task;
var jetzt = new Date();
var za = jetzt.getTime();

task = this.document.FormAgenda.task.value;
lokation = this.document.FormAgenda.lokation.value;

if(this.document.FormAgenda.importance[0].checked)
{ var importance = this.document.FormAgenda.importance[0].value; }
if(this.document.FormAgenda.importance[1].checked)
{ var importance = this.document.FormAgenda.importance[1].value; }
if(this.document.FormAgenda.importance[2].checked)
{ var importance = this.document.FormAgenda.importance[2].value; }

if(this.document.FormAgenda.status[0].checked)
{ var status = this.document.FormAgenda.status[0].value; }
if(this.document.FormAgenda.status[1].checked)
{ var status = this.document.FormAgenda.status[1].value; }
if(this.document.FormAgenda.status[2].checked)
{ var status = this.document.FormAgenda.status[2].value; }
if(this.document.FormAgenda.status[3].checked)
{ var status = this.document.FormAgenda.status[3].value; }

var y = this.document.FormAgenda.year.value;
var m = this.document.FormAgenda.month.value;
var d = this.document.FormAgenda.days.value;

start = this.document.FormAgenda.starthour.value+':'+this.document.FormAgenda.startmin.value+':00';
end = this.document.FormAgenda.endhour.value+':'+this.document.FormAgenda.endmin.value+':00';
todo = this.document.FormAgenda.todo.value;

resObjekt.open('get', 'includes/agenda_update.php?okay='+okay+'&updateid='+updid+'&task='+task+'&lokation='+lokation+'&importance='+importance+'&status='+status+'&y='+y+'&m='+m+'&d='+d+'&start='+start+'&end='+end+'&todo='+todo+'&z='+za, true);
resObjekt.onreadystatechange = handleResponseAgenda;
resObjekt.send(null);
return false;
}


 
Part of the Form OOP Class Code:

<!--- Start inputzone -->
<?php
if($this->inputfield == '1')
{
?>
<?php
while(list($this->key, $this->val) = each($this->inputparts))
{
echo ('<tr>
<td width="'.$this->fcolwidth.'" class="'.$this->tdf.'">'.$this->val[0].'</td>
<td><input type="text" class="'.$this->fclass.'" name="'.$this->val[1].'" value="'.$this->val[2].'" size="'.$this->val[3].'" '.$this->val[4].' '.$this->val[5].'></td>
</tr>');
}
?>
<?php
}
?>
<!--- End inputzone -->
<!--- Start passwordzone -->
<?php
if($this->passwfield == '1')
{
?>
<?php
while(list($this->key, $this->val) = each($this->passwparts))
{
echo ('<tr>
<td width="'.$this->fcolwidth.'" class="'.$this->tdf.'">'.$this->val[0].'</td>
<td><input type="password" class="'.$this->fclass.'" name="'.$this->val[1].'" value="'.$this->val[2].'" size="'.$this->val[3].'" '.$this->val[4].' '.$this->val[5].'></td>
</tr>');
}
?>
<?php
}
?>
<!--- End passwordzone -->


Picture pub_webag1.jpg
1. Example: Calendar modus shows actual day and possible agenda entries.
Picture pub_webag2.jpg
2. Example: In agenda modus user likes to insert a new agenda entry.
Picture pub_webag3.jpg
3. Example: User reads an agenda entry corresponding to date.
Picture pub_webag4.jpg
4. Example: User likes to modify an agenda entry corresponding to date.
Download the full script at www.fastproject.ch. The downloaded script is free from Copyright restrictions, Zurich, 16th of November 2015.
Donate with PayPal:
placeholder