Inline AJAX Calendar using PHP
15-June 2006.
26,404
27 Almost a year ago I made a tutorial on Simple Calendar Tutorial which trained us to develop a calendar using PHP. Now it times to enhance that tutorial to a whole new level. Let throw in some AJAX code and Javascript Document Object Model (DOM) to create not one, but three type of calendar.
- Single Calendar
- Time Period Selection Calendar
- Month-Year Calendar
You can also integrate this application with any type of form, to make thing easier I have separated the date into three column (day, month and year) and six column if your using time period module. I will tell you later on how to use this feature. Why is it using PHP? Well for some usage it would be more advantage using server side scripting if you need to do some database connection.
The Files
We will be using two file in these tutorial; cal.php and calendar.php. AJAX and interface will be placed inside cal.php while we going to use calendar.php to store the calendar PHP class.
The CSS
Let take the easy part first, the styling is really plain except I make some code for the day part, selected day mark and easily detected.
<style type="text/css">
.cal a:link, .cal a:hover, .cal a:visited { color:#333; text-decoration:none;}
.today { background:#000; color:#fff;}
.today a:link, .today a:hover, .today a:visited {color:#fff; text-decoration:none; text-align:center;}
</style>
Javascript in <HEAD>
Here's the longest part of the tutorial apart from calendar class in PHP.
a. AJAX Declaration
As usual, I don't think I need to explain this again. For begineer I would advice reading AJAX Starter first.
function makeObject(){
var x;
if(window.XMLHttpRequest){
x = new XMLHttpRequest();
}
else if (window.ActiveXObject){
x = new ActiveXObject("Microsoft.XMLHTTP");
}
return x;
}
var request = makeObject();b. Create Calendar
This part consist of two function; createCalendar and createCalendarCompare. You might figure the different of the two just by looking at their name, but createCalendar has type parameter, 1 is for day-month-year standard single calendar while 2 for month-year standard single calendar.
function createCalendar(parentID, theID, idname, type) {
var theBody = document.getElementById(parentID);
var theCal = document.createElement('div');
var theInput = document.createElement('input');
var compareCal = 0;
theInput.id = theID;
theCal.id = idname;
theCal.name = idname;
theInput.value = idname;
theInput.type = 'hidden';
theBody.appendChild(theInput);
theBody.appendChild(theCal);
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
ajax_regenerateCal(month, year, day, theID, type);
}
function createCalendarCompare(parentID, theID, idname, theID1, idname1, theID2, idname2) {
var theBody = document.getElementById(parentID);
var theCal = document.createElement('div');
var theInput = document.createElement('input');
var theInput1 = document.createElement('input');
var theInput2 = document.createElement('input');
theCal.id = idname;
theInput.id = theID;
theInput.value = idname;
theInput.type = 'hidden';
theInput1.id = theID1;
theInput1.value = idname1;
theInput1.type = 'hidden';
theInput2.id = theID2;
theInput2.value = idname2;
theInput2.type = 'hidden';
theBody.appendChild(theCal);
theBody.appendChild(theInput);
theBody.appendChild(theInput1);
theBody.appendChild(theInput2);
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
ajax_regenerateCalCompare(month, year, day, theID1, idname1, month, year, day, theID2, idname2, theID, 3);
}c. AJAX Request
function ajax_regenerateCal(nmonth, nyear, nday, xnid, ntype){
var param = '?nday=' + nday + '&nmonth=' + nmonth + '&nyear=' + nyear + '&nid=' + xnid + '&ntype=' + ntype;
// alert(param);
request.open('GET', 'cal.php' + param, true);
request.send('');
request.onreadystatechange = parse_regenerateCal;
}
function ajax_regenerateCalCompare(nmonth1, nyear1, nday1, xnid1, xname1, nmonth2, nyear2, nday2, xnid2, xname2, xnid, ntype){
var param = '?nday1=' + nday1 + '&nmonth1=' + nmonth1 + '&nyear1=' + nyear1 + '&nid1=' + xnid1 + '&nname1=' + xname1 + '&nday2=' + nday2 + '&nmonth2=' + nmonth2 + '&nyear2=' + nyear2 + '&nid2=' + xnid2 + '&nname2=' + xname2 + '&nid=' + xnid + '&ntype=' + ntype;
request.open('GET', 'cal.php' + param, true);
request.send('');
request.onreadystatechange = parse_regenerateCal;
}
function parse_regenerateCal(){
if(request.readyState == 4){
var answer = trimme(request.responseText);
var nx= answer.split("|");
var ans = nx[1];
for(i = 2; i < nx.length; i++)
ans = ans + "|" + nx[i];
//alert(nx[0]);
eval("document.getElementById('" + document.getElementById(nx[0]).value + "').innerHTML = ans");
}
}Other than that, I have notice that it easy to get a javascript error for document.getElementById(nx[0]).value. The error occur when the text we received from request.responseText contain spacing in front or at the back. As a solution we need to execute a trimming function to clean up that invisible spaces.
function trimme(sInString) {
sInString = sInString.replace ( /^s+/g, "" );// strip leading
return sInString.replace( /s+$/g, "" );// strip trailing
}
d. Compare Calendar
This is a calendar checking function. The validation will only work when we set compareCal variable as 1.
function regenerateCal(nmonth, nyear, nday, nid, ntype) {
//alert(document.getElementById(nid + '_day').value);
if(compareCal == 1) {
var val_cal1 = (nid == cal1 ? nyear : document.getElementById(cal1 + '_year').value) + '' + (nid == 'cal1' ? (nmonth < 10 ? '0'+nmonth : nmonth) : (document.getElementById(cal1 + '_month').value < 10 ? '0'+document.getElementById(cal1 + '_month').value : document.getElementById(cal1 + '_month').value)) + '' + (nid == cal1 ? (nday < 10 ? '0'+nday : nday) : (document.getElementById(cal1 + '_day').value < 10 ? '0'+document.getElementById(cal1 + '_day').value : document.getElementById(cal1 + '_day').value));
var val_cal2 = (nid == cal2 ? nyear : document.getElementById(cal2 + '_year').value) + '' + (nid == cal2 ? (nmonth < 10 ? '0'+nmonth : nmonth) : (document.getElementById(cal1 + '_month').value < 10 ? '0'+document.getElementById(cal1 + '_month').value : document.getElementById(cal1 + '_month').value)) + '' + (nid == cal2 ? (nday < 10 ? '0'+nday : nday) : (document.getElementById(cal1 + '_day').value < 10 ? '0'+document.getElementById(cal1 + '_day').value : document.getElementById(cal1 + '_day').value));
if(val_cal2 < val_cal1) {
document.getElementById(alertCal).innerHTML = 'Invalid time selection';
}
else if(val_cal2 >= val_cal1) {
document.getElementById(alertCal).innerHTML = '';
}
}
ajax_regenerateCal(nmonth, nyear, nday, nid, ntype);
}Call the Calendar
The AJAX will open file cal.php upon execution, since we going to use the same file we need to add some PHP function just before <html> to separate request by browser and AJAX.
<?php
include "calendar.php";
$MCal = new Calendar;
if(IsSet($_GET["ntype"])) :
if($_GET["ntype"] == 1) :
print $_GET["nid"]."|".$MCal->generate_calendar($_GET["nyear"], $_GET["nmonth"], $_GET["nday"], $_GET["nid"]);
elseif($_GET["ntype"] == 2) :
print $_GET["nid"]."|".$MCal->generate_month($_GET["nyear"], $_GET["nmonth"], $_GET["nday"], $_GET["nid"]);
elseif($_GET["ntype"] == 3) :
print $_GET["nid"]."|".$MCal->generate_calendar_compare($_GET["nyear1"], $_GET["nmonth1"], $_GET["nday1"], $_GET["nid1"], $_GET["nname1"], $_GET["nyear2"], $_GET["nmonth2"], $_GET["nday2"], $_GET["nid2"], $_GET["nname2"]);
endif;
exit();
endif;
?>
In The Body
Let me show you how to create all three calendar using a simple javascript.
a. Single Calendar
From below, the first parameter value calendar1 must be the same value as the div container. The other two parameter is user define but you must be sure that it hasn't been used before as it is unique key.
<div id='calendar1'>
<script type="text/javascript">
<!--
var myCal = new createCalendar('calendar1', 'cal1', 'thiscal', 1);
-->
</script>
</div>
d. Month-Year Calendar
Same as above, it just that the last parameter is different. Before I forget, the second parameter is relevant to your generated input for the date. For example if we use cal1 then the name and id of the date are cal1_day, cal1_month and cal1_year.
<div id='calendar1'>
<script type="text/javascript">
<!--
var myCal = new createCalendar('calendar1', 'cal1', 'thiscal', 2);
-->
</script>
</div>
c. Time Period Selection Calendar
This is the toughest and consume much parameter. Should I explain or leave the fun of exploring it to you? I guess I'm going to choose the latter for this one.
<div id='calendar2'>
<script type="text/javascript">
var compareCal = 1;
var alertCal = 'cal_alert';
var cal1 = 'cal1';
var cal2 = 'cal2';
var myCal2 = new createCalendarCompare('calendar2', 'calMAIN', 'compareCal', cal1, 'compareCal1', cal2, 'compareCal2');
ajax_regenerateCal(6, 2005, 15, theID2, 1);
-->
</script>
</div>
<div id='cal_alert'></div>
Warning: You can only called a calendar in a page. It seem my AJAX connection can't handle multiple request (using same function at a time) at the moment.
The Class
Here's everything inside calendar.php.
<?php
class Calendar {
function generate_month($nyear, $nmonth, $nday, $id) {
$first_of_month = mktime (0,0,0, $nmonth, 1, $nyear);
$maxdays = date('t', $first_of_month); #number of days in the month
$date_info = getdate($first_of_month); #get info about the first day of the month
$nmonth = $date_info['mon'];
$nyear = $date_info['year'];
$calendar = "<input type='hidden' name='".$id."_day' id='".$id."_day' size='2' value='".$nday."' />
<input type='hidden' name='".$id."_month' id='".$id."_month' size='2' value='".$nmonth."' />
<input type='hidden' name='".$id."_year' id='".$id."_year' size='4' value='".$nyear."' />";
$calendar .= "<table>";
$calendar .= "<tr>
<td colspan='7' class='navi'>
<a href="javascript:regenerateCal(".$nmonth.", ".($nyear - 1).", 0, '".$id."', 2)">««</a>
<a href="javascript:regenerateCal(".($nmonth - 1).", ".$nyear.", 0, '".$id."', 2)">«</a>
".$date_info['month']." ".$nyear."
<a href="javascript:regenerateCal(".($nmonth + 1).", ".$nyear.", 0, '".$id."', 2)">»</a>
<a href="javascript:regenerateCal(".$nmonth.", ".($nyear + 1).", 0, '". $id."', 2)">»»</a>
</td>
</tr>";
$calendar .= "</table>";
return $calendar;
}
function generate_calendar($nyear, $nmonth, $nday, $id) {
$first_of_month = mktime (0,0,0, $nmonth, 1, $nyear);
$maxdays = date('t', $first_of_month); #number of days in the month
$date_info = getdate($first_of_month); #get info about the first day of the month
$nmonth = $date_info['mon'];
$nyear = $date_info['year'];
$calendar = "<input type='hidden' name='".$id."_day' id='".$id."_day' size='2' value='".$nday."' />
<input type='hidden' name='".$id."_month' id='".$id."_month' size='2' value='".$nmonth."' />
<input type='hidden' name='".$id."_year' id='".$id."_year' size='4' value='".$nyear."' />";
$calendar .= "<table>";
$calendar .= "<tr>
<td colspan='7' class='navi'>
<a href="javascript:regenerateCal(".$nmonth.", ".($nyear - 1).", 0, '".$id."', 1)">««</a>
<a href="javascript:regenerateCal(".($nmonth - 1).", ".$nyear.", 0, '".$id."', 1)">«</a>
".$date_info['month']." ".$nyear."
<a href="javascript:regenerateCal(".($nmonth + 1).", ".$nyear.", 0, '".$id."', 1)">»</a>
<a href="javascript:regenerateCal(".$nmonth.", ".($nyear + 1).", 0, '". $id."', 1)">»»</a>
</td>
</tr>";
$calendar .= "<tr>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr> ";
$calendar .= "<tr>";
$class = "";
$weekday = $date_info['wday']; #weekday (zero based) of the first day of the month
$day = 1; #starting day of the month
#take care of the first "empty " days of the month
if($weekday > 0){$calendar .= "<td colspan='$weekday'> </td> ";}
#print the days of the month
while ($day <= $maxdays) {
if($weekday == 7) { #start a new week
$calendar .= "</tr><tr> ";
$weekday = 0;
}
$linkDate = mktime (0,0,0, $nmonth, $day, $nyear);
if($nday == $day) $class= "today";
else {
$d = date('m/d/Y', $linkDate);
$class = "cal";
}
$calendar .= "<td class='$class' align='center'>
<a href="javascript:regenerateCal(".$nmonth.", ".$nyear.", ".$day.", '".$id."', 1)">$day</a>
</td>";
$day++;
$weekday++;
}
if($weekday != 7) {
$calendar .= "<td colspan='".(7 - $weekday)."'> </td>";
}
return $calendar . "</tr></table> ";
}
function generate_calendar_compare($nyear1, $nmonth1, $nday1, $id1, $name1, $nyear2, $nmonth2, $nday2, $id2, $name2) {
$first_of_month = mktime (0,0,0, $nmonth1, 1, $nyear1);
$maxdays = date('t', $first_of_month); #number of days in the month
$date_info = getdate($first_of_month); #get info about the first day of the month
$nmonth1 = $date_info['mon'];
$nyear1 = $date_info['year'];
$calendar = "<div id='".$name1."'>";
$calendar .= "<input type='hidden' name='".$id1."_day' id='".$id1."_day' size='2' value='".$nday1."' />
<input type='hidden' name='".$id1."_month' id='".$id1."_month' size='2' value='".$nmonth1."' />
<input type='hidden' name='".$id1."_year' id='".$id1."_year' size='4' value='".$nyear1."' />";
$calendar .= "<table>";
$calendar .= "<tr>
<td colspan='7' class='navi'>
<a href="javascript:regenerateCal(".$nmonth1.", ".($nyear1 - 1).", 0, '".$id1."', 1)">««</a>
<a href="javascript:regenerateCal(".($nmonth1 - 1).", ".$nyear1.", 0, '".$id1."', 1)">«</a>
".$date_info['month']." ".$nyear1."
<a href="javascript:regenerateCal(".($nmonth1 + 1).", ".$nyear1.", 0, '".$id1."', 1)">»</a>
<a href="javascript:regenerateCal(".$nmonth1.", ".($nyear1 + 1).", 0, '". $id1."', 1)">»»</a>
</td>
</tr>";
$calendar .= "<tr>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr> ";
$calendar .= "<tr>";
$class = "";
$weekday = $date_info['wday']; #weekday (zero based) of the first day of the month
$day = 1; #starting day of the month
#take care of the first "empty " days of the month
if($weekday > 0){$calendar .= "<td colspan='$weekday'> </td> ";}
#print the days of the month
while ($day <= $maxdays) {
if($weekday == 7) { #start a new week
$calendar .= "</tr><tr> ";
$weekday = 0;
}
$linkDate = mktime (0,0,0, $nmonth, $day, $nyear);
if($nday1 == $day) $class= "today";
else {
$d = date('m/d/Y', $linkDate);
$class = "cal";
}
$calendar .= "<td class='$class' align='center'>
<a href="javascript:regenerateCal(".$nmonth1.", ".$nyear1.", ".$day.", '".$id1."', 1)">$day</a>
</td>";
$day++;
$weekday++;
}
if($weekday != 7) {
$calendar .= "<td colspan='".(7 - $weekday)."'> </td>";
}
$calendar .= "</tr></table></div>";
$maxdays = date('t', $first_of_month); #number of days in the month
$date_info = getdate($first_of_month); #get info about the first day of the month
$nmonth2 = $date_info['mon'];
$nyear2 = $date_info['year'];
$calendar .= "<div id='".$name2."'>";
$calendar .= "<input type='hidden' name='".$id2."_day' id='".$id2."_day' size='2' value='".$nday2."' />
<input type='hidden' name='".$id2."_month' id='".$id2."_month' size='2' value='".$nmonth2."' />
<input type='hidden' name='".$id2."_year' id='".$id2."_year' size='4' value='".$nyear2."' />";
$calendar .= "<table>";
$calendar .= "<tr>
<td colspan='7' class='navi'>
<a href="javascript:regenerateCal(".$nmonth2.", ".($nyear2 - 1).", 0, '".$id2."', 1)">««</a>
<a href="javascript:regenerateCal(".($nmonth2 - 1).", ".$nyear2.", 0, '".$id2."', 1)">«</a>
".$date_info['month']." ".$nyear2."
<a href="javascript:regenerateCal(".($nmonth2 + 1).", ".$nyear2.", 0, '".$id2."', 1)">»</a>
<a href="javascript:regenerateCal(".$nmonth2.", ".($nyear2 + 1).", 0, '". $id2."', 1)">»»</a>
</td>
</tr>";
$calendar .= "<tr>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr> ";
$calendar .= "<tr>";
$class = "";
$weekday = $date_info['wday']; #weekday (zero based) of the first day of the month
$day = 1; #starting day of the month
#take care of the first "empty " days of the month
if($weekday > 0){$calendar .= "<td colspan='$weekday'> </td> ";}
#print the days of the month
while ($day <= $maxdays) {
if($weekday == 7) { #start a new week
$calendar .= "</tr><tr> ";
$weekday = 0;
}
$linkDate = mktime (0,0,0, $nmonth, $day, $nyear);
if($nday2 == $day) $class= "today";
else {
$d = date('m/d/Y', $linkDate);
$class = "cal";
}
$calendar .= "<td class='$class' align='center'>
<a href="javascript:regenerateCal(".$nmonth2.", ".$nyear2.", ".$day.", '".$id2."', 1)">$day</a>
</td>";
$day++;
$weekday++;
}
if($weekday != 7) {
$calendar .= "<td colspan='".(7 - $weekday)."'> </td>";
}
$calendar .= "</tr></table> ";
return $calendar;
}
}
?>
» erik.w.olson@gmail.com:
on 23-July 2006 at 12:18 PM | Quote
I am a little confused.. can you make a section for what each file contains? my understanding was that cal.php has everything thats not in that "calendar.php" - Let me know if I am incorrect in this.
Thanks!
crynobone:
on 23-July 2006 at 13:08 PM | Quote
calendar.php contain just the class.
» sewerside@yahoo.com:
on 08-August 2006 at 20:03 PM | Quote
i can't seems to get it work. can u send the two files to my email pls.. thanks
crynobone:
on 11-August 2006 at 12:18 PM | Quote
It should work now, we experienced bug code generated by TinyMCE. Please use the new release code.
» Michael:
on 13-September 2006 at 21:36 PM | Quote
I use your script above in my project. However, when I use IE 6.0.2900.2180 SP2, when I click on either one "next year", "last year", "next month", "last month" arrow, randomly the whole page will be reloaded. After this happened several times (3 - 7 times), then the calender will work without any problem.
Would you please tell me how to solve this strange problem?
Thanks.
Michael
» Michael:
on 13-September 2006 at 22:11 PM | Quote
Sorry ... I've found the problem ... it's not your problem ... I have the following code in my page:
//function reDo(){ window.location.reload() }
//window.onresize = reDo;
It will reload the page when the calendar in different size ...
Anyway, thanks for your great codes.
crynobone:
on 13-September 2006 at 23:22 PM | Quote
You may have a good reason to reload the calendar on window resize but it would be best if we minimize request to the server, unless you have a dedicated server.
» shweta:
on 22-September 2006 at 14:17 PM | Quote
Hi,
This code doesnt seem to work for me..have put all the code in cal.php except the calendar class which alone is in calendar.php..m i doing it right..?
Could u plz mail the details to the above email id..
Thanks
crynobone:
on 22-September 2006 at 14:34 PM | Quote
What error did you get? Please make sure you enable Display_Error in your php.ini.
» Darkstr:
on 02-October 2006 at 14:15 PM | Quote
I got everything working, but only in firefox. When I go to IE the initial claender loads, but whe I refresh the screen (in IE) the calendar will not load anymore. I am not recieving any errors from IE or PHP. Any Ideas...
» Darkstr:
on 02-October 2006 at 14:42 PM | Quote
Ok - think I found the issue, IE was being retarded with the $_GET values. Changed to $_REQUEST, and all is fine. Excellent work, code is very easy to work with. Thank You
» Mario:
on 16-October 2006 at 12:32 PM | Quote
I have the same issue.
I noticed that when I use 'calendar2' example, the javascript console in firefox complains about undefined 'theID2'....what the heck should this be? Maybe this is the cause of the IE reload problem, because when I mess around with this value I get similar failure in firefox....what do i do?
» mario:
on 16-October 2006 at 12:35 PM | Quote
DAMN IT...I'm sorry for all those multiple comments, but I was commeting from within FIREFOX, and EVERY TIME I submitted, it got the error that said my email was invalid, and my comment wasn't added to the list. You really need to check this script in firefox because there is something wrong with this comment form.
» mario:
on 16-October 2006 at 15:56 PM | Quote
FYI, you have to change the 'GET' from the ajax_regenerateCal() and ajax_regenerateCaLCompare functions to 'REQUEST'...and I'm guessing the GET and REQUEST in the cal.php as well.
I still have the error about the 'theID2' not being defined? any clue about this?....it is in the second calendar example.
crynobone:
on 17-October 2006 at 07:18 AM | Quote
If you does understand what the different between GET and REQUEST then you wouldn't made that suggestion. There only two options while using AJAX Callback which is POST or GET.
Have you check out my suggestion on Other than that, I have notice that it easy to get a javascript error for document.getElementById(nx[0]).value. The error occur when the text we received from request.responseText contain spacing in front or at the back. As a solution we need to execute a trimming function to clean up that invisible spaces.
» Mario:
on 17-October 2006 at 09:25 AM | Quote
Yes I use the trimme function in parse_regenerateCal() just as you have in your code...that still causes that same getElementById error, unless I switch the 'GET' to 'REQUEST'
Where else should I be using the trimme() function? What am I missing? Thank you.
» Mario:
on 18-October 2006 at 16:09 PM | Quote
No matter what I tried things would not work correctly by using 'GET'...but you are right, you should not use 'REQUEST', so I switched everything back to the code you had and even included the trimme function....but I would still have the trouble in Internet Explorer that would not allow a refresh/reload of the page to show the calendar.
Finally I traced the program to the parse_regenerateCal() function and after much work I have a small workaround that I need to make sure is correct or figure out what else to do...but right now it is too late. Anyway. this is what I had to do...I had to change how the output is being sent to the innerHTML...
Originally all you have is this:
eval("document.getElementById('"+ document.getElementById(nx[0]).value+ "').innerHTML = ans");
but that seems to be only valid for Firefox browser but not a Internet Explorer browser....so I had to instead do this:
if (window.ActiveXObject){
document.getElementById(nx[0]).innerHTML = ans;
}else{
eval("document.getElementById('" +document.getElementById(nx[0]).value+ "').innerHTML = ans");
}
Like I said, it is 3am and I need sleep..I'll figure this out tomorrow....or maybe someone can figure this out for me.
» iced:
on 26-December 2006 at 23:31 PM | Quote
The callendar works fine, just make sure you point the right .php file in the request.open method.
» Vasile:
on 02-January 2007 at 20:07 PM | Quote
Hello guys, I just was wondering if it is possible to add events on specific dates through a web-based interface using MySQL to store data for that?
crynobone:
on 03-January 2007 at 13:40 PM | Quote
That the point of the whole class anyway, I personally prefer to build a class where you can enhance the feature with another module without any fuss. Try look at the class carefully to detect how you can actually retrieve the input field of day, month and year from the calendar.
» Alex:
on 16-January 2007 at 01:24 AM | Quote
Have you considered making the source-text darker so that it's easier to read? :)
» crynn:
on 03-February 2007 at 22:53 PM | Quote
How the new color?
» ChronoSight - Ajaxify Calendar without AJAX:
on 25-April 2007 at 15:45 PM | Quote
Since the time when I create Inline AJAX Calendar using PHP, I have put up hope to have every function to be running from client side instead of using AJAX request, and after more than almost a year it's finally here bundle in the upcoming Savvy.js...
» Mike:
on 23-June 2007 at 03:13 AM | Quote
I follow the steps exactly. I basically have cal.php and calendar.php I am fairly knowledgable in PHP and ajax(javascript) and can follow the code easily. Everything works perfectly on Firefox cause its so awesome, however in IE7 and IE6, the initial calendar lods, but when I click a left or right arrow, nothing loads. I removed the commend // alert(params); and it appears to be hitting that command because an alert box pops up, however it just isn't finishing the AJAX http request because the page isn't reloading. Ideas?
» ChronoSight - Inline Ajax Calendar using Savvy.js:
on 23-June 2007 at 08:41 AM | Quote
I have to admit the Inline AJAX Calendar using PHP wasn't the best solution but now let me introduce you to Savvy.Calendar, an object under Savvy.js Library which will allow you to migrate dependency to server-side scripting (using PHP) to all c...
» claude:
on 04-September 2007 at 05:39 AM | Quote
I downloaded the codes and ran them. I got the following error:
Parse error: syntax error, unexpected T_STRING in C:wampwwwProjectscalendar.php on line 16
Line 16 is :
<a href="javascript:regenerateCal(".$nmonth.", ".($nyear - 1).", 0, '".$id."', 2)">««</a>
What the error might be?
Thanks.
» Mariano:
on 20-September 2007 at 22:25 PM | Quote
Hi Claude,
try scape the quotes in this line
<a href="javascript:regenerateCal(".$nmonth.", ".($nyear - 1).", 0, '".$id."', 2)">««</a>
Salu2,
Mariano