一个简约的侧边栏日历（html+css+js）

前言

WordPress自带的主题好像是有日历小工具的，但很多功能强大的第三方主题居然没有，于是就想着自己写一个（其实也是借鉴了网友Resirben的代码）。实现了日历的基础功能，周末为红色字体，当前日期用绿底显提示，还可通过左右按钮切换上月或下月。

先看效果图：

正文

首先，写一段Html代码，来搭建一个骨架：

<div class="cldBody">
    <table>
        <thead>
        <tr>
            <td colspan="7">
                <div class="top6">
                    <span id="left">&lt</span>
                    <span id="topDate"></span>
                    <span id="right">&gt</span>
                </div>
            </td>
        </tr>
        <tr id="week" >
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
        </tr>
        </thead>
        <tbody id="tbody" ></tbody>
    </table>
</div>

然后，加上一段CSS代码，简单装饰一下（注意：直接与html代码放一起）：

<style type="text/css">
    .cldBody{background:#ffffff;width: 310px;margin: 1px auto;border:1px solid grey;}
    .cldBody .top6{height: 35px;line-height: 35px;text-align: center;position: relative;text-wrap: nowrap;}
    #topDate{font-size: 22px;}
    #week td{font-size: 15px;font-weight:bold;}
    td{width: 35px; height: 35px;line-height: 40px;text-align: center;font-size: 18px;}
    #tbody td:hover{background: #eeeeee;cursor: pointer;border-radius: 50%;}
    .curDate{background-color: #20e300;font-weight: bold;border-radius: 50%;}
    #tbody .curDate:hover{background-color: #1bc300;}
    #left,#right{width: 35px;height: 35px;position: absolute;cursor: pointer;border-radius: 50%;}
    #left{left: 0;}
    #right{right: 0;}
    #left:hover, #right:hover{background-color: #eeeeee;border-radius: 50%;}
</style>

最后，引入我已经封装好的JavaScript代码：

<!--引入js-->
<script src="https://网址/calender6.js" type="text/javascript" charset="utf-8"></script>

JS文件下载地址：calender6.js

好了，大功告成，刷新一下看看效果吧。