首页手记 Html+Css+ASP 实现日历功能

Html+Css+ASP 实现日历功能

标签：

PHP Html/CSS

最近正在做一个考勤管理系统，其中有一个模块需要回显排班，既要把日期显示出来还要把班次名称回显出来。
当然网上有很多开源的日历控件，内容很丰富，质量也杠杠滴。但是，因为功能需求是要把数据库的内容回显在日期上，所以一番讨论研究后，决定自己敲一个日历控件，这个版本是基于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>

最终完成的效果图：