Question

我正在使用clndr.js而我正在试图弄清楚是否可以将日历显示为时间轴，以便每个月的所有日子都在一行 - 下面是一个粗略的例子我的意思是：

<                                                      October                                             >

M  T  W  T  F  S  S  M  T  W  T  F  S  S   M  T   W   T   F   S   S  M  T   W  T  F  S  S  M  T  W   T  F  S

         1  2  3  4  5  6  7  8  9 10  11  12 13 14  15  16  17  18  19 20  21 22 23 24 25 26 27 28  29 30 31

目前我使用以下模板将其显示为普通的日历窗口小部件：

 <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>

javascript代码：

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 
});

css代码：

 .noselect {
      -webkit-user-select: none;
      /* Chrome/Safari */
      -moz-user-select: none;
      /* Firefox */
      -ms-user-select: none;
      /* IE10+ */
    }

    #mini-clndr {
      font-family: Asap, Helvetica, Arial;
      margin: 0 auto;
      width: 324px;
      height: auto;
    }
    #mini-clndr .clndr {
      overflow-y: visible;
    }
    #mini-clndr .clndr .controls {
      background-color: #47A3DA;
      color: white;
    }
    #mini-clndr .clndr .controls .clndr-previous-button,
    #mini-clndr .clndr .controls .clndr-next-button {
      width: 15%;
      padding-top: 5px;
      padding-bottom: 5px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      -webkit-user-select: none;
      /* Chrome/Safari */

      -moz-user-select: none;
      /* Firefox */

      -ms-user-select: none;
      /* IE10+ */

      -webkit-transition: background-color 0.5s;
      -moz-transition: background-color 0.5s;
      -ms-transition: background-color 0.5s;
      -o-transition: background-color 0.5s;
      transition: background-color 0.5s;
    }
    #mini-clndr .clndr .controls .clndr-previous-button:hover,
    #mini-clndr .clndr .controls .clndr-next-button:hover {
       background-color: #2A91CF;
    }
    #mini-clndr .clndr .controls .month {
      width: 70%;
      padding-top: 5px;
      padding-bottom: 5px;
      display: inline-block;
      text-align: center;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 1px;
    }
    #mini-clndr .clndr .days-container {
      position: relative;
      width: 100%;
      height: 186px;
      display: inline-block;
    }
    #mini-clndr .clndr .days-container .days {
      position: absolute;
      left: 0;
      -webkit-transition: left 0.5s;
      -moz-transition: left 0.5s;
      -ms-transition: left 0.5s;
      -o-transition: left 0.5s;
      transition: left 0.5s;
    }
    #mini-clndr .clndr .days-container .days .day,
    #mini-clndr .clndr .days-container .days .empty {
      width: 45px;
      display: inline-block;
      padding-top: 8px;
      padding-bottom: 8px;
      font-size: 1em;
      text-align: center;
      color: #212121;
      border-right: 1px solid rgba(255, 255, 255, 0.5);
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    #mini-clndr .clndr .days-container .days .day.event,
    #mini-clndr .clndr .days-container .days .empty.event {
      background-color: #0D77B6;
      -webkit-transition: background-color 0.5s;
      -moz-transition: background-color 0.5s;
      -ms-transition: background-color 0.5s;
      -o-transition: background-color 0.5s;
      transition: background-color 0.5s;
      cursor: pointer;
    }
    #mini-clndr .clndr .days-container .days .day.event:hover,
    #mini-clndr .clndr .days-container .days .empty.event:hover {
      background-color: #0D77B6;
    }
    #mini-clndr .clndr .days-container .days .day.adjacent-month,
    #mini-clndr .clndr .days-container .days .empty.adjacent-month {
      color: rgba(0, 0, 0, 0.3);
    }
    #mini-clndr .clndr .days-container .days .empty {
      height: 31px;
      vertical-align: bottom;
    }
    #mini-clndr .clndr .days-container .days .headers {
      background-color: #0D77B6;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    #mini-clndr .clndr .days-container .days .headers .day-header {
      width: 46px;
      display: inline-block;
      text-align: center;
      color: white;
    }

以下小提琴提供了一个使用上述代码http://jsfiddle.net/duck/aEwNt/

显示默认日历的工作示例

我需要在模板和上面的css中进行哪些更改才能将其显示为时间轴，即一行中的所有日期？模板生成一个包含6行的网格，而我只想要一行。

Answer 1

是的，你必须编辑CSS文件。天不在网格中，它们都是左边浮动的，所以你可以调整宽度。

#full-clndr .clndr-grid .days .day{

    width: 4%;
}

调整样式直到看起来正确。

jquery CLNDR作为时间轴视图

1 个答案: