PageRenderTime 26ms CodeModel.GetById 26ms RepoModel.GetById 1ms app.codeStats 0ms

/public/altair/bower_components/clndr/README.md

https://gitlab.com/dima-antonenko/projectX
Markdown | 701 lines | 535 code | 166 blank | 0 comment | 0 complexity | 41976afb78522ce8fb91f87cafdc140f MD5 | raw file
  1. CLNDR.js
  2. ========
  3. CLNDR is a jQuery calendar plugin. It was created- you've heard this before- out of frustration with the lack of truly dynamic front-end calendar plugins out there.
  4. See a demo: [kylestetz.github.io/CLNDR/](http://kylestetz.github.io/CLNDR/)
  5. --------
  6. #### Clndr.js version 2.0 is coming
  7. If you are using clndr.js and have any feedback or ideas about a new version, please take a moment to contribute to [#151](https://github.com/kylestetz/CLNDR/issues/151). If you are interested in helping to develop the new version, give a shout in [#136](https://github.com/kylestetz/CLNDR/issues/136). Thanks!
  8. --------
  9. - [Download](https://github.com/kylestetz/CLNDR#download)
  10. - [Dependencies](https://github.com/kylestetz/CLNDR#dependencies)
  11. - [Using Bower](https://github.com/kylestetz/CLNDR#using-bower)
  12. - [Clndr using Angular.js](https://github.com/kylestetz/CLNDR#clndr-using-angular)
  13. - [Clndr using Rails](https://github.com/kylestetz/CLNDR#clndr-using-rails)
  14. - [Introduction: You Write The Markup](https://github.com/kylestetz/CLNDR#introduction-you-write-the-markup)
  15. - [The 'days' Array](https://github.com/kylestetz/CLNDR#the-days-array)
  16. - [Pass in your Events](https://github.com/kylestetz/CLNDR#pass-in-your-events)
  17. - [Usage](https://github.com/kylestetz/CLNDR#usage)
  18. - [Multi-day Events](https://github.com/kylestetz/CLNDR#multi-day-events)
  19. - [Custom Classes](https://github.com/kylestetz/CLNDR#custom-classes)
  20. - [Constraints & Datepickers](https://github.com/kylestetz/CLNDR#constraints--datepickers)
  21. - [Returning the Instance / API](https://github.com/kylestetz/CLNDR#returning-the-instance--public-api)
  22. - [Template Requirements](https://github.com/kylestetz/CLNDR#template-requirements)
  23. - [Configuration](https://github.com/kylestetz/CLNDR#some-configuration)
  24. - [Template Rendering Engine](https://github.com/kylestetz/CLNDR#template-rendering-engine)
  25. - [Internationalization](https://github.com/kylestetz/CLNDR#internationalization)
  26. - [Underscore Template Delimiters](https://github.com/kylestetz/CLNDR#underscore-template-delimiters)
  27. - [Internet Explorer Issues](https://github.com/kylestetz/CLNDR#internet-explorer-issues)
  28. - [Changelog](https://github.com/kylestetz/CLNDR#changelog)
  29. Download
  30. --------
  31. - development ~ [clndr.js](https://raw.github.com/kylestetz/CLNDR/master/src/clndr.js)
  32. - production ~ [clndr.min.js](https://raw.github.com/kylestetz/CLNDR/master/clndr.min.js)
  33. Returning to grab a new version? Have a look at the [changelog](https://github.com/kylestetz/CLNDR#changelog) to see what's new.
  34. If you'd like to run some tests in a particular browser or environment, `example/test.html` contains a list of basic functionality tests. When contributing, please run these (and add to them when appropriate) before submitting a pull request!
  35. Dependencies
  36. ------------
  37. [jQuery](http://jquery.com/download/) and [Moment.js](http://momentjs.com/) are depended upon. By default CLNDR tries to use [Underscore.js](http://underscorejs.org/)'s `_.template()` function, however if you specify a custom rendering function (see documentation below) underscore will not be used at all.
  38. Because their APIs are the same, [Lo-Dash](http://lodash.com/)'s `_.template()` function will work as well! Just include Lo-Dash instead of underscore.
  39. ### Using Bower
  40. You can install CLNDR via [Bower](http://bower.io/):
  41. ```shell
  42. bower install clndr
  43. ```
  44. Underscore is not installed by default. This allows you to use whichever templating engine you want to. If you want to use the default `template` option with Underscore, just install it as a dependency of your project: `bower install underscore`.
  45. ### Clndr Using Angular
  46. If you want to integrate clndr into an [angular.js](http://angularjs.org/) site, get started with this directive: [angular-clndr](https://github.com/10KB/angular-clndr).
  47. ### Clndr Using Rails
  48. If you're building a rails application you may be interested in this gem by [@sedx](https://github.com/sedx): [clndr-rails](https://github.com/sedx/clndr-rails).
  49. Introduction: You Write The Markup
  50. ==================================
  51. There are wonderful and feature-rich calendar modules out there and they all suffer the same problem: they give you markup (and often a good heap of JS) that you have to work with and style. This leads to a lot of hacking, pushing, pulling, and annoying why-can't-it-do-what-I-want scenarios.
  52. CLNDR doesn't generate markup (well, it has some reasonable defaults, but that's an aside). Instead, CLNDR asks you to create a template and in return it supplies your template with a great set of objects that will get you up and running in a few lines.
  53. The 'Days' Array
  54. ----------------
  55. Here's a typical CLNDR template. It's got a controller section and a grid section.
  56. ```html
  57. <div class="clndr-controls">
  58. <div class="clndr-previous-button">&lsaquo;</div>
  59. <div class="month"><%= month %></div>
  60. <div class="clndr-next-button">&rsaquo;</div>
  61. </div>
  62. <div class="clndr-grid">
  63. <div class="days-of-the-week">
  64. <% _.each(daysOfTheWeek, function(day) { %>
  65. <div class="header-day"><%= day %></div>
  66. <% }); %>
  67. <div class="days">
  68. <% _.each(days, function(day) { %>
  69. <div class="<%= day.classes %>"><%= day.day %></div>
  70. <% }); %>
  71. </div>
  72. </div>
  73. </div>
  74. ```
  75. The `days` array contains most of the stuff we need to make a calendar. Its structure looks like this:
  76. ```javascript
  77. {
  78. day: 5,
  79. classes: "day",
  80. events: [],
  81. date: moment("2013-05-29")
  82. }
  83. ```
  84. This makes quick work of generating a grid. `days.classes` contains extra classes depending on the circumstance: if a given day is today, 'today' will show up, as well as an 'event' class when an event lands on that day.
  85. Pass In Your Events
  86. -------------------
  87. CLNDR accepts events as an array of objects:
  88. ```javascript
  89. events = [
  90. { date: "YYYY-MM-DD or some other ISO Date format", and: "anything else" }
  91. ]
  92. ```
  93. CLNDR looks through the objects in your events array for a `date` field unless you specify otherwise using the `dateParameter` option. In your template the `days` array will auto-magically contain these event objects in their entirety. See the examples for a demonstration of how events populate the `days` array.
  94. Usage
  95. =====
  96. CLNDR leans on the awesome work done in underscore.js and moment.js- these are requirements (unless you are using a different rendering engine, in which case underscore is not a requirement). Do be sure to include them in your `<head>` before clndr.js. It is a jQuery plugin, so naturally you'll need that as well.
  97. The bare minimum (CLNDR includes a default template):
  98. ```javascript
  99. $('.parent-element').clndr();
  100. ```
  101. With all of the available options:
  102. ```javascript
  103. $('.parent-element').clndr({
  104. // the template: this could be stored in markup as a
  105. // <script type="text/template"></script>
  106. // or pulled in as a string
  107. template: clndrTemplate,
  108. // determines which month to start with using either a date string or a
  109. // moment object.
  110. startWithMonth: "YYYY-MM-DD" or moment(),
  111. // start the week off on Sunday (0), Monday (1), etc. Sunday is the default.
  112. // WARNING: if you are dealing with i18n and multiple languages, you probably
  113. // don't want this! See the "Internationalization" section below for more.
  114. weekOffset: 0,
  115. // an array of day abbreviation labels. If you have moment.js set to a
  116. // different language, it will guess these for you! If for some reason that
  117. // doesn't work, use this...
  118. // WARNING: if you are dealing with i18n and multiple languages, you probably
  119. // don't want this! See the "Internationalization" section below for more.
  120. daysOfTheWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
  121. // the target classnames that CLNDR will look for to bind events.
  122. // these are the defaults.
  123. targets: {
  124. nextButton: 'clndr-next-button',
  125. previousButton: 'clndr-previous-button',
  126. nextYearButton: 'clndr-next-year-button',
  127. previousYearButton: 'clndr-previous-year-button',
  128. todayButton: 'clndr-today-button',
  129. day: 'day',
  130. empty: 'empty'
  131. },
  132. // custom classes to avoid styling issues. pass in only the
  133. // classnames that you wish to override.
  134. // these are the defaults.
  135. classes: {
  136. today: "today",
  137. event: "event",
  138. past: "past",
  139. lastMonth: "last-month",
  140. nextMonth: "next-month",
  141. adjacentMonth: "adjacent-month",
  142. inactive: "inactive",
  143. selected: "selected"
  144. }
  145. // click callbacks! the keyword 'this' is set to the clndr instance in all
  146. // callbacks.
  147. clickEvents: {
  148. // fired whenever a calendar box is clicked.
  149. // returns a 'target' object containing the DOM element, any events,
  150. // and the date as a moment.js object.
  151. click: function(target){ },
  152. // fired when a user goes forward a month.
  153. // returns a moment.js object set to the correct month.
  154. nextMonth: function(month){ },
  155. // fired when a user goes back a month.
  156. // returns a moment.js object set to the correct month.
  157. previousMonth: function(month){ },
  158. // fired when the next year button is clicked.
  159. // returns a moment.js object set to the correct month and year.
  160. nextYear: function(month) { },
  161. // fired when the previous year button is clicked.
  162. // returns a moment.js object set to the correct month and year.
  163. previousYear: function(month) { },
  164. // fires any time the month changes as a result of a click action.
  165. // returns a moment.js object set to the correct month.
  166. onMonthChange: function(month) { },
  167. // fires any time the year changes as a result of a click action.
  168. // if onMonthChange is also set, it is fired BEFORE onYearChange.
  169. // returns a moment.js object set to the correct month and year.
  170. onYearChange: function(month) { },
  171. // fired when a user goes to the current month & year.
  172. // returns a moment.js object set to the correct month.
  173. today: function(month){ }
  174. },
  175. // use the 'touchstart' event instead of 'click'
  176. useTouchEvents: false,
  177. // this is called only once after clndr has been initialized and rendered.
  178. // use this to bind custom event handlers that don't need to be re-attached
  179. // every time the month changes (most event handlers fall in this category).
  180. // hint: this.element refers to the parent element that holds the clndr,
  181. // and is a great place to attach handlers that don't get tossed out every
  182. // time the clndr is re-rendered.
  183. ready: function() { },
  184. // a callback when the calendar is done rendering.
  185. // This is a good place to bind custom event handlers
  186. // (also see the 'ready' option above).
  187. doneRendering: function(){ },
  188. // an array of event objects
  189. events: [],
  190. // if you're supplying an events array, dateParameter points to the
  191. // field in your event object containing a date string.
  192. // It's set to 'date' by default.
  193. dateParameter: 'date',
  194. // CLNDR can accept events lasting more than one day!
  195. // just pass in the multiDayEvents option and specify what the start and
  196. // end fields are called within your event objects. See the example file
  197. // for a working instance of this.
  198. multiDayEvents: {
  199. startDate: 'startDate',
  200. endDate: 'endDate',
  201. // if you also have single day events with a different date field,
  202. // use the singleDay property and point it to the date field.
  203. singleDay: 'date'
  204. },
  205. // show the dates of days in months adjacent to the current month.
  206. // defaults to true.
  207. showAdjacentMonths: true,
  208. // when days from adjacent months are clicked, switch the current month.
  209. // fires nextMonth/previousMonth/onMonthChange click callbacks. defaults to
  210. // false.
  211. adjacentDaysChangeMonth: false,
  212. // always make the calendar six rows tall (42 days) so that every month has a
  213. // consistent height. defaults to 'false'.
  214. forceSixRows: null,
  215. // set this to true, if you want the plugin to track the last clicked day.
  216. // if trackSelectedDate is true, "selected" class will always be applied only
  217. // to the most recently clicked date; otherwise - selectedDate will not change.
  218. trackSelectedDate: false,
  219. // set this, if you want a date to be "selected" (see classes.selected) after
  220. // plugin init.
  221. // defualts to null - no initially selected date
  222. selectedDate: null,
  223. // CLNDR can render in any time interval!
  224. // You can specify if you want to render one or more months, or one ore more
  225. // days in the calendar, as well as the paging interval whenever forward or
  226. // back is triggered. If both months and days are null, CLNDR will default to
  227. // the standard monthly view.
  228. lengthOfTime: {
  229. // Set to an integer if you want to render one or more months, otherwise
  230. // leave this null
  231. months: null,
  232. // Set to an integer if you want to render one or more days, otherwise
  233. // leave this null. Setting this to 14 would render a 2-week calendar.
  234. days: null,
  235. // This is the amount of months or days that will move forward/back when
  236. // paging the calendar. With days=17 and interval=7, you would have a 2-week
  237. // calendar that pages forward and backward 1 week at a time.
  238. interval: 1
  239. },
  240. // anything you want access to in your template
  241. extras: {},
  242. // if you want to use a different templating language, here's your ticket.
  243. // Precompile your template (before you call clndr),
  244. // pass the data from the render function into your template,
  245. // and return the result. The result must be a string containing valid markup.
  246. // The keyword 'this' is set to the clndr instance
  247. // in case you need access to any other properties.
  248. // More under 'Template Rendering Engine' below.
  249. render: function(data){
  250. return '<div class="html data as a string"></div>';
  251. },
  252. // if you want to prevent the user from navigating the calendar outside
  253. // of a certain date range (e.g. if you are making a datepicker), specify
  254. // either the startDate, endDate, or both in the constraints option. You
  255. // can change these while the calendar is on the page... See documentation
  256. // below for more on this!
  257. constraints: {
  258. startDate: '2017-12-22',
  259. endDate: '2018-01-09'
  260. }
  261. });
  262. ```
  263. All of the things you have access to in your template:
  264. ```javascript
  265. // an array of day-of-the-week abbreviations,
  266. // shifted as requested using the weekOffset parameter.
  267. daysOfTheWeek: ['S', 'M', 'T', etc...]
  268. // the number of 7-block calendar rows,
  269. // in the event that you want to do some looping with it
  270. numberOfRows: 5
  271. // the days object, documented in more detail above
  272. days: [ { day, classes, id, events, date } ]
  273. // the month name- don't forget that you can do things like
  274. // month.substring(0, 1) and month.toLowerCase() in your template
  275. previousMonth: "April"
  276. month: "May"
  277. nextMonth: "June"
  278. // the year that the calendar is currently focused on
  279. year: "2013"
  280. // all of the events happening this month
  281. eventsThisMonth: [ ],
  282. // all of the events happening last month
  283. eventsLastMonth: [ ],
  284. // all of the events happening next month
  285. eventsNextMonth: [ ],
  286. // anything you passed into the 'extras' property when creating the clndr
  287. extras: { }
  288. ```
  289. Multi-day Events
  290. ----------------
  291. Clndr accepts events lasting more than one day. You just need to tell it how to access the start and end dates of your events:
  292. ```javascript
  293. var lotsOfEvents = [
  294. { start: '2013-11-04', end: '2013-11-08', title: 'Monday to Friday Event' },
  295. { start: '2013-11-15', end: '2013-11-20', title: 'Another Long Event' }
  296. ];
  297. $('#calendar').clndr({
  298. events: lotsOfEvents,
  299. multiDayEvents: {
  300. startDate: 'start',
  301. endDate: 'end'
  302. }
  303. });
  304. ```
  305. When looping through days in my template, 'Monday to Friday Event' will be passed to *every single day* between the start and end date. See index.html in the example folder for a demo of this feature.
  306. #### Mixing Multi- and Single-day Events
  307. If you _also_ have single-day events mixed in with different date fields, as of clndr `v1.2.7` you can specify a third property of `multiDayEvents` called `singleDay` that refers to the date field for a single-day event.
  308. ```
  309. var lotsOfMixedEvents = [
  310. { start: '2015-11-04', end: '2015-11-08', title: 'Monday to Friday Event' },
  311. { start: '2015-11-15', end: '2015-11-20', title: 'Another Long Event' },
  312. { date: '2015-07-16', title: 'Birthday' }
  313. ];
  314. $('#calendar').clndr({
  315. events: lotsOfEvents,
  316. multiDayEvents: {
  317. startDate: 'start',
  318. endDate: 'end',
  319. singleDay: 'date'
  320. }
  321. });
  322. ```
  323. Custom Classes
  324. --------------
  325. The classes that get added to a `day` object automatically can be customized to avoid styling conflicts. The `classes` option accepts `today`, `event`, `past`, `lastMonth`, `nextMonth`, `adjacentMonth`, and `inactive`. Pass in only the classnames you wish to override and the rest will be set to their defaults.
  326. In this example we create a `my-` namespace for all of the classes:
  327. ```javascript
  328. clndr.customClasses = $('#custom-classes').clndr({
  329. classes: {
  330. today: "my-today",
  331. event: "my-event",
  332. past: "my-past",
  333. lastMonth: "my-last-month",
  334. nextMonth: "my-next-month",
  335. adjacentMonth: "my-adjacent-month",
  336. inactive: "my-inactive"
  337. }
  338. });
  339. ```
  340. To configure the `day`, `empty`, and next/previous/today/etc. button classes, use the `targets` option documented in the [usage](https://github.com/kylestetz/CLNDR#usage) section.
  341. Constraints & Datepickers
  342. -------------------------
  343. If you are making a datepicker or you'd just like to prevent users from `next`ing all the way to 2034 in your calendar, you can pass a `constraints` option with `startDate`, `endDate`, or both specified:
  344. ```javascript
  345. $('#calendar').clndr({
  346. constraints: {
  347. startDate: '2015-05-06',
  348. endDate: '2015-07-16'
  349. }
  350. })
  351. ```
  352. Now your calendar's next and previous buttons will only work within this date range. When they become disabled they will have the class 'inactive', which you can use to gray them out or add gif flames or whatever.
  353. The days in your grid that are outside of the range will also have the `inactive` class. This means that you will want to add a click callback and check for whether or not a day has the class `inactive`. It will look like this:
  354. ```javascript
  355. $('#calendar').clndr({
  356. constraints: {
  357. startDate: '2015-05-06',
  358. endDate: '2015-07-16'
  359. },
  360. clickEvents: {
  361. click: function(target) {
  362. if( !$(target.element).hasClass('inactive') ) {
  363. console.log('You picked a valid date!');
  364. } else {
  365. console.log('That date is outside of the range.');
  366. }
  367. }
  368. }
  369. })
  370. ```
  371. The constraints can be updated at any time via `clndr.options.constraints`. If you make a change, call `render()` afterwards so that clndr can update your interface with the appropriate classes.
  372. ```javascript
  373. myCalendar.options.constraints.startDate = '1999-12-31';
  374. myCalendar.render();
  375. ```
  376. Make sure the `startDate` comes before the `endDate`!
  377. Returning the Instance / Public API
  378. -----------------------------------
  379. It's possible to save the clndr object in order to call it from JS later. There are functions to increment or set the month or year. You can also provide a new events array.
  380. ```javascript
  381. // Create a Clndr and save the instance as myCalendar
  382. var myCalendar = $('#myCalendar').clndr();
  383. // Go to the next month
  384. myCalendar.forward();
  385. // Go to the previous month
  386. myCalendar.back();
  387. // Set the month using a number from 0-11 or a month name
  388. myCalendar.setMonth(0);
  389. myCalendar.setMonth('February');
  390. // Go to the next year
  391. myCalendar.nextYear();
  392. // Go to the previous year
  393. myCalendar.previousYear();
  394. // Set the year
  395. myCalendar.setYear(1997);
  396. // Change the events. Note that this triggers a re-render of the calendar.
  397. myCalendar.setEvents(newEventsArray);
  398. // Add events. Note that this triggers a re-render of the calendar.
  399. myCalendar.addEvents(additionalEventsArray);
  400. // Remove events. All events for which the passed in function returns true will
  401. // be removed from the calendar.
  402. // Note that this triggers a re-render of the calendar.
  403. myCalendar.removeEvents(function(event){
  404. return event.id == idToRemove;
  405. });
  406. ```
  407. If you are taking advantage of the `onMonthChange` and `onYearChange` callbacks, you might want them to fire whenver you call `setMonth`, `setYear`, `forward`, `back`, etc. Just pass in an object as an argument with `withCallbacks: true` like this:
  408. ```javascript
  409. // month will be set to February and then onMonthChange will be fired.
  410. myCalendar.setMonth("February", { withCallbacks: true });
  411. // month will increment and onMonthChange, and possibly onYearChange, will be
  412. // fired.
  413. myCalendar.next({ withCallbacks: true });
  414. ```
  415. Template Requirements
  416. ---------------------
  417. CLNDR is structured so that you don't really _need_ anything in your template.
  418. ```javascript
  419. <% _.each(days, function(day){ %>
  420. <div class='<%= day.classes %>'><%= day.day %></div>
  421. <% }); %>
  422. ```
  423. Currently CLNDR sets the class on a day to `'calendar-day-2013-05-30'` and uses it to determine the date when a user clicks on it. Thus, click events will only work if `days.classes` is included in your day element's `class` attribute as seen above.
  424. Some Configuration
  425. ==================
  426. Template Rendering Engine
  427. ----------------------------------------
  428. You can pass in a `render` function as an option, for example:
  429. ```javascript
  430. var precompiledTemplate = myRenderingEngine.template( $('#my-template').html() );
  431. $('#my-calendar').clndr({
  432. render: function(data) {
  433. return precompiledTemplate(data);
  434. }
  435. });
  436. ```
  437. where the function must return the HTML result of the rendering operation. In this case you would precompile your template elsewhere in your code, since CLNDR only cares about your template if it's going to use underscore.
  438. If you are using your own render method, underscore.js is NOT a dependency of this plugin.
  439. CLNDR has been tested successfully with [doT.js](http://olado.github.io/doT/), [Hogan.js](http://twitter.github.io/hogan.js/), and [Handlebars.js](http://handlebarsjs.com/). Please get in touch if you have success with other languages and they will be documented here.
  440. Here's an example using [doT.js](http://olado.github.io/doT/)...
  441. The markup:
  442. ```html
  443. <script id="dot-template" type="text/template">
  444. <div class="clndr-controls">
  445. <div class="clndr-previous-button">&lsaquo;</div>
  446. <div class="month">{{= it.month }}</div>
  447. <div class="clndr-next-button">&rsaquo;</div>
  448. </div>
  449. <div class="clndr-grid">
  450. <div class="days-of-the-week">
  451. {{~it.daysOfTheWeek :day:index}}
  452. <div class="header-day">{{= day }}</div>
  453. {{~}}
  454. <div class="days">
  455. {{~it.days :day:index}}
  456. <div class="{{= day.classes }}">{{= day.day }}</div>
  457. {{~}}
  458. </div>
  459. </div>
  460. </div>
  461. </script>
  462. ```
  463. The Javascript:
  464. ```javascript
  465. var clndrTemplate = doT.template( $('#dot-template').html() );
  466. $('#calendar').clndr({
  467. render: function(data) {
  468. return clndrTemplate(data);
  469. }
  470. });
  471. ```
  472. Internationalization
  473. --------------------
  474. Clndr has support for internationalization insofar as Moment.js supports it. By configuring your Moment.js instance to a different language, which you can read more about here: [i18n in Moment.js](http://momentjs.com/docs/#/i18n/), you are configuring Clndr as well.
  475. If you are using a moment.js language configuration in which weeks begin on a Monday (e.g. French), Clndr will detect this automatically and there is no need to provide a `weekOffset` or a `daysOfTheWeek` array. If you want to reverse this behavior, there is a field in each moment.js language config file called `dow` which you can set to your liking.
  476. The day of the week abbreviations are created automatically using moment.js's current language setting, however if this does not suit your needs you should override them using the `daysOfTheWeek` option. Make sure the array you provide begins on the same day of the week as your current language setting. **Warning**: using `daysOfTheWeek` and `weekOffset` in conjunction with different language settings is _not_ recommended and may cause you headaches.
  477. Underscore Template Delimiters
  478. ------------------------------
  479. If you're not a fan of `<% %>` and `<%= %>` style delimiters you can provide Underscore.js with alternatives in the form of regular expressions. There are three delimiters...
  480. **interpolate**, which outputs a string (this is `<%= %>` by default)
  481. **escape**, for escaping HTML (this is `<%- %>` by default)
  482. **evaluate**, for evaluating javascript (this is `<% %>` by default)
  483. If you're more comfortable with Jinja2/Twig/Nunjucks style delimiters, simply call this before you instantiate your clndr:
  484. ```javascript
  485. // switch to Jinja2/Twig/Nunjucks-style delimiters
  486. _.templateSettings = {
  487. interpolate: /\{\{(.+?)\}\}/g,
  488. escape: /\{\{\-(.+?)\}\}/g,
  489. evaluate: /\{\%(.+?)\%\}/g
  490. };
  491. ```
  492. Internet Explorer Issues
  493. ========================
  494. If you're planning on supporting IE8 and below, you'll have to be careful about version dependencies. You'll need the jQuery 1.10.x branch for IE support, and if you're taking advantage of the `constraints` feature you'll need to use a version of moment.js `<=2.1.0` or `>=2.5.1`.
  495. Todo
  496. ====
  497. - [Write clndr.js v2.0](https://github.com/kylestetz/CLNDR/issues/151)
  498. Changelog
  499. =========
  500. `v1.2.12 ~ 2015-06-26`: Bugfix patch for broken behavior in the selected day PR.
  501. `v1.2.11 ~ 2015-06-25`: Added in support for day/month intervals instead of only one month. Added in support for tracking the selected day, optionally using touch events, added a namcespace to click/touch events, and added a properties array to each day object for accessing common attributes about the day.
  502. `v1.2.10 ~ 2015-03-11`: Added a performance optimization that should make rendering multiday events slightly faster in the case that some are <= one day long. This update is backwards-compatible.
  503. `v1.2.9 ~ 2015-02-20`: Fixed a bug where the `daysArray` was accidently introduced into the global namespace. This shouldn't have affected your world. This update is backwards-compatible.
  504. `v1.2.8 ~ 2015-02-16`: Added `previousMonth` and `nextMonth` variables into the template, which match `month` in format, so that now in "April" you also have access to the strings "March" and "May". This update is backwards-compatible.
  505. `v1.2.7 ~ 2015-01-21`: Added the ability to mix multi-day and single-day events using the new `multiDayEvents.singleDay` property. Also introduced lazy setting of `startDate` and `endDate` in multi-day events so that if one of them is missing they will both be set to the value that is present. This update is backwards-compatible.
  506. `v1.2.6 ~ 2015-01-07`: Added the ability to specify custom classnames for `event`, `next-month`, `previous-month`, etc. using `options.classes`. This update is backwards-compatible.
  507. `v1.2.5 ~ 2014-12-01`: Reverting the previous DST code change, which introduced a bug for a large number of users.
  508. `v1.2.4 ~ 2014-11-25`: Fixed a bug related to DST in specific timezones that would cause duplicate dates to appear. Added `removeEvents` filtering function. `warning`! This version is buggy. Please upgrade to `v1.2.5` if you are currently on this version.
  509. `v1.2.3 ~ 2014-10-15`: Fixed a bug that introduced a global variable. It's possible (but very unlikely) that this might have caused some weirdness when using multiple instances of CLNDR on the same page.
  510. `v1.2.2 ~ 2014-10-01`: Updated internal usage of deprecated moment.js functions.
  511. `v1.2.1 ~ 2014-07-10`: Fixed a bug in `eventsLastMonth`, `eventsThisMonth`, and `eventsNextMonth`. Added CommonJS/AMD wrapper to the plugin.
  512. `v1.2.0 ~ 2014-01-22`: BC break for Bower users! Underscore is no longer listed as a dependency in the Bower plugin, allowing you the flexibility of choosing the templating language you prefer. Also added a day of the week class to all clndr days in the format `calendar-dow-<0 - 6>`, allowing you to style weekends/specific days of the week differently.
  513. `v1.1.3 ~ 2014-01-17`: fixed a bug where multiday events longer than two months would not show up. Fixed a bug that prevented clndr from loading in IE8.
  514. `v1.1.2 ~ 2013-12-15`: using the `forceSixRows` option, you can now force your calendar to render six rows at all times, giving each month the same height. All classes and events come through this extra set of days just as you would expect. The usage jQuery's `$.data` has been corrected such that calling `$(#calendar-parent-element).data('plugin_clndr')` returns the clndr instance.
  515. `v1.1.1 ~ 2013-12-02`: You can now only call clndr on one element at a time. If you attempt to call it on more than one element, an error is thrown. This should have no effect on previous code as long as your selectors were only returning one element. There is now a bower.json file.
  516. `v1.1.0 ~ 2013-11-04`: New features! In list form:
  517. - Multiday Events: using the `multiDayEvents` option, you can now pass in events that last more than one day. They will show up in all the days that they span across.
  518. - Constraints: you want to make a datepicker? Ok. Pass in a `constraints` option with either a `startDate`, `endDate`, or both, and clndr will add the `inactive` class to all days that aren't within your range. When you are at the edge of the range, next and previous controls will not respond to click events & will also get the class `inactive`.
  519. - The use of `days.id` in templates has been deprecated all the way. It will cause errors, so stop using it now please!
  520. - Public API functions (forward, back, setMonth, setYear) now accept an object with options. The only option at the moment is `withCallbacks`, which if set to `true` will fire the `onMonthChange` and `onYearChange` callbacks.
  521. - There are tests! example/test.html contains a list of human-powered tests that cover all of the basic functionality.
  522. The only backward-compatibility break is the removal of the `days.id` field used within templates. Upgrading clndr should have no negative repercussions for you- please open an issue if it does and it will get fixed!
  523. `v1.0.13 ~ 2013-10-24`: changed the way `clndr.eventsLastMonth` and `clndr.eventsNextMonth` propagate... previously they were only available if "showAdjacentMonths" was turned on, whereas now they are always available. They are also available in the template now as `eventsLastMonth` and `eventsNextMonth`. Fixed a bug where `eventsLastMonth` and `eventsNextMonth` were jQuery arrays instead of regular ol' Arrays. This bug was introduced in `v1.0.7`. cleaned up example folder.
  524. `v1.0.12 ~ 2013-10-22`: you can now make next and previous year buttons using the classes `clndr-next-year-button` and `clndr-previous-year-button`, or by specifying the options `targets.nextYearButton` and `targets.previousYearButton`. `doneRendering`'s `this` keyword is now set to the clndr instance. Added the `ready` callback, which is a good place to attach event handlers. Added `clickEvents.onYearChange`, which is fired whenever the year changed as a result of a click action (even if you just went to the next month and it happened to be December to January!).
  525. `v1.0.11 ~ 2013-10-19`: set the context in all click events so that `this` now refers to your clndr instance! `this` is also bound to the clndr instance in the `render` function. Added the class `past` to all days before today.
  526. `v1.0.10 ~ 2013-10-16`: fixed a nasty bug where events weren't getting passed into click handlers. this bug was introduced with `v1.0.8`! Please update.
  527. `v1.0.9 ~ 2013-10-16`: Fixed an i18n bug where the days of the week would start on a Monday correctly, but the calendar grid would still start as if the first day of the week was Sunday. This fix correctly uses moment.js's current settings to determine the first day of the week. If you are planning to use CLNDR in multiple languages, update to this version!
  528. `v1.0.8 ~ 2013-10-14`: Deprecated the use of `days[].id`, adding it instead to the list of classes. You no longer have to set an `id` for each day element, and if you do it will be completely ignored. Just keep using `days[].classes`! Fixed a bug where an adjacent month's day would show up as `last-month` or `next-month` incorrectly if the year was different. Added some validation to address a bug where ids would show up as `calendar-day-Invalid Date`.
  529. `v1.0.7 ~ 2013-09-30`: settled on jQuery's $.filter method, opening the door to IE 7 + 8 support. If you plan on supporting IE 8 or below, don't forget to use jQuery's 1.x branch, as 2.x has dropped IE 6 - 8 support.
  530. `v1.0.6 ~ 2013-09-24`: fixed a bug where `daysOfTheWeek` option wouldn't work.
  531. `v1.0.5 ~ 2013-09-24`: added support for showing days in months adjacent to the current month, controlled using the `showAdjacentMonths` option. Added the ability for those adjacent days to move to their month when clicked using the `adjacentDaysChangeMonth` option. Added `daysOfTheWeek` option, which you should avoid by allowing moment.js to make the abbreviations for you. Fixed a bug where providing some `targets: {}` options would remove the rest of them.
  532. `v1.0.4 ~ 2013-09-14`: fixed a bug in `setEvents` and event population where events would show up null.
  533. `v1.0.3 ~ 2013-09-14`: Underscore.js is now only relied upon for its `_.template()` function, which means if you are using your own rendering engine you do NOT need underscore to use CLNDR.js
  534. `v1.0.0 ~ 2013-09-14`: Officially v1.0.0! Added `extras` option, which exposes the `extras` variable in your template, allowing you to pass in arbitrary objects & synchronous functions for use inside of your template.
  535. <a href="http://punkave.com/"><img src="https://raw.github.com/punkave/jquery-selective/master/logos/logo-box-builtby.png" /></a>