最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示:
一、计算数据
1、new一个Calendar类
2、初始化两个下拉框中的数据,年份与月份
3、初始化要搜索的年份和月份
4、计算得出日历中每一天的数据信息,包括css、天数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
二、html展示
1、休息天的背景色是不同的,不是当前搜索年月的天数字体颜色也是不同的
2、div中做初始化年份与月份的下拉框的操作,并选中当前要搜索的年月
3、数据已计算好,哪个td属于哪个tr也已做好,直接将table打印出来即可
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
三、Calendar类
1、threshold方法,生成日历的各个边界值
1)计算这个月总天数
2)计算这个月第一天与最后一天,各是星期几
3)计算日历中的第一个日期与最后一个日期
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
|
2、caculate方法,计算日历的天数与样式
1)将上个月的天数计算出来,本月第一天的星期不是星期天的话,就需要根据上个月的最后一天计算
2)将本月的天数遍历出来,如果是休息天就加上特殊的css样式
3)将下个月的天数计算出来,分三种情况,星期日、星期六和工作日
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
|
3、draw方法,画表格,设置table中的tr与td
1)数据将要用table标签来显示,所以这里要将各个tr下面的td排列好
2)$index % 7 == 0 计算表格每行的第一列
3)$index % 7 == 6 || $index == ($length-1) 计算每行的最后一列,或$caculate的最后一个数据
4)将中间行添加到$tr中,就是每一行的array
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
通过本文大家应该知道日历制作的方法了,那就趁热打铁,做一个属于自己日历。
附源码:教大家制作简单的php日历