javascript 使用 CLNDR.js 创建日历
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22254575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
create a calendar using CLNDR.js
提问by Damiii
I would like to create a calendar with CLNDR.js but i don't know how to begin ... I saw the github page : https://github.com/kylestetz/CLNDR#dependenciesand installed the github repository on my pc also. But my problem is : How can i create a calendar without the examples shown on the github repository... I mean, i didn't understand the examples codes on there page, and i would like to have some suggestion on "How to create". Can anyone help me please ? Which files i need, how do we implement... etc etc
我想用 CLNDR.js 创建一个日历，但我不知道如何开始......我看到了 github 页面：https: //github.com/kylestetz/CLNDR#dependencies并在我的电脑上安装了 github 存储库还。但我的问题是：如何在没有 github 存储库中显示的示例的情况下创建日历......我的意思是，我不理解那里页面上的示例代码，我想对“如何创建”。有人可以帮我吗？我需要哪些文件，我们如何实现...等等
回答by mie
I made an example for you on JSFiddle.
我在JSFiddle上为你做了一个例子。
You'll need jquery, underscore.js, moment.js and clndr.js itself. It's all written in the official README.
您将需要 jquery、underscore.js、moment.js 和 clndr.js 本身。这一切都写在官方的 README 中。
In brief, create an empty div (container) and a templete inside HTML code:
简而言之，在 HTML 代码中创建一个空的 div（容器）和一个模板：
<div id="mini-clndr"></div>
<script id="calendar-template" type="text/template">
<div class="controls">
<div class="clndr-previous-button">‹</div><div class="month"><%= month %></div><div class="clndr-next-button">›</div>
</div>
<div class="days-container">
<div class="days">
<div class="headers">
<% _.each(daysOfTheWeek, function(day) { %><div class="day-header"><%= day %></div><% }); %>
</div>
<% _.each(days, function(day) { %><div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div><% }); %>
</div>
</div>
</script>
Then add some JS as described in the docs:
然后按照文档中的描述添加一些 JS ：
var currentMonth = moment().format('YYYY-MM');
var nextMonth = moment().add('month', 1).format('YYYY-MM');
var events = [
{ date: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' },
{ date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' },
{ date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' },
{ date: nextMonth + '-' + '07', title: 'Small Cat Photo Session', location: 'Center for Cat Photography' }
];
$('#mini-clndr').clndr({
template: $('#calendar-template').html(),
events: events,
clickEvents: {
click: function(target) {
if(target.events.length) {
var daysContainer = $('#mini-clndr').find('.days-container');
daysContainer.toggleClass('show-events', true);
$('#mini-clndr').find('.x-button').click( function() {
daysContainer.toggleClass('show-events', false);
});
}
}
},
adjacentDaysChangeMonth: true
});
