Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Ajax calendar -- help

cassbiz's Avatar
Familiar Sight
  
Join Date: Oct 2006
Location: Florida
Posts: 204
#1: Jan 2 '07
I downloaded this calendar off the web and am trying have it show twice, once as calendar.php and the second time as calendar1.php

I need the visitor to be able to select a beginning date and an ending date. Here is the primary page that I have

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Your Title</title>
  6. <link rel="stylesheet" type="text/css" href="calendar_style.css">
  7. <script type="text/javascript">
  8. var req;
  9.  
  10. function navigate(month,year) {
  11.         var url = "calendar.php?month="+month+"&year="+year;
  12.         if(window.XMLHttpRequest) {
  13.                 req = new XMLHttpRequest();
  14.         } else if(window.ActiveXObject) {
  15.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  16.         }
  17.         req.open("GET", url, true);
  18.         req.onreadystatechange = callback;
  19.         req.send(null);
  20. }
  21.  
  22. function callback() {
  23.         if(req.readyState == 4) {
  24.                 if(req.status == 200) {
  25.                         response = req.responseText;
  26.                         document.getElementById("calendar").innerHTML = response;
  27.                 } else {
  28.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  29.                 }
  30.         }
  31. }
  32. </script>
  33. <script type="text/javascript">
  34. var req;
  35.  
  36. function navigate1(month,year) {
  37.         var url = "calendar1.php?month="+month+"&year="+year;
  38.         if(window.XMLHttpRequest) {
  39.                 req = new XMLHttpRequest();
  40.         } else if(window.ActiveXObject) {
  41.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  42.         }
  43.         req.open("GET", url, true);
  44.         req.onreadystatechange = callback;
  45.         req.send(null);
  46. }
  47.  
  48. function callback1() {
  49.         if(req.readyState == 4) {
  50.                 if(req.status == 200) {
  51.                         response = req.responseText;
  52.                         document.getElementById("calendar1").innerHTML = response;
  53.                 } else {
  54.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  55.                 }
  56.         }
  57. }
  58. </script>
  59. <script type="text/javascript">
  60. function init()
  61.  
  62. {
  63. navigate("","");
  64. navigate1("","");
  65. }
  66. //-->
  67. </script>
  68. </head>
  69. <body onLoad="init()">
  70. <div id="calendar" style="margin-top: 20px;margin-bottom: 20px"></div>
  71.  
  72. </body>
  73. </html>
  74.  
And here is the AJAX Calendar

Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>$name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  
All I did is name calendar.php to calendar1.php and copied and changed the function.

somehow or another I am lost in what I did and appreciate any help to get both calendars to display at the same time and they will both have different outputs.
An arrival time and a departure time.

Thanks in Advance

cassbiz's Avatar
Familiar Sight
  
Join Date: Oct 2006
Location: Florida
Posts: 204
#2: Jan 2 '07

re: Ajax calendar -- help

the page is located at http://www.reserveitnow.us/calendar1/ajax_calendar.php
b1randon's Avatar
Expert
  
Join Date: Dec 2006
Location: Pittsburgh
Posts: 171
#3: Jan 2 '07

re: Ajax calendar -- help

Quote:

Originally Posted by cassbiz

the page is located at http://www.reserveitnow.us/calendar1/ajax_calendar.php

Using more than 1 XMLRequest is a drag. To be compatible all around you need to do only
b1randon's Avatar
Expert
  
Join Date: Dec 2006
Location: Pittsburgh
Posts: 171
#4: Jan 2 '07

re: Ajax calendar -- help

Quote:

Originally Posted by cassbiz

the page is located at http://www.reserveitnow.us/calendar1/ajax_calendar.php

Using more than 1 XMLRequest is a drag. To be compatible all around you need to do only 1 request per request object then destroy the old one and make a new. It is stupid, I know, but that's where ajax is at. So it looks like you have only 1 request object ("var req"); That can be the source of your problem. You'll need req1 and req2. Also, be sure you call the constructor every time you're going to send a new request. Good luck!
cassbiz's Avatar
Familiar Sight
  
Join Date: Oct 2006
Location: Florida
Posts: 204
#5: Jan 2 '07

re: Ajax calendar -- help

