扫一扫分享
clndr.js是一个日历插件,用来创建日历,允许用户随意的按照自己的想法去自定义日历。这个插件不会生成任何的标记,但是可以使用数据来填 充 Underscore.js html 模版(产生下划线)。它提供一些很有帮助的选项,确定星期的推移,初始加载时显示日历,点击事件(像 下一个或者是前一个月)等等功能。
安装
bower install clndr
这是典型的CLNDR模板。它有一个控制器部分和一个网格部分。
<div class="clndr-controls">
<div class="clndr-previous-button">‹</div>
<div class="month"><%= month %></div>
<div class="clndr-next-button">›</div>
</div>
<div class="clndr-grid">
<div class="days-of-the-week">
<% _.each(daysOfTheWeek, function (day) { %>
<div class="header-day"><%= day %></div>
<% }); %>
<div class="days">
<% _.each(days, function (day) { %>
<div class="<%= day.classes %>"><%= day.day %></div>
<% }); %>
</div>
</div>
</div>
该days数组包含我们制作日历所需的大部分内容。它的结构如下:
{
day: 5,
events: [],
classes: "day",
date: moment("2015-12-31")
}
手机预览