Since contact with the front part of the calendar and date functions, I found online js use operating calendar plugins really small, very good also very few, good and bad codes, js extremely unfriendly to the date of operation compared to other languages, if be calendar, which comes with a reservation form, this function is very headache, but this is very common, such as appointment registration system, which is very common.
A, JavaScript implementation of the cumbersome
If you are a front-end madman, then give you half a day time, you develop a calendar plugin should not feel anything, in order to quickly and accurately complete development function, you want a short time, high accuracy, but also need the help of background programs, such as php. php calendar is simply too easy to do, as a front-end could not help but point a praise!
Second, to achieve a free demo reservation function
Address: HTTP: //chen.web2014.cn/zzz/tj ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.aspnetcdn.com/aja...
<style>
*{ margin: 0; padding: 0; }
.date_top { margin-top: 70px; }
ul { margin: 0px auto; width: 100%; max-width: 1000px; font-family: "微软雅黑"; color: #ccc; overflow: auto; zoom: 1; padding-left: 1px; }
li { float: left; width: 14%; height: 50px; line-height: 50px; border: 1px solid #CCC; margin-left: -1px; margin-top: -1px; line-height: 50px; list-style: none; text-align: center; font-size: 16px; }
li.ti { font-weight: bold; background: #666; color: #fff; }
.color { color: #000; background: #f2f2f2; }
.buts { clear: both; text-align: center; padding: 50px 0; }
</style>
</head>
<body>
<ul class="date_top">
<li class="ti">周一</li>
<li class="ti">周二</li>
<li class="ti">周三</li>
<li class="ti">周四</li>
<li class="ti">周五</li>
<li class="ti">周六</li>
<li class="ti">周日</li></ UL>
<UL class = "date_content">
</ UL>
<-! Below this are two switches ->
<div class = "buts">
<input type="button" value="一月"/>
<input type="button" value="二月" />
<input type="button" value="三月"/>
<input type="button" value="四月" />
<input type="button" value="五月"/>
<input type="button" value="六月" />
<input type="button" value="七月"/>
<input type="button" value="八月"/>
<input type="button" value="九月" />
<input type="button" value="十月"/>
<input type="button" value="十一月"/>
<input type="button" value="十二月"/></div>
<script>
$(function(){
$("input[type=button]").click(function(){
var ind=$(this).index();
qinqiu(ind+1);
})
function qinqiu(yuefen){
$.ajax({
url:'ajax.php',
type:'post',
data:{"nian":2015,"yue":yuefen,"ri":7,"shi":15,"fen":50,"miao":10},
dataType: "html",
success:function(data){
$(".date_content").html(data);
}
})
}
qinqiu(1); })
</script>
</body>
</html>
ajax.php
$nian=$_POST["nian"];
$yue=$_POST["yue"];
$ri=$_POST["ri"];
$shi=$_POST["shi"];
$fen=$_POST["fen"];
$miao=$_POST["miao"];
$mytime=mktime($shi, $fen, $miao, $yue, $ri, $nian); //------------传递一个参数 //echo "创建日期是 " . date("Y-m-d h:i:sa", $mytime);
$monthsNum=array(31,28,31,30,31,30,31,31,30,31,30,31); //------------循环数组
//判断是否为闰年,闰年重新设置数组
$isleapyear = $nian%4;
if($isleapyear==0){
$monthsNum[1]=29;
}
//获取日期是周几
$zhou=array("Sunday"=>7,"Monday"=>1,"Tuesday"=>2,"Wednesday"=>3,"Thursday"=>4,"Friday"=>5,"Saturday"=>6);
$zhouji=$zhou[date("l",$mytime)]; //------echo $zhouji;
//获取我要输出时候前面有几个空格,计算为负数就加7
$kongge=$zhouji-$ri%7;
if($kongge<0){$kongge+=7;};
//echo "<br/>".$kongge;
//当月应该输出的表格为
for ($i=1;$i<=$kongge;$i++){
echo "<li>空</li>";
}
//循环这个月的数据，循环次数为这个月天数 $monthsNum[$yue]
for ($i=1;$i<=$monthsNum[$yue-1];$i++){
//这里判断我们的数据是否在里面
echo "<li class='color'>".$i."号</li>";
}
for ($i=1;$i<=42-$kongge-$monthsNum[$yue-1];$i++){
echo "<li>$i</li>";
}