I changed the var req; to var req1; and still no changes in the functionality.

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2. var req;
  3.  
  4. function navigate(month,year) {
  5.         var url = "calendar.php?month="+month+"&year="+year;
  6.         if(window.XMLHttpRequest) {
  7.                 req = new XMLHttpRequest();
  8.         } else if(window.ActiveXObject) {
  9.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  10.         }
  11.         req.open("GET", url, true);
  12.         req.onreadystatechange = callback;
  13.         req.send(null);
  14. }
  15.  
  16. function callback() {
  17.         if(req.readyState == 4) {
  18.                 if(req.status == 200) {
  19.                         response = req.responseText;
  20.                         document.getElementById("calendar").innerHTML = response;
  21.                 } else {
  22.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  23.                 }
  24.         }
  25. }
  26. </script>
  27. <script type='text/javascript'>
  28. var req1;
  29.  
  30. function navigate1(month,year) {
  31.         var url = "calendar1.php?month="+month+"&year="+year;
  32.         if(window.XMLHttpRequest) {
  33.                 req1 = new XMLHttpRequest();
  34.         } else if(window.ActiveXObject) {
  35.                 req 1= new ActiveXObject("Microsoft.XMLHTTP");
  36.         }
  37.         req1.open("GET", url, true);
  38.         req1.onreadystatechange = callback;
  39.         req1.send(null);
  40. }
  41.  
  42. function callback1() {
  43.         if(req1.readyState == 4) {
  44.                 if(req1.status == 200) {
  45.                         response = req1.responseText;
  46.                         document.getElementById("calendar1").innerHTML = response;
  47.                 } else {
  48.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  49.                 }
  50.         }
  51. }
  52. </script>
  53. <script type="text/javascript">
  54. function init()
  55.  
  56. {
  57. navigate("","");
  58. navigate1("","");
  59. }
  60. //-->
  61. </script>
  62. </head>
  63. <body onLoad="init()">
  64.  

It isn't even opening a second instance of the calendar. That is also one of the problems
b1randon's Avatar
Expert
  
Join Date: Dec 2006
Location: Pittsburgh
Posts: 171
#6: Jan 3 '07

re: Ajax calendar -- help

Quote:

Originally Posted by cassbiz

I changed the var req; to var req1; and still no changes in the functionality.

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2. var req;
  3.  
  4. function navigate(month,year) {
  5.         var url = "calendar.php?month="+month+"&year="+year;
  6.         if(window.XMLHttpRequest) {
  7.                 req = new XMLHttpRequest();
  8.         } else if(window.ActiveXObject) {
  9.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  10.         }
  11.         req.open("GET", url, true);
  12.         req.onreadystatechange = callback;
  13.         req.send(null);
  14. }
  15.  
  16. function callback() {
  17.         if(req.readyState == 4) {
  18.                 if(req.status == 200) {
  19.                         response = req.responseText;
  20.                         document.getElementById("calendar").innerHTML = response;
  21.                 } else {
  22.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  23.                 }
  24.         }
  25. }
  26. </script>
  27. <script type='text/javascript'>
  28. var req1;
  29.  
  30. function navigate1(month,year) {
  31.         var url = "calendar1.php?month="+month+"&year="+year;
  32.         if(window.XMLHttpRequest) {
  33.                 req1 = new XMLHttpRequest();
  34.         } else if(window.ActiveXObject) {
  35.                 req 1= new ActiveXObject("Microsoft.XMLHTTP");
  36.         }
  37.         req1.open("GET", url, true);
  38.         req1.onreadystatechange = callback;
  39.         req1.send(null);
  40. }
  41.  
  42. function callback1() {
  43.         if(req1.readyState == 4) {
  44.                 if(req1.status == 200) {
  45.                         response = req1.responseText;
  46.                         document.getElementById("calendar1").innerHTML = response;
  47.                 } else {
  48.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  49.                 }
  50.         }
  51. }
  52. </script>
  53. <script type="text/javascript">
  54. function init()
  55.  
  56. {
  57. navigate("","");
  58. navigate1("","");
  59. }
  60. //-->
  61. </script>
  62. </head>
  63. <body onLoad="init()">
  64.  

It isn't even opening a second instance of the calendar. That is also one of the problems

I always end up doing something like this to be sure my ajax is wired right:
Expand|Select|Wrap|Line Numbers
  1. function callback1() {
  2.         if(req1.readyState == 4) {
  3.                 alert("got a response");
  4.                 if(req1.status == 200) {
  5.                         response = req1.responseText;
  6.                         alert ("response was: " + response.Text);
  7.                         document.getElementById("calendar1").innerHTML = response;
  8.                 } else {
  9.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  10.                 }
  11.         }
  12. }
  13.  
See if you are getting those alert messages back properly. I don't have access to php right now or I'd fire it up and see what was going on first hand.
ronverdonk's Avatar
Moderator
  
Join Date: Jul 2006
Location: The Netherlands
Posts: 4,139
#7: Jan 3 '07

re: Ajax calendar -- help

In your first post you had the following code (part of it)[php]function callback1() {
if(req.readyState == 4) {
if(req.status == 200) {
response = req.responseText;
document.getElementById("calendar1").innerHTML = response;
} else {
alert("There was a problem retrieving the data:\n" + req.statusText);
}
}
}
</script>
<script type="text/javascript">
function init()

{
navigate("","");
navigate1("","");
}
//-->
</script>
</head>
<body onLoad="init()">
<div id="calendar" style="margin-top: 20px;margin-bottom: 20px"></div>

</body>
</html>[/php]
In your JS statement you address document.getElementById("calendar1").
In your HTML you have defined the div as <div id="calendar" style="margin-top: 20px;margin-bottom: 20px"></div>\

Looks like the two id's are not identical.

Ronald :cool:
cassbiz's Avatar
Familiar Sight
  
Join Date: Oct 2006
Location: Florida
Posts: 204
#8: Jan 4 '07

re: Ajax calendar -- help

OK, here is what I have going.

b1randon, I put in the 'alert("response was: " + response.Text);' and am receiving the message that it is 'undefined'.

Ronald, I changed the div id to include both calendar and calendar1

Am I barking up the wrong tree trying to go this route? Or is there something blatant that I am missing?

The page is located at here
ronverdonk's Avatar
Moderator
  
Join Date: Jul 2006
Location: The Netherlands
Posts: 4,139
#9: Jan 4 '07

re: Ajax calendar -- help

What is this doing?[html]I put in the 'alert("response was: " + response.Text);'[/html]. If the response data was sent back to JS as plain text, there is no response.Text, just response. So your alert should be[html]alert("response was: " + response);[/html]
Ronald :cool:
cassbiz's Avatar
Familiar Sight
  
Join Date: Oct 2006
Location: Florida
Posts: 204
#10: Jan 4 '07

re: Ajax calendar -- help

Ronald, I followed the example from b1randon in regards to the response.

I did get it figured out (at least the javascript/AJAX) part. There were two errors. In the function navigate1 it was calling callback() not callback1() and then I changed the body OnLoad from init() to navigate("","");navigate1("","") and dropped the function init() alltogether.

Thank you again. The little tips led me in the right direction. This is a great forum!

:)

Here is the correct code in the event that someone would like to use it in the future.

ajax_calendar.php
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
  2. <html>
  3. <head>
  4. <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
  5. <title>Your Title</title>
  6. <link rel='stylesheet' type='text/css' href='calendar_style.css'>
  7. <script type='text/javascript'>
  8. var req;
  9.  
  10. function navigate(month,year) {
  11.         var url = "calendar.php?month="+month+"&year="+year;
  12.         if(window.XMLHttpRequest) {
  13.                 req = new XMLHttpRequest();
  14.         } else if(window.ActiveXObject) {
  15.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  16.         }
  17.         req.open("GET", url, true);
  18.         req.onreadystatechange = callback;
  19.         req.send(null);
  20. }
  21.  
  22. function callback() {
  23.         if(req.readyState == 4) {
  24.                 if(req.status == 200) {
  25.                         response = req.responseText;
  26.                         document.getElementById("calendar").innerHTML = response;
  27.                 } else {
  28.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  29.                 }
  30.         }
  31. }
  32. </script>
  33. <script type='text/javascript'>
  34. var req1;
  35.  
  36. function navigate1(month,year) {
  37.         var url = "calendar1.php?month="+month+"&year="+year;
  38.         if(window.XMLHttpRequest) {
  39.                 req1 = new XMLHttpRequest();
  40.         } else if(window.ActiveXObject) {
  41.                 req1 = new ActiveXObject("Microsoft.XMLHTTP");
  42.         }
  43.         req1.open("GET", url, true);
  44.         req1.onreadystatechange = callback1;
  45.         req1.send(null);
  46. }
  47.  
  48. function callback1() {
  49.         if(req1.readyState == 4) {
  50.                 if(req1.status == 200) {
  51.                         response = req1.responseText;
  52.                         document.getElementById("calendar1").innerHTML = response;
  53.                 } else {
  54.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  55.                 }
  56.         }
  57. }
  58. </script>
  59. </head>
  60. <body onLoad='navigate("","");navigate1("","")'>
  61. <div id='calendar' style='margin-top: 20px;margin-bottom: 20px'></div>
  62. <div id='calendar1' style='margin-top: 100px;margin-bottom: 20px'></div>
  63. </body>
  64. </html>
  65.  
calendar.php
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>$name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  
calendar1.php
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate1($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate1(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate1($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>c1 $name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  
b1randon's Avatar
Expert
  
Join Date: Dec 2006
Location: Pittsburgh
Posts: 171
#11: Jan 4 '07

re: Ajax calendar -- help

Quote:

Originally Posted by cassbiz

Ronald, I followed the example from b1randon in regards to the response.

I did get it figured out (at least the javascript/AJAX) part. There were two errors. In the function navigate1 it was calling callback() not callback1() and then I changed the body OnLoad from init() to navigate("","");navigate1("","") and dropped the function init() alltogether.

Thank you again. The little tips led me in the right direction. This is a great forum!

:)

Here is the correct code in the event that someone would like to use it in the future.

ajax_calendar.php

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
  2. <html>
  3. <head>
  4. <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
  5. <title>Your Title</title>
  6. <link rel='stylesheet' type='text/css' href='calendar_style.css'>
  7. <script type='text/javascript'>
  8. var req;
  9.  
  10. function navigate(month,year) {
  11.         var url = "calendar.php?month="+month+"&year="+year;
  12.         if(window.XMLHttpRequest) {
  13.                 req = new XMLHttpRequest();
  14.         } else if(window.ActiveXObject) {
  15.                 req = new ActiveXObject("Microsoft.XMLHTTP");
  16.         }
  17.         req.open("GET", url, true);
  18.         req.onreadystatechange = callback;
  19.         req.send(null);
  20. }
  21.  
  22. function callback() {
  23.         if(req.readyState == 4) {
  24.                 if(req.status == 200) {
  25.                         response = req.responseText;
  26.                         document.getElementById("calendar").innerHTML = response;
  27.                 } else {
  28.                         alert("There was a problem retrieving the data:\n" + req.statusText);
  29.                 }
  30.         }
  31. }
  32. </script>
  33. <script type='text/javascript'>
  34. var req1;
  35.  
  36. function navigate1(month,year) {
  37.         var url = "calendar1.php?month="+month+"&year="+year;
  38.         if(window.XMLHttpRequest) {
  39.                 req1 = new XMLHttpRequest();
  40.         } else if(window.ActiveXObject) {
  41.                 req1 = new ActiveXObject("Microsoft.XMLHTTP");
  42.         }
  43.         req1.open("GET", url, true);
  44.         req1.onreadystatechange = callback1;
  45.         req1.send(null);
  46. }
  47.  
  48. function callback1() {
  49.         if(req1.readyState == 4) {
  50.                 if(req1.status == 200) {
  51.                         response = req1.responseText;
  52.                         document.getElementById("calendar1").innerHTML = response;
  53.                 } else {
  54.                         alert("There was a problem retrieving the data:\n" + req1.statusText);
  55.                 }
  56.         }
  57. }
  58. </script>
  59. </head>
  60. <body onLoad='navigate("","");navigate1("","")'>
  61. <div id='calendar' style='margin-top: 20px;margin-bottom: 20px'></div>
  62. <div id='calendar1' style='margin-top: 100px;margin-bottom: 20px'></div>
  63. </body>
  64. </html>
  65.  
calendar.php
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>$name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  
calendar1.php
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. $output = '';
  4.  
  5. if($_GET[month] == '' && $$_GET[year] == '') { 
  6.     $time = time();
  7.     $month = date('n',$time);
  8.     $year = date('Y',$time);
  9. }
  10.  
  11. $date = getdate(mktime(0,0,0,$month,1,$year));
  12. $today = getdate();
  13. $hours = $today[hours];
  14. $mins = $today[minutes];
  15. $secs = $today[seconds];
  16.  
  17. if(strlen($hours)<2) $hours="0".$hours;
  18. if(strlen($mins)<2) $mins="0".$mins;
  19. if(strlen($secs)<2) $secs="0".$secs;
  20.  
  21. $days=date("t",mktime(0,0,0,$month,1,$year));
  22. $start = $date[wday]+1;
  23. $name = $date[month];
  24. $year2 = $date[year];
  25. $offset = $days + $start - 1;
  26.  
  27. if($month==12) { 
  28.     $next=1; 
  29.     $nexty=$year + 1; 
  30. } else { 
  31.     $next=$month + 1; 
  32.     $nexty=$year; 
  33. }
  34.  
  35. if($month==1) { 
  36.     $prev=12; 
  37.     $prevy=$year - 1; 
  38. } else { 
  39.     $prev=$month - 1; 
  40.     $prevy=$year; 
  41. }
  42.  
  43. if($offset <= 28) $weeks=28; 
  44. elseif($offset > 35) $weeks = 42; 
  45. else $weeks = 35; 
  46.  
  47. $output = "<table class='daytable' cellpadding='3' cellspacing='1' align='center'>
  48. <tr>
  49.     <td colspan='7'>
  50.         <table border='0' width='100%'>
  51.         <tr>
  52.             <td valign='middle'>
  53.                 <a href='javascript:navigate1($prev,$prevy)'><img src='left.gif' border='0'></a><a href='javascript:navigate1(\"\",\"\")'><img src='center.gif' hspace='3' border='0'></a><a href='javascript:navigate1($next,$nexty)'><img src='right.gif' border='0'></a>
  54.             </td>
  55.             <td align='right'>
  56.                 <div id='heading'>c1 $name $year2</div>
  57.             </td>
  58.         </tr>
  59.         </table>
  60.     </td>
  61. </tr>
  62. <tr>
  63.     <td class='dayhead'>Sun</td>
  64.     <td class='dayhead'>Mon</td>
  65.     <td class='dayhead'>Tue</td>
  66.     <td class='dayhead'>Wed</td>
  67.     <td class='dayhead'>Thu</td>
  68.     <td class='dayhead'>Fri</td>
  69.     <td class='dayhead'>Sat</td>
  70. </tr>";
  71.  
  72. $col=1;
  73. $cur=1;
  74. $next=0;
  75.  
  76. for($i=1;$i<=$weeks;$i++) { 
  77.     if($next==3) $next=0;
  78.     if($col==1) $output.="<tr class='dayrow'>"; 
  79.  
  80.     $output.="<td valign='top' class='days' onMouseOver=\"this.style.backgroundColor='#EEEEEE'\" onMouseOut=\"this.style.backgroundColor='#FFFFFF'\">";
  81.  
  82.     if($i <= ($days+($start-1)) && $i >= $start) {
  83.         $output.="<div";
  84.  
  85.         if(($cur==$today[mday]) && ($name==$today[month])) $output.=" style='color:#FF0000'";
  86.         $output.="><b>$cur</b>";
  87.  
  88.         $output.="</div></td>";
  89.         $cur++; 
  90.         $col++; 
  91.     } else { 
  92.         $output.="&nbsp;</td>"; 
  93.         $col++; 
  94.     }  
  95.  
  96.     if($col==8) { 
  97.         $output.="</tr>"; 
  98.         $col=1; 
  99.     }
  100. }
  101.  
  102. $output.="</table>";
  103.  
  104. echo $output;
  105.  
  106. ?>
  107.  

Glad that I could be of service. Thanks for posting the solution. Congrats too, multiple XMLRequest objects can be tricky.
cassbiz's Avatar
Familiar Sight
  
Join Date: Oct 2006
Location: Florida
Posts: 204
#12: Jan 5 '07

re: Ajax calendar -- help

No Problem,

Now comes the fun part of querying the DB and setting up the output characteristics.
Newbie
  
Join Date: Feb 2007
Posts: 1
#13: Feb 24 '07

re: Ajax calendar -- help

Hey, I have question. It seems that navigation in header is not working properly (month) . When I click for March 2007, from February 2007 it shows December 1999..Where is the problem? Thnx
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

Forums
Visit our community forums for general discussions and latest on Bytes

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 229,136 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved