最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示:

一、计算数据

1、new一个Calendar类

2、初始化两个下拉框中的数据,年份与月份

3、初始化要搜索的年份和月份

4、计算得出日历中每一天的数据信息,包括css、天数

<?php
require_once 'calendar.php';
$util = new Calendar();
$years = array(2012, 2013, 2014, 2015, 2016);//年份选择自定义
$months = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);//月份数组
//获取post的年份数据
if(empty($_POST['ddlYear'])) {
$year = date('Y');
}else {
$year = $_POST['ddlYear'];
}
//获取post的月份数据
if(empty($_POST['ddlMonth'])) {
$month = date('n');
}else {
$month = $_POST['ddlMonth'];
} $calendar = $util->threshold($year, $month);//获取各个边界值
$caculate = $util->caculate($calendar);//计算日历的天数与样式
$draws = $util->draw($caculate);//画表格,设置table中的tr与td
?>

二、html展示

1、休息天的背景色是不同的,不是当前搜索年月的天数字体颜色也是不同的

2、div中做初始化年份与月份的下拉框的操作,并选中当前要搜索的年月

3、数据已计算好,哪个td属于哪个tr也已做好,直接将table打印出来即可

  <div style="padding:20px">
<select name="ddlYear">
<?php foreach($years as $data) {?>
<option value="<?php echo $data?>" <?php if($year == $data) echo 'selected="selected"'?>><?php echo $data?></option>
<?php }?>
</select>
<select name="ddlMonth">
<?php foreach($months as $data) {?>
<option value="<?php echo $data?>" <?php if($month == $data) echo 'selected="selected"'?>><?php echo $data?></option>
<?php }?>
</select>
<input type="submit" value="修改"/>
</div>
<table width="100%" cellspacing="0" class="table_calendar">
<thead class="f14">
<tr>
<td width="16%">日</td>
<td width="14%">一</td>
<td width="14%">二</td>
<td width="14%">三</td>
<td width="14%">四</td>
<td width="14%">五</td>
<td width="14%">六</td>
</tr>
</thead>
<tbody class="f14">
<?php foreach($draws as $draw) {?>
<tr>
<?php foreach($draw as $date) {?>
<td class="<?php echo $date['tdclass']?>">
<p class="<?php echo $date['pclass']?>"><?php echo $date['day']?></p>
</td>
<?php }?>
</tr>
<?php }?>
</tbody>
</table>

三、Calendar类

1、threshold方法,生成日历的各个边界值

  1)计算这个月总天数

  2)计算这个月第一天与最后一天,各是星期几

  3)计算日历中的第一个日期与最后一个日期

  /**
* @deprecated 生成日历的各个边界值
* @param string $year
* @param string $month
* @return array
*/
function threshold($year, $month) {
$firstDay = mktime(0, 0, 0, $month, 1, $year);
$lastDay = strtotime('+1 month -1 day', $firstDay);
//取得天数
$days = date("t", $firstDay);
//取得第一天是星期几
$firstDayOfWeek = date("N", $firstDay);
//获得最后一天是星期几
$lastDayOfWeek = date('N', $lastDay); //上一个月最后一天
$lastMonthDate = strtotime('-1 day', $firstDay);
$lastMonthOfLastDay = date('d', $lastMonthDate);
//下一个月第一天
$nextMonthDate = strtotime('+1 day', $lastDay);
$nextMonthOfFirstDay = strtotime('+1 day', $lastDay); //日历的第一个日期
if($firstDayOfWeek == 7)
$firstDate = $firstDay;
else
$firstDate = strtotime('-'. $firstDayOfWeek .' day', $firstDay);
//日历的最后一个日期
if($lastDayOfWeek == 6)
$lastDate = $lastDay;
elseif($lastDayOfWeek == 7)
$lastDate = strtotime('+6 day', $lastDay);
else
$lastDate = strtotime('+'.(6-$lastDayOfWeek).' day', $lastDay); return array(
'days' => $days,
'firstDayOfWeek' => $firstDayOfWeek,
'lastDayOfWeek' => $lastDayOfWeek,
'lastMonthOfLastDay' => $lastMonthOfLastDay,
'firstDate' => $firstDate,
'lastDate' => $lastDate,
'year' => $year,
'month' => $month
);
}

2、caculate方法,计算日历的天数与样式

  1)将上个月的天数计算出来,本月第一天的星期不是星期天的话,就需要根据上个月的最后一天计算

  2)将本月的天数遍历出来,如果是休息天就加上特殊的css样式

  3)将下个月的天数计算出来,分三种情况,星期日、星期六和工作日

  /**
* @author Pwstrick
   * @param array $calendar 通过threshold方法计算后的数据
* @deprecated 计算日历的天数与样式
*/
function caculate($calendar) {
$days = $calendar['days'];
$firstDayOfWeek = $calendar['firstDayOfWeek'];//本月第一天的星期
$lastDayOfWeek = $calendar['lastDayOfWeek'];//本月最后一天的星期
$lastMonthOfLastDay = $calendar['lastMonthOfLastDay'];//上个月的最后一天
$year = $calendar['year'];
$month = $calendar['month']; $dates = array();
if($firstDayOfWeek != 7) {
$lastDays = array();
$current = $lastMonthOfLastDay;//上个月的最后一天
for ($i = 0; $i < $firstDayOfWeek; $i++) {
array_push($lastDays, $current);//添加上一个月的日期天数
$current--;
}
$lastDays = array_reverse($lastDays);//反序
foreach ($lastDays as $index => $day) {
array_push($dates, array('day' => $day, 'tdclass' => ($index ==0 ?'rest':''), 'pclass' => 'outter'));
}
} //本月日历信息
for ($i = 1; $i <= $days; $i++) {
$isRest = $this->_checkIsRest($year, $month, $i);
//判断是否是休息天
array_push($dates, array('day' => $i, 'tdclass' => ($isRest ?'rest':''), 'pclass' => ''));
} //下月日历信息
if($lastDayOfWeek == 7) {//最后一天是星期日
$length = 6;
}
elseif($lastDayOfWeek == 6) {//最后一天是星期六
$length = 0;
}else {
$length = 6 - $lastDayOfWeek;
}
for ($i = 1; $i <= $length; $i++) {
array_push($dates, array('day' => $i, 'tdclass' => ($i==$length ?'rest':''), 'pclass' => 'outter'));
} return $dates;
}

3、draw方法,画表格,设置table中的tr与td

  1)数据将要用table标签来显示,所以这里要将各个tr下面的td排列好

  2)$index % 7 == 0 计算表格每行的第一列

  3)$index % 7 == 6 || $index == ($length-1) 计算每行的最后一列,或$caculate的最后一个数据

  4)将中间行添加到$tr中,就是每一行的array

  /**
* @author Pwstrick
* @param array $caculate 通过caculate方法计算后的数据
* @deprecated 画表格,设置table中的tr与td
*/
function draw($caculate) {
$tr = array();
$length = count($caculate);
$result = array();
foreach ($caculate as $index => $date) {
if($index % 7 == 0) {//第一列
$tr = array($date);
}elseif($index % 7 == 6 || $index == ($length-1)) {
array_push($tr, $date);
array_push($result, $tr);//添加到返回的数据中
$tr = array();//清空数组列表
}else {
array_push($tr, $date);
}
}
return $result;
}

demo下载:

http://download.csdn.net/download/loneleaf1/7976323

PHP 自制日历的更多相关文章

  1. 用vue 简单写的日历

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML自制计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 【踩坑速记】开源日历控件,顺便全面解析开源库打包发布到Bintray/Jcenter全过程(新),让开源更简单~

    一.写在前面 自使用android studio开始,就被它独特的依赖方式:compile 'com.android.support:appcompat-v7:25.0.1'所深深吸引,自从有了它,麻 ...

  4. 开源一款简单清爽的日历组件,JavaScript版的

    源码会在最后给出地址,需要的朋友自己去下载.最近项目需要做一个日程安排的功能,就是点击日历的某一天弹出一个录入页面,填完信息后保存当天的日程安排.有日程的日期会有不同的标记(比如加一个背景色啥的).网 ...

  5. FullCalendar日历插件说明文档

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  6. 被逼着写的jquery工作日管理日历插件

    因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo.我的天,我面试的可是.net工程师啊.虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上 ...

  7. java基础练习 字符串,控制流,日历,日期等

    1,对基本控制流程的一些练习 package org.base.practice3; import org.junit.Test; /** * Created with IntelliJ IDEA. ...

  8. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  9. 用NSCalendar和UICollectionView自定义日历,并实现签到显示

    前一段时间因为工作需要实现了一个可以签到的日历,来记录一下实现的思路 效果如图:   这里的基本需求是: 1,显示用户某个月的签到情况,已经签到的日子打个圈,没有签到且在某个时间范围内的可以签到,其他 ...

随机推荐

  1. java-多线程新特性

    Java定时器相关Timer和TimerTask类 每个Timer对象相对应的是单个后台线程,用于顺序地执行所有计时器任务TimerTask对象. Timer有两种执行任务的模式,最常用的是sched ...

  2. 多语言配置--LogisticsPlatform物流平台系统

    先看:LanguageProvider.cs   中几个主要方法 1.读取默认语言 附user.ini文件: 2.获取语言类型 附LanguageType.xml 3.读取语言资源 附:   看ILa ...

  3. Android--全局获取Context

    1.Android 提供了一个Application 类,每当应用程序启动的时候,系统就会自动将这个类进行初始化.这里我们可以定制一个自己的Application 类,以便于管理程序内一些全局的状态信 ...

  4. Canny边缘检测及图像缩放之图像处理算法-OpenCV应用学习笔记四

    在边缘检测算法中Canny颇为经典,我们就来做一下测试,并且顺便实现图像的尺寸放缩. 实现功能: 直接执行程序得到结果如下:将载入图像显示在窗口in内,同时进行图像两次缩小一半操作将结果显示到i1,i ...

  5. 微信内置浏览器的JS API

    /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享 ...

  6. Eclipse侧边栏Outline设置字体

    Eclipse的Outline,Project Explorer,Call Hierarchy等小窗口是很方便的功能,但是遇到函数名或文件名很长的情况,就只能显示前半段.尽管Eclipse的自定义程度 ...

  7. 丹佛机场行李系统Postmortem

    丹佛机场行李系统做Postmortem总结 事情起因是因为丹佛市场承诺进行机场建设,因此此项目问题不可回避,必须完成,合作的双方都是富有经验的公司但是最后依然变成了不可控的项目,经过小组讨论后我们认为 ...

  8. 【转载】Fiddler进行模拟Post提交json数据,总为null解决方式

    Request Headers: User-Agent: FiddlerHost: localhost:3248Content-Type: application/json; charset=utf- ...

  9. Asp.Net Web API 2第十课——使用OWIN自承载Web API

    详情请查看http://aehyok.com/Blog/Detail/71.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  10. 团队项目——站立会议 DAY11

    团队项目--站立会议 DAY11        团队成员介绍(5人):张靖颜.何玥.钟灵毓秀.赵莹.王梓萱        今日(2016/5/20),站立会议已进行了两周时间,将这一周所遇到的问题和心 ...