Question

在尝试使用clndr.js代码开发我的某个网站的工作日历之后，我偶然发现了一个问题。我想重新创建clndr.js-homepage上的迷你日历（第二个），但却无法让它发挥作用。它总是显示一个数字列表（天数，1到31），但不是实际的日历。

有人可以帮我这个吗？它可能是一个简单的解决方案，但我自己并不擅长JSON来修复它。

我的test.html文件中的代码：（→已正确链接jquery.js / clndr.js / underscore.js / moment.js）

<div id="mini-clndr">
      <script id="mini-clndr-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 class="events">
            <div class="headers">
              <div class="x-button">x</div>
              <div class="event-header">EVENTS</div>
            </div>
            <div class="events-list">
              <% _.each(eventsThisMonth, function(event) { %>
                <div class="event">
                  <a href="<%= event.url %>"><%= moment(event.date).format('MMMM Do') %>: <%= event.title %></a>
                </div>
              <% }); %>
            </div>
          </div>
        </div>

      </script>
    </div>

我的test.js文件中的代码:(与<script src="test.js"></script>关联）

var clndr = {};

$( function() {


  var currentMonth = moment().format('YYYY-MM');

  var events = [
    { date: currentMonth + '-' + '2', title: 'Test', location: 'New York' };

  clndr = $('#mini-clndr').clndr({
    template: $('#mini-clndr-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,
    forceSixRows: true
  });
});

提前致谢！

西蒙

Answer 1

请检查您的标记是否包含所有支持的文件主要检查这些文件full-clndr.less，mini-clndr.less，clndr-3.less，clndr-4.less in clndr.less

支持的文件

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/prism.css" />

<!--[if lte IE 8]>
    <script src="js/jquery1.10.js"></script>
    <script src="js/html5shiv.js"></script>
    <link rel="stylesheet" type="text/css" href="css/clndr.css" />
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet/less" type="text/css" href="css/clndr.less" />
<script src="js/jquery2.js" type="text/javascript"></script>
<script src="js/less.js" type="text/javascript"></script>
<!--<![endif]-->

<script src="js/prism.js" type="text/javascript"></script>
<script src="js/underscore.js" type="text/javascript"></script>
<script src="js/moment.js" type="text/javascript"></script>
<script src="js/clndr.js" type="text/javascript"></script>
<script src="js/site.js" type="text/javascript"></script>
<title>CLNDR.js</title>

html正文

  <div id="mini-clndr">
    <script id="mini-clndr-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 class="events">
                <div class="headers">
                    <div class="x-button">x</div>
                    <div class="event-header">EVENTS</div>
                </div>
                <div class="events-list">
                    <% _.each(eventsThisMonth, function(event) { %>
                    <div class="event">
                        <a href="<%= event.url %>"><%= moment(event.date).format('MMMM Do') %>: <%= event.title %></a>
                    </div>
                    <% }); %>
                </div>
            </div>
        </div>

    </script>
</div>

无法使用CLNDR.JS迷你日历

1 个答案: