{"id":15027786,"url":"https://github.com/kylestetz/clndr","last_synced_at":"2025-04-10T23:25:56.999Z","repository":{"id":8705155,"uuid":"10371644","full_name":"kylestetz/CLNDR","owner":"kylestetz","description":":calendar: a jQuery calendar plugin that uses HTML templates","archived":false,"fork":false,"pushed_at":"2023-02-28T20:12:07.000Z","size":1129,"stargazers_count":2856,"open_issues_count":16,"forks_count":443,"subscribers_count":133,"default_branch":"master","last_synced_at":"2025-04-03T14:07:09.548Z","etag":null,"topics":["calendar","jquery-plugin"],"latest_commit_sha":null,"homepage":"http://kylestetz.github.io/CLNDR/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kylestetz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2013-05-29T23:40:25.000Z","updated_at":"2025-03-22T08:39:38.000Z","dependencies_parsed_at":"2022-07-12T15:03:16.637Z","dependency_job_id":"7123b42e-8d2c-4df4-9e3f-7aa06c489845","html_url":"https://github.com/kylestetz/CLNDR","commit_stats":{"total_commits":278,"total_committers":41,"mean_commits":6.780487804878049,"dds":0.7086330935251799,"last_synced_commit":"f245da6e95c3e965ef9ebdca6beedbf7ad748b5f"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylestetz%2FCLNDR","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylestetz%2FCLNDR/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylestetz%2FCLNDR/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylestetz%2FCLNDR/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kylestetz","download_url":"https://codeload.github.com/kylestetz/CLNDR/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248313793,"owners_count":21082913,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","jquery-plugin"],"created_at":"2024-09-24T20:07:02.723Z","updated_at":"2025-04-10T23:25:56.975Z","avatar_url":"https://github.com/kylestetz.png","language":"JavaScript","readme":"CLNDR.js\n========\n\nCLNDR is a jQuery calendar plugin. It was created -- you've heard this before --\nout of frustration with the lack of truly dynamic front-end calendar plugins out\nthere.\n\nSee a demo: [kylestetz.github.io/CLNDR/](http://kylestetz.github.io/CLNDR/)\n\n--------\n\n- [Download](https://github.com/kylestetz/CLNDR#download)\n- [Dependencies](https://github.com/kylestetz/CLNDR#dependencies)\n  - [Using NPM](https://github.com/kylestetz/CLNDR#using-npm)\n  - [Using Bower](https://github.com/kylestetz/CLNDR#using-bower)\n  - [CLNDR using Angular.js](https://github.com/kylestetz/CLNDR#clndr-using-angular)\n  - [CLNDR using Rails](https://github.com/kylestetz/CLNDR#clndr-using-rails)\n- [Introduction: You Write The Markup](https://github.com/kylestetz/CLNDR#introduction-you-write-the-markup)\n  - [The 'days' Array](https://github.com/kylestetz/CLNDR#the-days-array)\n  - [Pass in your Events](https://github.com/kylestetz/CLNDR#pass-in-your-events)\n- [Usage](https://github.com/kylestetz/CLNDR#usage)\n  - [Multi-day Events](https://github.com/kylestetz/CLNDR#multi-day-events)\n  - [Custom Classes](https://github.com/kylestetz/CLNDR#custom-classes)\n  - [Constraints \u0026 Datepickers](https://github.com/kylestetz/CLNDR#constraints--datepickers)\n  - [Returning the Instance / API](https://github.com/kylestetz/CLNDR#returning-the-instance--public-api)\n  - [Template Requirements](https://github.com/kylestetz/CLNDR#template-requirements)\n- [Configuration](https://github.com/kylestetz/CLNDR#some-configuration)\n  - [Template Rendering Engine](https://github.com/kylestetz/CLNDR#template-rendering-engine)\n  - [Internationalization](https://github.com/kylestetz/CLNDR#internationalization)\n  - [Underscore Template Delimiters](https://github.com/kylestetz/CLNDR#underscore-template-delimiters)\n  - [Internet Explorer Issues](https://github.com/kylestetz/CLNDR#internet-explorer-issues)\n- [Submitting Issues](https://github.com/kylestetz/CLNDR#submitting-issues)\n\nDownload\n--------\n\n- Development: [clndr.js](https://raw.github.com/kylestetz/CLNDR/master/src/clndr.js)\n- Production: [clndr.min.js](https://raw.github.com/kylestetz/CLNDR/master/clndr.min.js)\n\nReturning to grab a new version? Have a look at the `CHANGELOG.md` file.\n\nIf you'd like to run some tests in a particular browser or environment,\n`tests/test.html` contains a list of basic functionality tests. When\ncontributing, please run these (and add to them when appropriate) before\nsubmitting a pull request or issue!\n\nDependencies\n------------\n\n[jQuery](http://jquery.com/download/) and [Moment.js](http://momentjs.com/) are\ndepended upon. By default CLNDR tries to use\n[Underscore.js](http://underscorejs.org/)'s `_.template()` function, however if\nyou specify a custom rendering function (see documentation below) Underscore\nwill not be used at all.\n\nBecause their APIs are the same, [Lo-Dash](http://lodash.com/)'s `_.template()`\nfunction will work as well! Just include Lo-Dash instead of Underscore.\n\n### Using NPM\n\nYou can install CLNDR via [NPM](https://npmjs.org):\n\n```shell\nnpm install clndr\n```\n\nUnderscore is not installed by default. This allows you to use whichever\ntemplating engine you want to. If you want to use the default `template` option\nwith Underscore, just install it as a dependency of your project:\n`npm install underscore` or `npm install lodash`.\n\n### Using Bower\n\nYou can install CLNDR via [Bower](https://bower.io):\n\n```shell\nbower install clndr\n```\n\nUnderscore is not installed by default. This allows you to use whichever\ntemplating engine you want to. If you want to use the default `template` option\nwith Underscore, just install it as a dependency of your project:\n`bower install underscore` or `bower install lodash`.\n\n### CLNDR Using Angular\n\nIf you want to integrate clndr into an [angular.js](http://angularjs.org/) site,\nget started with this directive:\n[angular-clndr](https://github.com/10KB/angular-clndr).\n\n### CLNDR Using Rails\n\nIf you're building a rails application you may be interested in this gem by\n[@sedx](https://github.com/sedx):\n[clndr-rails](https://github.com/sedx/clndr-rails).\n\nIntroduction: You Write The Markup\n----------------------------------\n\nThere are wonderful and feature-rich calendar modules out there and they all\nsuffer the same problem: they give you markup (and often a good heap of JS)\nthat you have to work with and style. This leads to a lot of hacking, pushing,\npulling, and annoying why-can't-it-do-what-I-want scenarios.\n\nCLNDR doesn't generate markup (well, it has some reasonable defaults, but\nthat's an aside). Instead, CLNDR asks you to create a template and in return it\nsupplies your template with a great set of objects that will get you up and\nrunning in a few lines.\n\n### The 'Days' Array\n\nHere's a typical CLNDR template. It's got a controller section and a grid\nsection.\n\n```html\n\u003cdiv class=\"clndr-controls\"\u003e\n  \u003cdiv class=\"clndr-previous-button\"\u003e\u0026lsaquo;\u003c/div\u003e\n  \u003cdiv class=\"month\"\u003e\u003c%= month %\u003e\u003c/div\u003e\n  \u003cdiv class=\"clndr-next-button\"\u003e\u0026rsaquo;\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"clndr-grid\"\u003e\n  \u003cdiv class=\"days-of-the-week\"\u003e\n  \u003c% _.each(daysOfTheWeek, function (day) { %\u003e\n    \u003cdiv class=\"header-day\"\u003e\u003c%= day %\u003e\u003c/div\u003e\n  \u003c% }) %\u003e\n    \u003cdiv class=\"days\"\u003e\n    \u003c% _.each(days, function (day) { %\u003e\n      \u003cdiv class=\"\u003c%= day.classes %\u003e\"\u003e\u003c%= day.day %\u003e\u003c/div\u003e\n    \u003c% }) %\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe `days` array contains most of the stuff we need to make a calendar. Its\nstructure looks like this:\n\n```javascript\n{\n  day: 5,\n  events: [],\n  classes: \"day\",\n  date: moment(\"2015-12-31\")\n}\n```\n\nThis makes quick work of generating a grid. `days.classes` contains extra\nclasses depending on the circumstance: if a given day is today, 'today' will\nshow up, as well as an 'event' class when an event lands on that day.\n\n### Pass In Your Events\n\nCLNDR accepts events as an array of objects:\n\n```javascript\nevents = [\n  {\n    date: \"YYYY-MM-DD or some other ISO Date format\",\n    and: \"anything else\"\n  }\n]\n```\n\nCLNDR looks through the objects in your events array for a `date` field unless\nyou specify otherwise using the `dateParameter` option. In your template the\n`days` array will auto-magically contain these event objects in their entirety.\nSee the examples for a demonstration of how events populate the `days` array.\n\nUsage\n-----\n\nCLNDR leans on the awesome work done in Underscore and moment. These are\nrequirements unless you are using a different rendering engine, in which case\nUnderscore is not a requirement). Do be sure to include them in your `\u003chead\u003e`\nbefore clndr.js. It is a jQuery plugin, so naturally you'll need that as well.\n\nThe bare minimum (CLNDR includes a default template):\n\n```javascript\n$('.parent-element').clndr();\n```\n\nWith all of the available options:\n\n```javascript\n$('.parent-element').clndr({\n\n  // The template: this could be stored in markup as a\n  //   \u003cscript type=\"text/template\"\u003e\u003c/script\u003e\n  // or pulled in as a string\n  template: clndrTemplate,\n\n  // Determines which month to start with using either a date string or a\n  // moment object.\n  startWithMonth: \"YYYY-MM-DD\" or moment(),\n\n  // Start the week off on Sunday (0), Monday (1), etc. Sunday is the default.\n  // WARNING: if you are dealing with i18n and multiple languages, you\n  // probably don't want this! See the \"Internationalization\" section below\n  // for more.\n  weekOffset: 0,\n\n  // An array of day abbreviation labels. If you have moment.js set to a\n  // different language, it will guess these for you! If for some reason that\n  // doesn't work, use this...\n  // WARNING: if you are dealing with i18n and multiple languages, you\n  // probably don't want this! See the \"Internationalization\" section below\n  // for more.\n  daysOfTheWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],\n\n  // Optional callback function that formats the day in the header. If none\n  // supplied, defaults to moment's `dd` and truncates to one character.\n  // The callback is passed a moment object representing the day, and a string\n  // is to be returned.\n  formatWeekdayHeader: function (day) {\n    return day.format('dd').charAt(0);\n  },\n\n  // The target classnames that CLNDR will look for to bind events.\n  // these are the defaults.\n  targets: {\n    day: 'day',\n    empty: 'empty',\n    nextButton: 'clndr-next-button',\n    todayButton: 'clndr-today-button',\n    previousButton: 'clndr-previous-button',\n    nextYearButton: 'clndr-next-year-button',\n    previousYearButton: 'clndr-previous-year-button',\n  },\n\n  // Custom classes to avoid styling issues. pass in only the classnames that\n  // you wish to override. These are the defaults.\n  classes: {\n    past: \"past\",\n    today: \"today\",\n    event: \"event\",\n    selected: \"selected\",\n    inactive: \"inactive\",\n    lastMonth: \"last-month\",\n    nextMonth: \"next-month\",\n    adjacentMonth: \"adjacent-month\",\n  },\n\n  // Click callbacks! The keyword 'this' is set to the clndr instance in all\n  // callbacks.\n  clickEvents: {\n    // Fired whenever a calendar box is clicked. Returns a 'target' object\n    // containing the DOM element, any events, and the date as a moment.js\n    // object.\n    click: function (target) {...},\n\n    // Fired when a user goes to the current month and year. Returns a\n    // moment.js object set to the correct month.\n    today: function (month) {...},\n\n    // Fired when a user goes forward a month. Returns a moment.js object\n    // set to the correct month.\n    nextMonth: function (month) {...},\n\n    // Fired when a user goes back a month. Returns a moment.js object set\n    // to the correct month.\n    previousMonth: function (month) {...},\n\n    // Fires any time the month changes as a result of a click action.\n    // Returns a moment.js object set to the correct month.\n    onMonthChange: function (month) {...},\n\n    // Fired when the next year button is clicked. Returns a moment.js\n    // object set to the correct month and year.\n    nextYear: function (month) {...},\n\n    // Fired when the previous year button is clicked. Returns a moment.js\n    // object set to the correct month and year.\n    previousYear: function (month) {...},\n\n    // Fires any time the year changes as a result of a click action. If\n    // onMonthChange is also set, it is fired BEFORE onYearChange. Returns\n    // a moment.js object set to the correct month and year.\n    onYearChange: function (month) {...},\n\n    // Fired when a user goes forward a period. Returns moment.js objects\n    // for the updated start and end date.\n    nextInterval: function (start, end) {...},\n\n    // Fired when a user goes back an interval. Returns moment.js objects for\n    // the updated start and end date.\n    previousInterval: function (start, end) {...},\n\n    // Fired whenever the time period changes as configured in lengthOfTime.\n    // Returns moment.js objects for the updated start and end date.\n    onIntervalChange: function (start, end) {...}\n  },\n\n  // Use the 'touchstart' event instead of 'click'\n  useTouchEvents: false,\n\n  // This is called only once after clndr has been initialized and rendered.\n  // use this to bind custom event handlers that don't need to be re-attached\n  // every time the month changes (most event handlers fall in this category).\n  // Hint: this.element refers to the parent element that holds the clndr,\n  // and is a great place to attach handlers that don't get tossed out every\n  // time the clndr is re-rendered.\n  ready: function () { },\n\n  // A callback when the calendar is done rendering. This is a good place\n  // to bind custom event handlers (also see the 'ready' option above).\n  doneRendering: function () {...},\n\n  // An array of event objects\n  events: [\n    {\n      title: 'This is an event',\n      date: '2000-08-20'\n    },\n    ...\n  ],\n\n  // If you're supplying an events array, dateParameter points to the field\n  // in your event object containing a date string. It's set to 'date' by\n  // default.\n  dateParameter: 'date',\n\n  // CLNDR can accept events lasting more than one day! just pass in the\n  // multiDayEvents option and specify what the start and end fields are\n  // called within your event objects. See the example file for a working\n  // instance of this.\n  multiDayEvents: {\n    endDate: 'endDate',\n    startDate: 'startDate',\n    // If you also have single day events with a different date field,\n    // use the singleDay property and point it to the date field.\n    singleDay: 'date'\n  },\n\n  // Show the dates of days in months adjacent to the current month. Defaults\n  // to true.\n  showAdjacentMonths: true,\n\n  // When days from adjacent months are clicked, switch the current month.\n  // fires nextMonth/previousMonth/onMonthChange click callbacks. defaults to\n  // false.\n  adjacentDaysChangeMonth: false,\n\n  // Always make the calendar six rows tall (42 days) so that every month has\n  // a consistent height. defaults to 'false'.\n  forceSixRows: null,\n\n  // Set this to true, if you want the plugin to track the last clicked day.\n  // If trackSelectedDate is true, \"selected\" class will always be applied\n  // only to the most recently clicked date; otherwise - selectedDate will\n  // not change.\n  trackSelectedDate: false,\n\n  // Set this, if you want a date to be \"selected\" (see classes.selected)\n  // after plugin init. Defualts to null, no initially selected date.\n  selectedDate: null,\n\n  // Set this to true if you don't want `inactive` dates to be selectable.\n  // This will only matter if you are using the `constraints` option.\n  ignoreInactiveDaysInSelection: null,\n\n  // CLNDR can render in any time interval!\n  // You can specify if you want to render one or more months, or one ore more\n  // days in the calendar, as well as the paging interval whenever forward or\n  // back is triggered. If both months and days are null, CLNDR will default\n  // to the standard monthly view.\n  lengthOfTime: {\n    // Set to an integer if you want to render one or more months, otherwise\n    // leave this null\n    months: null,\n\n    // Set to an integer if you want to render one or more days, otherwise\n    // leave this null. Setting this to 14 would render a 2-week calendar.\n    days: null,\n\n    // This is the amount of months or days that will move forward/back when\n    // paging the calendar. With days=14 and interval=7, you would have a\n    // 2-week calendar that pages forward and backward 1 week at a time.\n    interval: 1\n  },\n\n  // Any other data variables you want access to in your template. This gets\n  // passed into the template function.\n  extras: {},\n\n  // If you want to use a different templating language, here's your ticket.\n  // Precompile your template (before you call clndr), pass the data from the\n  // render function into your template, and return the result. The result\n  // must be a string containing valid markup. The keyword 'this' is set to\n  // the clndr instance in case you need access to any other properties.\n  // More under 'Template Rendering Engine' below.\n  render: function (data) {\n    return '\u003cdiv class=\"html data as a string\"\u003e\u003c/div\u003e';\n  },\n\n  // If you want to prevent the user from navigating the calendar outside\n  // of a certain date range (e.g. if you are making a datepicker), specify\n  // either the startDate, endDate, or both in the constraints option. You\n  // can change these while the calendar is on the page... See documentation\n  // below for more on this!\n  constraints: {\n    startDate: '2017-12-22',\n    endDate: '2018-01-09'\n  },\n\n  // Optionally, you can pass a Moment instance to use instead of the CLNDR settings. \n  // If you use moment you shouldn't use weekOffset and daysOfTheWeek\n  // See https://github.com/kylestetz/CLNDR#internationalization for more information\n  moment: null\n});\n```\n\nAll of the things you have access to in your template:\n\n```javascript\n// An array of day-of-the-week abbreviations, shifted as requested using the\n// weekOffset parameter.\ndaysOfTheWeek: ['S', 'M', 'T', etc...]\n\n// The number of 7-block calendar rows, in the event that you want to do some\n// looping with it\nnumberOfRows: 5\n\n// The days array, documented in more detail above\ndays: [{ day, classes, id, events, date }]\n\n// The month name- don't forget that you can do things like\n// month.substring(0, 1) and month.toLowerCase() in your template\nmonth: \"May\"\n\n// The year that the calendar is currently focused on\nyear: \"2013\"\n\n// All of the events happening this month. This will be empty of the\n// lengthOfTime config option is set.\neventsThisMonth: []\n// All of the events happening last month. This is only set if\n// showAdjacementMonths is true.\neventsLastMonth: []\n// All of the events happening next month. This is only set if\n// showAdjacementMonths is true.\neventsNextMonth: []\n\n// If you specified a custom lengthOfTime, you will have these instead.\nintervalEnd: (moment object)\nintervalStart: (moment object)\neventsThisInterval: []\n\n// Anything you passed into the 'extras' property when creating the clndr\nextras: {}\n```\n\n### Multi-day Events\n\nCLNDR accepts events lasting more than one day. You just need to tell it how to\naccess the start and end dates of your events:\n\n```javascript\nvar lotsOfEvents = [\n  {\n    end: '2013-11-08',\n    start: '2013-11-04',\n    title: 'Monday to Friday Event'\n  }, {\n    end: '2013-11-20',\n    start: '2013-11-15',\n    title: 'Another Long Event'\n  }\n];\n\n$('#calendar').clndr({\n  events: lotsOfEvents,\n  multiDayEvents: {\n    endDate: 'end',\n    startDate: 'start'\n  }\n});\n```\n\nWhen looping through days in my template, 'Monday to Friday Event' will be\npassed to *every single day* between the start and end date. See index.html in\nthe example folder for a demo of this feature.\n\n#### Mixing Multi- and Single-day Events\n\nIf you _also_ have single-day events mixed in with different date fields, as of\nclndr `v1.2.7` you can specify a third property of `multiDayEvents` called\n`singleDay` that refers to the date field for a single-day event.\n\n```\nvar lotsOfMixedEvents = [\n  {\n    end: '2015-11-08',\n    start: '2015-11-04',\n    title: 'Monday to Friday Event'\n  }, {\n    end: '2015-11-20',\n    start: '2015-11-15',\n    title: 'Another Long Event'\n  }, {\n    title: 'Birthday',\n    date: '2015-07-16'\n  }\n];\n\n$('#calendar').clndr({\n  events: lotsOfEvents,\n  multiDayEvents: {\n    endDate: 'end',\n    singleDay: 'date',\n    startDate: 'start'\n  }\n});\n```\n\n### Custom Classes\n\nThe classes that get added to a `day` object automatically can be customized to\navoid styling conflicts. The `classes` option accepts `today`, `event`, `past`,\n`lastMonth`, `nextMonth`, `adjacentMonth`, and `inactive`. Pass in only the\nclassnames you wish to override and the rest will be set to their defaults.\n\nIn this example we create a `my-` namespace for all of the classes:\n\n```javascript\nclndr.customClasses = $('#custom-classes').clndr({\n  classes: {\n    past: \"my-past\",\n    today: \"my-today\",\n    event: \"my-event\",\n    inactive: \"my-inactive\",\n    lastMonth: \"my-last-month\",\n    nextMonth: \"my-next-month\",\n    adjacentMonth: \"my-adjacent-month\"\n  }\n});\n```\n\nTo configure the `day`, `empty`, and next/previous/today/etc. button classes,\nuse the `targets` option documented in the\n[usage](https://github.com/kylestetz/CLNDR#usage) section.\n\n### Constraints \u0026 Datepickers\n\nIf you are making a datepicker or you'd just like to prevent users from\n`next`ing all the way to 2034 in your calendar, you can pass a `constraints`\noption with `startDate`, `endDate`, or both specified:\n\n```javascript\n$('#calendar').clndr({\n  constraints: {\n    endDate: '2015-07-16',\n    startDate: '2015-05-06'\n  }\n});\n```\n\nNow your calendar's next and previous buttons will only work within this date\nrange. When they become disabled they will have the class 'inactive', which you\ncan use to gray them out or add gif flames or whatever.\n\nThe days in your grid that are outside of the range will also have the\n`inactive` class. This means that you will want to add a click callback and\ncheck for whether or not a day has the class `inactive`. It will look like this:\n\n```javascript\n$('#calendar').clndr({\n  constraints: {\n    endDate: '2015-07-16',\n    startDate: '2015-05-06'\n  },\n  clickEvents: {\n    click: function (target) {\n      if (!$(target.element).hasClass('inactive')) {\n        console.log('You picked a valid date!');\n      } else {\n        console.log('That date is outside of the range.');\n      }\n    }\n  }\n});\n```\n\nThe constraints can be updated at any time via `clndr.options.constraints`. If\nyou make a change, call `render()` afterwards so that clndr can update your\ninterface with the appropriate classes.\n\n```javascript\nmyCalendar.options.constraints.startDate = '1999-12-31';\nmyCalendar.render();\n```\n\nMake sure the `startDate` comes before the `endDate`!\n\n### Returning the Instance / Public API\n\nIt's possible to save the clndr object in order to call it from JS later. There\nare functions to increment or set the month or year. You can also provide a new\nevents array.\n\n```javascript\n// Create a CLNDR and save the instance as myCalendar\nvar myCalendar = $('#myCalendar').clndr();\n\n// Go to the next month\nmyCalendar.forward();\n\n// Go to the previous month\nmyCalendar.back();\n\n// Set the month using a number from 0-11 or a month name\nmyCalendar.setMonth(0);\nmyCalendar.setMonth('February');\n\n// Go to the next year\nmyCalendar.nextYear();\n\n// Go to the previous year\nmyCalendar.previousYear();\n\n// Set the year\nmyCalendar.setYear(1997);\n\n// Go to today:\nmyCalendar.today();\n\n// Overwrite the extras. Note that this triggers a re-render of the calendar.\nmyCalendar.setExtras(newExtras);\n\n// Change the events. Note that this triggers a re-render of the calendar.\nmyCalendar.setEvents(newEventsArray);\n\n// Add events. Note that this triggers a re-render of the calendar.\nmyCalendar.addEvents(additionalEventsArray);\n\n// Remove events.  All events for which the passed in function returns true will\n// be removed from the calendar. Note that this triggers a re-render of the\n// calendar.\nmyCalendar.removeEvents(function (event) {\n  return event.id === idToRemove;\n});\n\n// Destroy the clndr instance. This will empty the DOM node containing the\n// calendar.\nmyCalendar.destroy();\n```\n\nIf you are taking advantage of the `onMonthChange` and `onYearChange` callbacks,\nyou might want them to fire whenver you call `setMonth`, `setYear`, `forward`,\n`back`, etc. Just pass in an object as an argument with `withCallbacks: true`\nlike this:\n\n```javascript\n// Month will be set to February and then onMonthChange will be fired.\nmyCalendar.setMonth(\"February\", { withCallbacks: true });\n\n// Month will increment and onMonthChange, and possibly onYearChange, will be\n// fired.\nmyCalendar.next({ withCallbacks: true });\n```\n\n### Template Requirements\n\nCLNDR is structured so that you don't really _need_ anything in your template.\n\n```javascript\n\u003c% _.each(days, function (day) { %\u003e\n\u003cdiv class='\u003c%= day.classes %\u003e'\u003e\u003c%= day.day %\u003e\u003c/div\u003e\n\u003c% }); %\u003e\n```\n\nCurrently CLNDR sets the class on a day to `'calendar-day-2013-05-30'` and uses\nit to determine the date when a user clicks on it. Thus, click events will only\nwork if `days.classes` is included in your day element's `class` attribute as\nseen above.\n\nConfiguration\n-------------\n\n### Template Rendering Engine\n\nYou can pass in a `render` function as an option, for example:\n\n```javascript\nvar precompiledTemplate = myRenderingEngine.template($('#my-template').html());\n\n$('#my-calendar').clndr({\n  render: function (data) {\n    return precompiledTemplate(data);\n  }\n});\n```\n\nWhere the function must return the HTML result of the rendering operation. In\nthis case you would precompile your template elsewhere in your code, since CLNDR\nonly cares about your template if it's going to use Underscore.\n\nIf you are using your own render method, Underscore is NOT a dependency of\nthis plugin.\n\nCLNDR has been tested successfully with [doT.js](http://olado.github.io/doT/),\n[Hogan.js](http://twitter.github.io/hogan.js/),\n[Handlebars.js](http://handlebarsjs.com/),\n[Mustache.js](https://github.com/janl/mustache.js/), and\n[Knockout.js](https://github.com/karl-sjogren/clndr-knockout). Please get in touch\nif you have success with other languages and they will be documented here.\n\nHere's an example using [doT.js](http://olado.github.io/doT/)...\n\nThe markup:\n```html\n\u003cscript id=\"dot-template\" type=\"text/template\"\u003e\n  \u003cdiv class=\"clndr-controls\"\u003e\n    \u003cdiv class=\"clndr-previous-button\"\u003e\u0026lsaquo;\u003c/div\u003e\n    \u003cdiv class=\"month\"\u003e{{= it.month }}\u003c/div\u003e\n    \u003cdiv class=\"clndr-next-button\"\u003e\u0026rsaquo;\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"clndr-grid\"\u003e\n    \u003cdiv class=\"days-of-the-week\"\u003e\n    {{~it.daysOfTheWeek :day:index}}\n      \u003cdiv class=\"header-day\"\u003e{{= day }}\u003c/div\u003e\n    {{~}}\n      \u003cdiv class=\"days\"\u003e\n      {{~it.days :day:index}}\n        \u003cdiv class=\"{{= day.classes }}\"\u003e{{= day.day }}\u003c/div\u003e\n      {{~}}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/script\u003e\n```\n\nThe Javascript:\n```javascript\nvar clndrTemplate = doT.template($('#dot-template').html());\n\n$('#calendar').clndr({\n  render: function (data) {\n    return clndrTemplate(data);\n  }\n});\n```\n\nHere's an example using [Mustache.js](https://github.com/janl/mustache.js/)...\n\nThe markup:\n```html\n\u003cscript type=\"x-tmpl-mustache\" id=\"calendar-tmpl\"\u003e\n  \u003cdiv class=\"controls\"\u003e\n    \u003cspan class=\"clndr-previous-button\"\u003eprev\u003c/span\u003e\n    \u003cspan class=\"month\"\u003e{{month}}\u003c/span\u003e\n    \u003cspan class=\"year\"\u003e{{year}}\u003c/span\u003e\n    \u003cspan class=\"clndr-next-button\"\u003enext\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"days-container\"\u003e\n    \u003cdiv class=\"days\"\u003e\n      \u003cdiv class=\"headers\"\u003e\n        {{#daysOfTheWeek}}\n          \u003cdiv class=\"day-header\"\u003e{{.}}\u003c/div\u003e\n        {{/daysOfTheWeek}}\n      \u003c/div\u003e\n      {{#days}}\n        \u003cdiv class=\"{{classes}}\" id=\"{{id}}\"\u003e{{day}}\u003c/div\u003e\n      {{/days}}\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/script\u003e\n```\n\nThe Javascript:\n```javascript\n$('#calendar').clndr({\n  render: function (data) {\n    return Mustache.render($('#calendar-tmpl').html(), data);\n  },\n});\n```\n\n### Internationalization\n\nCLNDR has support for internationalization insofar as Moment.js supports it. By\nconfiguring your Moment.js instance to a different language, which you can read\nmore about here: [i18n in Moment.js](http://momentjs.com/docs/#/i18n/), you are\nconfiguring CLNDR as well.\n\nIf you would prefer to pass in a pre-configured instance of moment, you can do\nthis by passing it in as the `moment` config option when initializing CLNDR:\n\n```javascript\n// To change clndr to German use moment.local('de')\nmoment.locale('de');\n\n// Make sure that your locale is Working correctly\nconsole.log(moment().calendar())\n// Returns \"heute um 18:43 Uhr\"\n\n$('#calendar').clndr({\n  // Pass the moment instance to use your language settings\n  moment: moment\n});\n```\n\nIf you are using a moment.js language configuration in which weeks begin on a\nMonday (e.g. French), CLNDR will detect this automatically and there is no need\nto provide a `weekOffset` or a `daysOfTheWeek` array. If you want to reverse\nthis behavior, there is a field in each moment.js language config file called\n`dow` which you can set to your liking.\n\nThe day of the week abbreviations are created automatically using moment.js's\ncurrent language setting, however if this does not suit your needs you should\noverride them using the `daysOfTheWeek` option. Make sure the array you provide\nbegins on the same day of the week as your current language setting.\n**Warning**: using `daysOfTheWeek` and `weekOffset` in conjunction with\ndifferent language settings is _not_ recommended and may cause you headaches.\n\n### Underscore Template Delimiters\n\nIf you're not a fan of `\u003c% %\u003e` and `\u003c%= %\u003e` style delimiters you can provide\nUnderscore.js with alternatives in the form of regular expressions. There are\nthree delimiters...\n\n**interpolate**, which outputs a string (this is `\u003c%= %\u003e` by default)\n\n**escape**, for escaping HTML (this is `\u003c%- %\u003e` by default)\n\n**evaluate**, for evaluating javascript (this is `\u003c% %\u003e` by default)\n\nIf you're more comfortable with Jinja2/Twig/Nunjucks style delimiters, simply\ncall this before you instantiate your clndr:\n\n```javascript\n// Switch to Jinja2/Twig/Nunjucks-style delimiters\n_.templateSettings = {\n  escape: /\\{\\{\\-(.+?)\\}\\}/g,\n  evaluate: /\\{\\%(.+?)\\%\\}/g,\n  interpolate: /\\{\\{(.+?)\\}\\}/g,\n};\n```\n\n### Internet Explorer Issues\n\nIf you're planning on supporting IE8 and below, you'll have to be careful about\nversion dependencies. You'll need the jQuery 1.10.x branch for IE support, and\nif you're taking advantage of the `constraints` feature you'll need to use a\nversion of moment.js `\u003c=2.1.0` or `\u003e=2.5.1`.\n\nSubmitting Issues\n-----------------\n\nGitHub issues and support tickets are to be submitted only for bugs. We sadly\ndon't have the time or manpower to answer implementation questions, debug your\napplication code, or anything that isn't directly related to a CLNDR bug :D\nThere are many wonderful places to seek help, like Stack Overflow.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylestetz%2Fclndr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkylestetz%2Fclndr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylestetz%2Fclndr/lists"}