Question

我想用CLNDR.js创建一个日历，但我不知道如何开始...... 我看到了github页面：https://github.com/kylestetz/CLNDR#dependencies 并在我的电脑上安装了github存储库。但我的问题是：如何在没有github存储库中显示的示例的情况下创建日历... 我的意思是，我不明白页面上的示例代码，我想对“如何创建”有一些建议。有人可以帮我吗？我需要哪些文件，我们如何实现...等等

Answer 1

我在JSFiddle上为你做了一个例子。

你需要jquery，underscore.js，moment.js和clndr.js本身。它全部写在official README。

简而言之，在HTML代码中创建一个空div（容器）和一个模板：

<div id="mini-clndr"></div>

<script id="calendar-template" type="text/template">
  <div class="controls">
    <div class="clndr-previous-button">&lsaquo;</div><div class="month"><%= month %></div><div class="clndr-next-button">&rsaquo;</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>

然后按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
});

使用CLNDR.js创建日历

1 个答案: