simplecalendar.js记录事件的日历插件

simplecalendar.js是一款备忘录日历插件,你可以记录日志,事件,新闻等等。只要在div.day-event定义好属性即可。若是ajax调取数据的话，只要切换日历html代码，再初始化日历calendar.init();

分类：日期时间 > 日历难易：中级

查看演示下载资源下载积分： 20 积分

12月份日历html代码

<table>
    <thead>
        <tr><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td><td>日</td></tr>
    </thead>
    <tbody>
        <tr>
            <td date-month="12" date-day="1">1</td>
            <td date-month="12" date-day="2">2</td>
            <td date-month="12" date-day="3">3</td>
            <td date-month="12" date-day="4">4</td>
            <td date-month="12" date-day="5">5</td>
            <td date-month="12" date-day="6">6</td>
            <td date-month="12" date-day="7">7</td>
        </tr>
        <tr>
            <td date-month="12" date-day="8">8</td>
            <td date-month="12" date-day="9">9</td>
            <td date-month="12" date-day="10">10</td>
            <td date-month="12" date-day="11">11</td>
            <td date-month="12" date-day="12">12</td>
            <td date-month="12" date-day="13">13</td>
            <td date-month="12" date-day="14">14</td>
        </tr>
        <tr>
            <td date-month="12" date-day="15">15</td>
            <td date-month="12" date-day="16">16</td>
            <td date-month="12" date-day="17">17</td>
            <td date-month="12" date-day="18">18</td>
            <td date-month="12" date-day="19">19</td>
            <td date-month="12" date-day="20">20</td>
            <td date-month="12" date-day="21">21</td>
        </tr>
        <tr>
            <td date-month="12" date-day="22">22</td>
            <td date-month="12" date-day="23">23</td>
            <td date-month="12" date-day="24">24</td>
            <td date-month="12" date-day="25">25</td>
            <td date-month="12" date-day="26">26</td>
            <td date-month="12" date-day="27">27</td>
            <td date-month="12" date-day="28">28</td>
        </tr>
        <tr>
            <td date-month="12" date-day="29">29</td>
            <td date-month="12" date-day="30">30</td>
            <td date-month="12" date-day="31">31</td>
        </tr>
    </tbody>
</table>

选中日历html代码

<div class="day-event" date-month="12" date-day="3">
    <a href="#" class="close fontawesome-remove"></a>
    <h2 class="title"><a href='http://www.sucaihuo.com/js/566.html' target='_blank'>jQuery提前设置中奖号</a></h2>
    <p class="date">2015-01-3</p>
    <p>这是一个很简单的抽奖代码，在前台可设置要中奖的奖品。当然在项目中，我们会在后台设置概率，根据后台所中奖项设置前台最后所中的奖项。这是一个很火的九宫格抽奖http://www.sucaihuo.com/js/129.html，概率都帮你算好了，必须要PHP环境才可以点击抽奖哦。</p>
    <label>
        <a href='http://www.sucaihuo.com/js/566.html' target='_blank'>Read more!</a>
    </label>
</div>
<div class="day-event" date-month="12" date-day="10">
    <a href="#" class="close fontawesome-remove"></a>
    <h2 class="title"><a href='http://www.sucaihuo.com/js/567.html' target='_blank'>jQuery+Ajax打开弹出分页层</a></h2>
    <p class="date">2015-01-10</p>
    <p>这是后台经常用到的ajax分页效果，首先打开订单列表弹出层，然后选择多选款，点击分页也可保留刚才选中的数据，最后点击保存按钮，以Ajax形式提交到数据库中去。提示：弹出层用的bootstrap的nodal方法，已经封装在jquery.js中。</p>
    <label>
        <a href='http://www.sucaihuo.com/js/567.html' target='_blank'>Read more!</a>
    </label>
</div>

引入simplecalendar.js日历插件

<script src="js/simplecalendar.js" type="text/javascript"></script>

js/simplecalendar.js15行修改日历头

function GetMonthName(monthNumber) {
    var months = ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'];
    return months[monthNumber - 1];
}