The Power of Now

bower install clndr

bower install underscore

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

{
  day: 5,
  classes: "day",
  events: [],
  date: moment("2013-05-29")
}

events = [
  { date: "YYYY-MM-DD or some other ISO Date format", and: "anything else" }
]

$('.parent-element').clndr();

$('.parent-element').clndr({

  // 模板可以保存在script标签里。<script type="text/template"></script>
  // 或者以字符串形式引入
  template: clndrTemplate,

  // 设置一周的开始，0为周日开始，1为周一开始，默认是周日。
  weekOffset: 0,

  // 设置初始的月份，值为日期字符串或者moment对象
  startWithMonth: "YYYY-MM-DD" or moment(),

  // 设置星期的缩写，如果你设置moment.js为不同的语言，它会自动推断。
  // 如果因为某些原因，不能正常推断，用它手动设置。 
  // 这个数组必须以周日开始（结合weekOffset使用可以改变成以周一开始）
  daysOfTheWeek: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],

  // CLNDR会寻找目标类名来绑定事件
  // 下面是默认的：
  targets: {
    nextButton: 'clndr-next-button',
    previousButton: 'clndr-previous-button',
    nextYearButton: 'clndr-next-year-button',
    previousYearButton: 'clndr-previous-year-button',
    todayButton: 'clndr-today-button',
    day: 'day',
    empty: 'empty'
  },
  // 点击事件的回调函数! 在所有的回调函数中， `this` 指向clndr实例
  clickEvents: {
    // fired whenever a calendar box is clicked.
    // returns a 'target' object containing the DOM element, any events,
    // and the date as a moment.js object.
    click: function(target){ },
    // 用户点击下个月时触发
    // 返回一个设置为下个月的moment对象
    nextMonth: function(month){ },
    // 用户点击上个月时触发
    // 返回一个设置为上个月的moment对象
    previousMonth: function(month){ },
    // 用户点击明年时触发
    // 返回一个设置为明年当前月的moment对象
    nextYear: function(month) { },
    // 用户点击去年时触发
    // 返回一个设置为去年当前月的moment对象
    previousYear: function(month) { },
    // 点击导致月份发生变化时触发
    // 返回一个设置为正确月份的moment对象
    onMonthChange: function(month) { },
    // fires any time the year changes as a result of a click action.
    // if onMonthChange is also set, it is fired BEFORE onYearChange.
    // returns a moment.js object set to the correct month and year.
    //点击导致年份变化时触发，如果同时设置了onMonthChange，那么它将先于onYearChange触发，返回一个设置为正确年月的moment对象。
    onYearChange: function(month) { },
    // fired when a user goes to the current month & year.
    // returns a moment.js object set to the correct month.
    //当用户回到当前年月时触发，返回一个设置为正确月份的moment对象
    today: function(month){ }
  },

  // this is called only once after clndr has been initialized and rendered.
  // use this to bind custom event handlers that don't need to be re-attached
  // every time the month changes (most event handlers fall in this category).
  // hint: this.element refers to the parent element that holds the clndr,
  // and is a great place to attach handlers that don't get tossed out every
  // time the clndr is re-rendered.
  //该方法只会在clndr初始化并且渲染完成后调用一次，用它来绑定自定义事件处理器（适用于那些当月份变化时不用重新绑定的事件处理器，大部分事件处理器都属于这一类），提示：this.element 引用承载clndr的父元素，这是一个绑定事件的好地方，因为它不会再clndr重新渲染时被销毁。
  ready: function() { },
  // a callback when the calendar is done rendering.
  // This is a good place to bind custom event handlers
  // (also see the 'ready' option above).
  //当clndr渲染完成时的回调函数。同样是用来绑定自定义事件处理器。
  doneRendering: function(){ },

  // 事件对象的数组
  events: [],
  // if you're supplying an events array, dateParameter points to the
  // field in your event object containing a date string.
  // It's set to 'date' by default.
  //如果你提供了一个事件数组，dateParameter指向了你事件对象里包含时间的域，默认是date
  dateParameter: 'date',
  // show the numbers of days in months adjacent to the current month
  // (and populate them with their events). defaults to true.
  // CLNDR can accept events lasting more than one day!
  // just pass in the multiDayEvents option and specify what the start and
  // end fields are called within your event objects. See the example file
  // for a working instance of this.
  multiDayEvents: {
    startDate: 'startDate',
    endDate: 'endDate'
  },

  // show the dates of days in months adjacent to the current month.
  // defaults to true.
  showAdjacentMonths: true,
  // when days from adjacent months are clicked, switch the current month.
  // fires nextMonth/previousMonth/onMonthChange click callbacks. defaults to false.
  adjacentDaysChangeMonth: false,
  // always make the calendar six rows tall (42 days) so that every month has a
  // consistent height. defaults to 'false'.
  forceSixRows: false,

  // anything you want access to in your template
  extras: { }

  // if you want to use a different templating language, here's your ticket.
  // Precompile your template (before you call clndr),
  // pass the data from the render function into your template,
  // and return the result. The result must be a string containing valid markup.
  // The keyword 'this' is set to the clndr instance
  // in case you need access to any other properties.
  // More under 'Template Rendering Engine' below.
  render: function(data){
    return '<div class="html data as a string"></div>';
  },

  // if you want to prevent the user from navigating the calendar outside
  // of a certain date range (e.g. if you are making a datepicker), specify
  // either the startDate, endDate, or both in the constraints option. You
  // can change these while the calendar is on the page... See documentation
  // below for more on this!
  constraints: {
    startDate: '2017-12-22',
    endDate: '2018-01-09'
  }
});

// day-of-the-week 缩写的数组,
// shifted as requested using the weekOffset parameter.
daysOfTheWeek: ['S', 'M', 'T', etc...]
// the number of 7-block calendar rows,
// in the event that you want to do some looping with it
numberOfRows: 5
// the days object, documented in more detail above
days: [ { day, classes, id, events, date } ]
// the month name- don't forget that you can do things like
// month.substring(0, 1) and month.toLowerCase() in your template
month: "May"
// the year that the calendar is currently focused on
year: "2013"
// all of the events happening this month
eventsThisMonth: [ ],
// all of the events happening last month
eventsLastMonth: [ ],
// all of the events happening next month
eventsNextMonth: [ ],
// anything you passed into the 'extras' property when creating the clndr
extras: { }

var lotsOfEvents = [
  { start: '2013-11-04', end: '2013-11-08', title: 'Monday to Friday Event' },
  { start: '2013-11-15', end: '2013-11-20', title: 'Another Long Event' }
];

$('#calendar').clndr({
  events: lotsOfEvents,
  multiDayEvents: {
    startDate: 'start',
    endDate: 'end'
  }
});

// switch to Jinja2/Twig/Nunjucks-style delimiters
_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g,
  escape: /\{\{\-(.+?)\}\}/g,
  evaluate: /\{\%(.+?)\%\}/g
};