Home思洋影视事业部网站建设知识库
0 Comments

日历的完美实现（1）

发布于：2012-11-23  |   作者：广州网站建设  |   已聚集：人围观
日历的完美实现（1）

通过前两节的准备后，本节将独立的部分整合并完成日程表程序。日程表程序由AJAX配置文件（calendar.js）、PHP日历文件（calendar.php）、日程表XML文档（xml.php）3个部分组成。广州网站设计

1．AJAX配置文件

创建文件名为calendar.js的文件，文件内容如下：

广州网站设计
  1. var req;  
  2. //日历函数  
  3. function navigate(month,year,evt) {  
  4.     var url = "xml.php?month="+month+"&year="+year+"&event="+evt;  
  5.     //alert (url);  
  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.         var response = req.responseXML;   
  19.         var resp = response.getElementsByTagName("response");  
  20.         document.getElementById("calendar").innerHTML = resp[0].get-            ElementsByTagName("content")[0].childNodes[0].nodeValue;   
  21.         //getObject("calendar").innerHTML = resp[0].getElementsByTagName        ("content")[0].childNodes[0].nodeValue;  
  22.         //alert('hi');  
  23.     }  
  24. }  
  25. //获得元素节点  
  26. function getObject(obj) {  
  27.     var o;  
  28.     if(document.getElementById) o = document.getElementById(obj);  
  29.     else if(document.all) o = document.all.obj;   
  30.     return o;     
  31. }  

【代码解读】

其中，navigate()为入口函数，用来初始化AJAX应用，然后调用callback()函数将从xml.php获得的数据插入HTML代码中。

2．PHP日历文件

打开calendar.php文件之前，该文件完成了处理当前日期信息并生成日程表页面。下面对该文件进行改造。

（1）添加从数据库中获得信息内容，代码如下：

广州网站建设
  1. <?php   
  2. $db = @mysql_connect($localhost,$user,$pwd) ;   //数据库连接信息  
  3. mysql_select_db('calendar');                    //选择数据库  
  4. $sql = "SELECT num,date FROM 'events' LIMIT 0 , 30 ";  
  5. $result = mysql_query($sql);  
  6. while ($rw = mysql_fetch_row($result)) {  
  7.         $links[]=$rw[1];                        //将时间串取出存入数组  
  8. }  
  9. ?> 

【代码解读】

以上的代码将数据库中的事件信息遍历出来，并处理成一个数组，便于下面生成日程表时做比对，同时请注意替换数据库链接信息。

（2）现在改造生成日程表部分的代码，同时在页面代码中引入AJAX的配置文件，用来处理提交的数据。

广州网站建设
  1. <script type="text/JavaScript" src="calendar.js"></script> 
  2. <table width="400" border="1" cellpadding="2" cellspacing="2">    
  3.     <tr> 
  4.         <th colspan='7'> 
  5.             <?php echo date('M', mktime(0,0,0,$month,1,$year)).' '.$year;?> 
  6.         </th>     
  7.     </tr> 
  8.     <tr>          
  9.         <th>Sun</th>          
  10.         <th>Mon</th>          
  11.         <th>Tue</th>          
  12.         <th>Wed</th>          
  13.         <th>Thur</th>         
  14.         <th>Fri</th>          
  15.         <th>Sat</th>      
  16.         </tr> 
  17. <?php   
  18. foreach ($week as $key => $val) {     
  19.     echo "<tr>";      
  20.     for ($i=0;$i< 7;$i++) {  
  21.     //日期匹配  
  22.     if (in_array("2010-06-".$val[$i],$links)) {   
  23. echo "<td align='center'> 
  24. <a href='JavaScript:navigate(\"\",\"\",\"2010-06-".$val[$i]."\")'>Event </a>".$val[$i]."</td>";  
  25.         }else{  
  26.             echo "<td align='center'>".$val[$i]."</td>";      
  27.         }         
  28.     }     
  29.         echo "</tr>";}  
  30. ?> 

注意：当一个日期有提醒事件时，就需要在日程表格中加入一个提示标识并添加链接，通过in_arrary()就可以判断出来该日期是否在数组中，再通过if判断就可以加入事件标识了。

（3）在文件的底部加入一个空的表格用来获得数据库信息（生成HTML标签），代码如下：

广州网站建设
  1. <tr id="calback"> 
  2. <th id="calendar" colspan='7'> 
  3.     calendar  
  4. </th> 
  5. </tr> 
  6. </table> 

 

（4）至此，calendar.php的改造就完成了，在浏览器中运行该文件效果如图9.9所示。其中可以看到，在数据库设置事件的日期表格有"event"标识，并可以通过链接驱动AJAX文件。
图9.9  PHP日程表
标签：
飞机