日程表的前端程序的核心是,通过PHP脚本生成一个当前日期的日历表格,再通过遍历数据中的消息事件,在有事件提醒的日期生成一个有"event"标识的链接,单击该链接就可以异步将对应的提醒信息显示在日历表格的下方。
PHP生成的日历
PHP生成日历是这个模块逻辑上最复杂的部分,下面来看如何生成一个标准的日历。日历展示的部分是将星期和日期通过一张二维表格输出到浏览器中的。日历表格的形式如图9.6所示。
图9.6 日历表格样式 |
现在以2010年6月14日为例说明。6月份共有30天,在这个日历表中共5行,首先需要确定当前所在的日期(当然也可以指定一个日期),比如14日,通过表格可以知道它在第3行对应星期一那列(第3周)。通常每个月第1天不是在表格开始的位置,位置并不固定,同样不固定的还有每个月的周数,有时候是4周,有时候是5周。这样,想要完成这个日历表格就需要确定一些基础的日期变量,下面具体来看需要设定的基础变量。
PHP提供了date()函数,该函数提供了丰富的日期处理功能。现在需要获得的数据有两个,第一个是当月的总天数;第二个是该月的第一天所在星期中的第几天,数字表示0(表示星期天)到6(表示星期六)。通过date()函数可以很容易获得上面的数据。
- <?php
- //date()函数的基本用法
- $year = date('Y'); //获得年份,例如2006
- $month = date('n'); //获得月份,例如04
- $day = date('j'); //获得日期,例如3
- ?>
通过mktime()函数和date()函数获得当月的总天数。
- //获得当月的总天数
- $daysInMonth = date("t",mktime(0,0,0,$month,1,$year));
同样是组合使用mktime()函数和date()函数,获得该月的第一天所在星期中的第几天,数字表示0(表示星期天)到6(表示星期六)。
- //获得每个月的第一天,例如4
- $firstDay = date("w", mktime(0,0,0,$month,1,$year));
现在重新来观察下这个日历表格,我们发现,表格中的值是从1到x(当月的总天数)。我们可以形象地通过一个坐标来表示每一个位置(x,y),表格的起始位置是(0,0),结束位置是(5,4),当月第一天的起始位置是(0,3)。现在来创建一个二维数组来存储对应的日期。
(1)需要获得表格的数目。
- //计算数组中的日历表格数
- $tempDays = $firstDay + $daysInMonth;
(2)需要算出该月一共有几周(即表格的行数)。
- //获得表格行数
- $weeksInMonth = ceil($tempDays/7);
(3)在获得行数的变量之后,创建一个二维数组用来存放日期信息,代码如下:
- <?php
- for($j=0;$j<$weeksInMonth;$j++)
- {
- for($i=0;$i<7
- ;$i++)
- {
- $counter ++;
- $week [$j] [$i] = $counter;
- }
- }
- ?>
(4)细心的读者可能发现,上面的代码其实是一个雏型,因为它处理出来的数据并没有过滤那些空白的表格单元。下面来继续改造下这段代码,加入过滤和构造的部分。改造后的代码如下:
- <?php
- //创建日期二维数组
- for($j = 0; $j < $weeksInMonth; $j ++) {
- for($i = 0; $i < 7; $i ++) {
- $counter ++;
- $week [$j] [$i] = $counter;
- //日期偏移量
- $week [$j] [$i] -= $firstDay;
- if (($week [$j] [$i] < 1) || ($week [$j] [$i] > $daysInMonth)) {
- $week [$j] [$i] = "";
- }
- }
- }
- ?>
(5)在获得正确的二维数组之后,就可以通过foreach()函数将存储的日期信息遍历出来,同时插入HTML标签创建日期,代码如下:
- <?php
- $year = date ( 'Y' ); //获得年份, 例如: 2006
- $month = date ( 'n' ); //获得月份, 例如: 04
- $day = date ( 'j' ); //获得日期, 例如: 3
- $firstDay = date ( "w", mktime ( 0, 0, 0, $month, 1, $year ) );
- //获得当月第一天
- $daysInMonth = date ( "t", mktime ( 0, 0, 0, $month, 1, $year ) );
- //获得当月的总天数
- //echo $daysInMonth;
- $tempDays = $firstDay + $daysInMonth; //计算数组中的日历表格数
- $weeksInMonth = ceil ( $tempDays/7 ); //算出该月一共有几周(即表格的行数)
- //创建一个二维数组
- for($j = 0; $j < $weeksInMonth; $j ++) {
- for($i = 0; $i < 7; $i ++) {
- $counter ++;
- $week [$j] [$i] = $counter;
- //offset the days
- $week [$j] [$i] -= $firstDay;
- if (($week [$j] [$i] < 1) || ($week [$j] [$i] > $daysInMonth)) {
- $week [$j] [$i] = "";
- }
- }
- }
- ?>
- <script type="text/JavaScript" src="calendar.js"></script>
- <table width="400" border="1" cellpadding="2" cellspacing="2">
- <tr>
- <th colspan='7'>
- <?php
- echo date ( 'M', mktime ( 0, 0, 0, $month, 1, $year ) ) . ' ' . $year;
- ?>
- </th>
- </tr>
- <tr>
- <th>Sun</th>
- <th>Mon</th>
- <th>Tue</th>
- <th>Wed</th>
- <th>Thur</th>
- <th>Fri</th>
- <th>Sat</th>
- </tr>
- <?php
- foreach ( $week as $key => $val ) {
- echo "<tr>";
- for($i = 0; $i < 7; $i ++) {
- echo "<td align='center'>" . $val [$i] . "</td>";
- }
- echo "</tr>";
- }
- ?>
(6)在浏览器中运行上面的代码,得到一个完整的日历表格,效果如图9.7所示。
图9.7 PHP生成日历 |