Html+Css+ASP 实现日历功能
432 查看最近正在做一个考勤管理系统，其中有一个模块需要回显排班，既要把日期显示出来还要把班次名称回显出来。
当然网上有很多开源的日历控件，内容很丰富，质量也杠杠滴。但是，因为功能需求是要把数据库的内容回显在日期上，所以一番讨论研究后，决定自己敲一个日历控件，这个版本是基于ASP的，后续有时间我还会再做一个PHP的。
其实，日历控件最主要的核心就是当前的date 根据date 来判断 当前的年，月以及这个月的排版，其中还有星期几的判断。
Css 代码如下：PS前端设计不是很擅长，样式设计还有待提高...body{
BACKGROUND-COLOR: #eef2fb;
}
.titlebt {
display: block;
font-weight: bold;
font-size: 12px;
color: #000;
text-indent: 15px;
line-height: 26px;
background-repeat: no-repeat;
}
.contain-date{
width: 60%;
height: 60%;
border-left: 1px solid #1E90FF;
margin: 0 auto;
margin-top:25px;
}
#title {
width: 100%;
height: 60px;
background-color:#1E90FF;
}
.selectBtn {
font-weight: 900;
font-size: 24px;
color: #fff;
cursor: pointer;
text-decoration: none;
padding: 15px 10px 12px;
}
.selectBtn:hover {
background-color: #3D59AB;
}
.Year_Month {
font-weight: 900;
font-size: 24px;
color: #FF8000;
cursor: pointer;
text-decoration: none;
padding: 15px 10px 12px;
width:200px;
margin-left:32%;
display: inline-block;
}
.month {
display: inline-block;
}
.nextMonth {
float: right;
}
#context {
background-color: #fff;
width: 100%;
}
.week {
width: 99.731%;
height: 37px;
border-right: 1px solid #1E90FF;
border-bottom: 1px solid #1E90FF;
}
.week>h3 {
float: left;
color: #808080;
text-align: center;
margin: 0;
padding: 0;
margin-top: 5px;
font-size: 22px;
width:14%;
cursor: pointer;
}
.cont_all{
color:#0B1746;
cursor: pointer;
}
.cont_dayTag{
font-size:1em;margin-bottom:10px;margin-top:10px;text-align: center;text-align: center;
}
.cont_dayTag_else{
font-size:1em;margin-top:10px;text-align: center;
}
.cont_dayTag_end{
margin-top:10px;text-align: center;
}
.cont_dayTag_right{
display:inline-block;width:16%;height:82px;font-size:22px;background-color:#6A5ACD;vertical-align:top;border-bottom: 1px solid #1E90FF; text-align: center;color: #FF9912;
}
.cont_dayTag_right_s{
display:inline-block;width:16%;height:82px;font-size:22px;vertical-align:top;border-bottom: 1px solid #1E90FF;border-right: 1px solid #1E90FF;text-align: center;
}
.cont_dayTag_all{
display:inline-block;width:13.8%;height:82px;font-size:22px;background-color:#6A5ACD;vertical-align:top;border-bottom: 1px solid #1E90FF;border-right:1px solid #1E90FF;text-align: center;color: #FF9912;
}
.cont_dayTag_all_s{
display:inline-block;width:13.8%;height:82px;font-size:22px;vertical-align:top;border-bottom: 1px solid #1E90FF;border-right:1px solid #1E90FF;text-align: center;
}
.cont_dayTag_all_s:hover{
background-color: #1E90FF;
cursor: pointer;
color: #F0FFF0;
}
.cont_dayTag_right_s:hover{
background-color: #1E90FF;
cursor: pointer;
color: #F0FFF0;
}ASP代码如下：
<form action="" name = "form1" method = "post">
<div class = "contain-date">
<%
dim tdate
if request.Form("hiddendate")="" then
tdate=date()
else
if request.Form("hiddenflag")="1" then
tdate=DateAdd("m",-1,cdate(request.Form("hiddendate")))
elseif request.Form("hiddenflag")="2" then
tdate=DateAdd("m",1,cdate(request.Form("hiddendate")))
end if
end if
%>
<div id="title">
<a class="selectBtn month" onClick="form1.hiddenflag.value=1;form1.submit();"><</a>
<div class="Year_Month"><%=year(tdate)%>年<%=right("0"&month(tdate),2)%>月</div>
<a class="selectBtn nextMonth" onClick="form1.hiddenflag.value=2;form1.submit();">></a>
</div>
<div id="context">
<div class="week">
<h3> 日 </h3>
<h3> 一 </h3>
<h3> 二 </h3>
<h3> 三 </h3>
<h3> 四 </h3>
<h3> 五 </h3>
<h3> 六 </h3>
</div>
</div>
<%
dim flag,monF,tdmonth,html,tFlag,i,w,dayTag
flag=0 //满足星期几的标记
monF=cdate(year(tdate)&"-"&month(tdate)&"-1") //每月的第一天
tdmonth=month(tdate) //存放当前是第几月，用来判断当前日期是否属于这个月份，不属于则跳出
tFlag=0 //跳出第１个for循环后，跳出第２个for循环的标记
html="" //存放html代码
for i=1 to 6
html=html&"<div class = 'cont_all'>"
for w=1 to 7
if cint(Weekday(monF))=w then '判断当前是星期几'
if flag=0 then
flag=1
end if
end if
if flag=1 then
if monF=date() then
dayTag="<div class = 'cont_dayTag'><b>"&day(monF)&"</b></div>"
elseif monF=tdate then
dayTag="<div class='cont_dayTag_else'>"&day(monF)&"</div>"
else
dayTag="<div class='cont_dayTag_end'>"&day(monF)&"</div>"
end if
'这里需要回显一个数据库的字段值，所以多嵌套了一个div'
if monF = date() then
if w = 7 then '判断是否是星期六，考虑到最右边的css样式'
html=html&"<div class = 'cont_dayTag_right' >"&dayTag&"周末班</div>"
else
html=html&"<div class = 'cont_dayTag_all' >"&dayTag&"周末班</div>"
end if
elseif monF = tdate then
if w = 7 then
html=html&"<div class = 'cont_dayTag_right_s' >"&dayTag&"<div></div></div>"
else
html=html&"<div class = 'cont_dayTag_all_s' >"&dayTag&"<div></div></div>"
end if
else
if w = 7 then
html=html&"<div class = 'cont_dayTag_right_s' >"&dayTag&"<div></div></div>"
else
html=html&"<div class = 'cont_dayTag_all_s' >"&dayTag&"<div></div></div>"
end if
end if
monF=monF+1
else
if w = 7 then
html=html&"<div class = 'cont_dayTag_right_s' ></div>"
else
html=html&"<div class = 'cont_dayTag_all_s' ></div>"
end if
end if
if month(monF)<>tdmonth then
tFlag=1
exit for
end if
next
html=html&"</div>"
if tFlag=1 then exit for
next
%>
<%=html%>
</div>
<!-- 隐藏域 -->
<input type="hidden" name="hiddendate" value="<%=tdate%>">
<input type="hidden" name="hiddenflag">
<!-- 隐藏域 -->
</form> 最终完成的效果图：
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123
