{"id":13777914,"url":"https://github.com/benjamincharity/angular-json-calendar","last_synced_at":"2025-03-22T08:31:04.663Z","repository":{"id":57178610,"uuid":"55544109","full_name":"benjamincharity/angular-json-calendar","owner":"benjamincharity","description":":calendar: An AngularJS module that generates calendar data as a JSON object and/or HTML :muscle:","archived":false,"fork":false,"pushed_at":"2016-10-26T15:35:49.000Z","size":736,"stargazers_count":12,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-27T09:34:09.611Z","etag":null,"topics":["angularjs","calendar","data","date"],"latest_commit_sha":null,"homepage":"","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/benjamincharity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-05T20:37:44.000Z","updated_at":"2022-03-25T21:11:05.000Z","dependencies_parsed_at":"2022-09-09T19:00:16.391Z","dependency_job_id":null,"html_url":"https://github.com/benjamincharity/angular-json-calendar","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-json-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-json-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-json-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-json-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjamincharity","download_url":"https://codeload.github.com/benjamincharity/angular-json-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244931471,"owners_count":20534007,"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":["angularjs","calendar","data","date"],"created_at":"2024-08-03T18:00:49.726Z","updated_at":"2025-03-22T08:31:03.732Z","avatar_url":"https://github.com/benjamincharity.png","language":"JavaScript","readme":"# angular-json-calendar\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/270193/17381800/d28f0a98-599b-11e6-8ac5-b6307cefe388.png\" align=\"right\" alt=\"angular-json-calendar\"\u003e\n\n[![MIT License][license_image]][license_url] [![Coverage Status][coverage_image]][coverage_url] [![NPM version][npm_version_image]][npm_url] [![CircleCI][circle_badge]][circle_link]\n\nA calendar module that focuses on providing the data needed to construct a calendar without\nbeing constrained to specific styles and layouts.\n\nOver the span of a year and a half, I was part of three separate projects that needed a calendar\ncomponent. Each time I searched through the popular calendar and date modules (and there are a\n_lot_) hoping to find something. I mean, who really wants to deal with date and time? Unfortunately,\non each occasion, due to design or functional constraints each calendar module was knocked off the\nlist of possibilities. Any time a calendar module supported advanced functionality it almost always\ncame with explicit constraints on the markup and/or layout of the calendar.\n\nOnce the third time rolled around I decided to write something to scratch my own itch. I wanted\nto build something that would accept a few parameters and simply generate the calendar markup for me\nfree of styles. Or allow me to generate the calendar in pure JSON to build out however I needed.\n\n\u003chr style=\"clear:both\"\u003e\n\n\u003e [:tv: **Demos and Examples**][demo_collection]\n\n---\n\n_[Comments and Pull Requests welcome!][issues]_\n\n\n## Contents\n\n- [Installation](#installation)\n- [Dependencies](#dependencies)\n- [Directive](#directive)\n    - [`bc-start-date`](#bc-start-date)\n    - [`bc-end-date`](#bc-end-date)\n    - [`bc-nesting-depth`](#bc-nesting-depth)\n    - [`bc-days`](#bc-days)\n    - [`bc-day-title-format`](#bc-day-title-format)\n    - [`bc-month-title-format`](#bc-month-title-format)\n    - [`bc-date-selected`](#bc-date-selected)\n    - [`bc-show-month-titles`](#bc-show-month-titles)\n    - [`bc-show-weekdays`](#bc-show-weekdays)\n    - [`bc-day-template`](#bc-day-template)\n    - [`bc-date-format`](#bc-date-format)\n- [Service](#service)\n    - [`dateIsBeforeToday()`](#dateisbeforetoday)\n    - [`isDayToday()`](#isdaytoday)\n    - [`integerToArray()`](#integertoarray)\n    - [`padDaysLeft()`](#paddaysleft)\n    - [`padBlankTiles()`](#padblanktiles)\n    - [`chunk()`](#chunk)\n    - [`durationInDays()`](#durationindays)\n    - [`organizeWeeks()`](#organizeweeks)\n    - [`organizeMonths()`](#organizemonths)\n    - [`buildDays()`](#builddays)\n- [Provider](#provider)\n    - [`startDate`](#startdate)\n    - [`nestingDepth`](#nestingdepth)\n    - [`days`](#days)\n    - [`weekdayStyle`](#weekdaystyle)\n    - [`dayTitleFormat`](#daytitleformat)\n    - [`showWeekdays`](#showweekdays)\n    - [`setDayTemplate`](#setdaytemplate)\n    - [`dateFormat`](#dateformat)\n    - [`monthTitleFormat`](#monthtitleformat)\n    - [`showMonthTitles`](#showmonthtitles)\n- [Styling](#styling)\n    - [Themes](#themes)\n    - [Classes](#classes)\n- [Demos](#demos)\n- [Development](#development)\n\n\n\n\n## Installation\n\n#### NPM\n```bash\nnpm install angular-json-calendar --save\n```\n\n#### Bower\n```bash\nbower install angular-json-calendar --save\n```\n\n#### Manual\n\n```html\n\u003c!-- Include the styles (if you need them) --\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/lib/dist/angular-json-calendar.min.css\" /\u003e\n\n\u003c!-- Include the module --\u003e\n\u003cscript src=\"path/to/lib/dist/angular-json-calendar.min.js\"\u003e\u003c/script\u003e\n\n```\n\n\n## Dependencies\n\n- Angular.js (~1.4.0)\n- Moment.js (~2.13.0)\n\n\n## Directive\n\nThis will generate a basic calendar using the [default settings](#provider).\n\n```html\n\u003cbc-calendar\u003e\u003c/bc-calendar\u003e\n```\n\n\u003e [:tv: Simple demo][demo_simple]\n\n\n#### `bc-start-date`\n\n**Optional:** `String`\n\nThis allows you to define a custom starting date for this calendar instance. Defaults to the current\nday.\n\n\u003e [:tv: Custom dates demo][demo_custom_dates]\n\n```html\n\u003cbc-calendar bc-start-date=\"2016-04-24T00:00:00.027Z\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `bc-end-date`\n\n**Optional:** `String`\n\nThis allows you to define a custom end date for this calendar instance. This end-date will define\nthe length of the calendar and **override** `bc-days` if it is also set.\n\n\u003e [:tv: Custom dates demo][demo_custom_dates]\n\n```html\n\u003c!-- Not set by default --\u003e\n\u003cbc-calendar bc-end-date=\"2016-08-11T00:00:00.027Z\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `bc-nesting-depth`\n\n**Optional:** `String`\n\nThe nesting depth refers to how the days will be wrapped. When set to `day` the calendar will simply\nbe many day elements inside a single containing element. If the nesting depth is changed to `week`\nthen the calendar will be a container filled with weeks that in turn are filled with days. If\nchanged to `month` then the calendar would be a container filled with months, each filled with\nweeks and each of those in turn filled with days.\n\nTry changing the nesting depth and inspecting the DOM!\n\n\u003e [:tv: Nesting depth demo][demo_nesting_depth]\n\n```html\n\u003c!-- Default is 'month' --\u003e\n\u003cbc-calendar bc-nesting-depth=\"week\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `bc-days`\n\n**Optional:** `Integer`\n\nThis determines how many days will be output in the calendar. This defaults to `30` and can be\noverridden by setting `bc-end-date`.\n\n```html\n\u003c!-- Default is 30 --\u003e\n\u003cbc-calendar bc-days=\"45\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `bc-day-title-format`\n\n**Optional:** `String`\n\nThis allows you to change the format of the weekday titles. Default is `abbreviation`;\n\n```javascript\nbc-day-title-format=\"letter\"\n// output: [S, M, T, W, T, F, S]\n\nbc-day-title-format=\"abbreviation\"\n// output: [Sun, Mon, Tue, Wed, Thur, Fri, Sat]\n\nbc-day-title-format=\"word\"\n// output: [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]\n```\n\n\u003e [:tv: Custom titles demo][demo_custom_titles]\n\n```html\n\u003c!-- Default is 'abbreviation' --\u003e\n\u003cbc-calendar bc-day-title-format=\"word\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `bc-month-title-format`\n\n**Optional:** `String`\n\nThis customizes the format of the month name. Any valid Moment.js [date filter\nformat][moment_format] can be used. Default is `MMMM` which will output the full month name:\n`February`.\n\n\u003e [:tv: Custom titles demo][demo_custom_titles]\n\n```html\n\u003c!-- Default is 'MMMM' --\u003e\n\u003cbc-calendar bc-month-title-format=\"MMMM\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n### `bc-date-selected`\n\n**Optional:** `Method`\n\nPass in a method which will be called when a date is selected (by a user clicking on a day). This\nmethod only passes in one parameter `date`. This will be the selected date in ISO string format.\n\n\u003e [:tv: Date selected demo][demo_callback]\n\n```javascript\n// In your controller:\nmyMethod(date) {\n  console.log('User selected: ', date);\n  // output: 2016-08-11T00:00:00.027Z\n}\n```\n\n```html\n\u003c!-- In the DOM --\u003e\n\u003cbc-calendar bc-date-selected=\"vm.myMethod(date)\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `bc-show-month-titles`\n\n**Optional:** `Bool`\n\nThis boolean value determines if the month titles will be visible. If set to true, the month name\nwill be output before each month.\n\n```html\n\u003c!-- Default is true --\u003e\n\u003cbc-calendar bc-show-month-titles=\"false\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `bc-show-weekdays`\n\n**Optional:** `Bool`\n\nThis boolean value determines if the weekday titles will be visible. When `bc-nesting-depth` is set\nto `day` or `week`, a single header element will be output above the calendar containing the weekday\nnames. If `bc-nesting-depth` is set to `month` then a header element will be output at the beginning\nof each month.\n\n```html\n\u003c!-- Default is true --\u003e\n\u003cbc-calendar bc-show-weekdays=\"false\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `bc-day-template`\n\n**Optional:** `String`\n\nThis attribute accepts an HTML template as a string. When a template is passed in, it will be used\nin place of the [default inner-day template][source_day_template]. You will have access\nto one item to use in the template. Use `day.date` to output the date. Don't forget, you can use\nthe [Angular date filter][angular_date] in your template.\n\n```html\n\u003c!-- Default template can be seen here: /src/templates/day.inner.html --\u003e\n\u003cbc-calendar bc-day-template=\"\u003cspan\u003e{{ day.date }}\u003c/span\u003e\"\u003e\u003c/bc-calendar\u003e\n\n\u003c!-- You can use the Angular date filter inside your template --\u003e\n\u003cbc-calendar bc-day-template=\"\u003cspan\u003e{{ day.date | date:'d / M / yy' }}\u003c/span\u003e\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `bc-date-format`\n\n**Optional:** `String`\n\nPass in a string representing a valid Moment.js [date filter format][moment_format] to change how\nthe default date is output in the default day template. Moment.js [date filter\nformat][moment_format]\n\n```html\n\u003c!-- Default is 'D' --\u003e\n\u003cbc-calendar bc-date-format=\"MMM d, yyyy\"\u003e\u003c/bc-calendar\u003e\n```\n\n\n## Service\n\nMost calendar implementations should be able to simply use the directive. But one of the reasons\nthis module was created was to give the end user more control over the calendar data itself without\nalways being tied to HTML output. So the services that I use internally are all exposed to enable\nyou to create a completely custom calendar.\n\n\u003e Note: Don't be afraid to go look at the [source][source_service]! It isn't too complicated and has plenty of\ncomments!\n\nInject the service into your controller to use:\n\n```javascript\n// ES6 example\nexport class MyController {\n\n    constructor(\n        bcCalendarService\n    ) {\n        'ngInject';\n\n        bcCalendarService.dateIsBeforeToday('2016-05-01T00:00:00.027Z');\n        // returns true\n\n    }\n\n}\n\n// ES5 example\nangular.module('myModule', ['bc.JsonCalendar'])\n    .controller('MyController', (bcCalendarService) =\u003e {\n\n          bcCalendarService.dateIsBeforeToday('2016-05-01T00:00:00.027Z');\n          // returns true\n\n    })\n;\n```\n\n\u003e [:tv: Service example demo][demo_service]\n\n\n#### `dateIsBeforeToday()`\n\nCheck to see if the passed in date occurred before the current date.\n\n- `@param {String} date` **Required**\n  - Any string representing a [valid date][moment_parsing] accepted by Moment.js\n- `@return {Bool}`\n\n```javascript\nbcCalendarService.dateIsBeforeToday('2016-05-01T00:00:00.027Z');\n// returns true\n```\n\n\n#### `isDayToday()`\n\n- `@param {String} date` **Required**\n  - Any string representing a [valid date][moment_parsing] accepted by Moment.js\n- `@param {String} date2` **Optional**\n  - Any string representing a [valid date][moment_parsing] accepted by Moment.js\n  - Default is the current day.\n- `@return {Bool}`\n\nCheck to see if the passed in date is the same **day** as the current date. You can also pass in a\nsecond date which will be used to check against in place of the current day.\n\n```javascript\nbcCalendarService.isDayToday('2016-05-01T00:00:00.027Z');\n// returns false\n\nbcCalendarService.isDayToday('2016-05-01T00:00:00.027Z', '2016-05-01T00:00:00.027Z');\n// returns true\n```\n\n\n#### `integerToArray()`\n\n- `@param {Integer} count` **Required**\n  - The number of array items needed.\n- `@return {Array} days`\n\nTurn a integer (`6`) into an array: `[1,2,3,4,5,6]`\n\n```javascript\nbcCalendarService.integerToArray(4);\n// returns [1, 2, 3, 4]\n```\n\n\n#### `padDaysLeft()`\n\n- `@param {String} startDate` **Required**\n  - Any string representing a [valid date][moment_parsing] accepted by Moment.js\n- `@param {Integer} count` **Required**\n  - The number of days that should be created.\n- `@return {Array} days`\n\nPad the beginning of a week with any missing days.\n\nIf the calendar's nesting depth is set to week or month and the start\ndate is not at the beginning of the week, you can backfill that week's missing days.\n\n```javascript\nbcCalendarService.padDaysLeft('2016-05-18T00:00:00.027Z', 3);\n// returns:\n[\n   {\n      \"date\":\"2016-05-15T00:00:00.027Z\"\n   },\n   {\n      \"date\":\"2016-05-16T00:00:00.027Z\"\n   },\n   {\n      \"date\":\"2016-05-17T00:00:00.027Z\"\n   }\n]\n```\n\n\n#### `padBlankTiles()`\n\n- `@param {Array} collection` **Required**\n  - The array that needs blank tiles.\n- `@param {Integer} count` **Required**\n  - The number of blank tiles needed.\n- `@param {String} direction` **Optional**\n  - Determines if the tiles are added to the beginning or end of the collection.\n  - Valid values: `left`, `right`.\n  - Default value: `left`.\n- `@return {Array} paddedCollection`\n\nPad a collection with blank tiles.\n\nIf you are generating a classic calendar month and the first day of the month isn't the first day of\nthe week, then your vertical alignment will be off (meaning your first day may be a Wednesday, but\nit is sitting underneath the Sunday label).\n\n```javascript\nconst collection = [{date: '2016-05-17T00:00:00.027Z'}];\n\nbcCalendarService.padBlankTiles(collection, 2);\n// returns:\n[\n   {\n      \"date\":null\n   },\n   {\n      \"date\":null\n   },\n   {\n      \"date\":\"2016-05-17T00:00:00.027Z\"\n   }\n]\n\n\nbcCalendarService.padBlankTiles(collection, 2, 'right');\n// returns:\n[\n   {\n      \"date\":\"2016-05-17T00:00:00.027Z\"\n   },\n   {\n      \"date\":null\n   },\n   {\n      \"date\":null\n   }\n]\n```\n\n\n#### `chunk()`\n\n- `@param {Array} group` **Required**\n  - The array that needs blank tiles.\n- `@param {Integer} groupSize` **Optional**\n  - How many items each 'chunk' should hold\n  - Default value: `7`\n- `@return {Array} chunks`\n\nThis is an implementation of the `_.chunk()` method you may know from libraries such as Underscore\nand Lodash. It will take an array of items and return an array of arrays, each holding the number of\nitems specified by `groupSize`.\n\n```javascript\nconst collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n\nbcCalendarService.chunk(collection, 4);\n// returns:\n[\n   [\n      1,\n      2,\n      3,\n      4\n   ],\n   [\n      5,\n      6,\n      7,\n      8\n   ],\n   [\n      9,\n      0\n   ]\n]\n```\n\n\n#### `durationInDays()`\n\n- `@param {String} date` **Required**\n  - The first date to begin the measurement from.\n  - Any string representing a [valid date][moment_parsing] accepted by Moment.js\n- `@param {String} date` **Required**\n  - The second date to measure to.\n  - Any string representing a [valid date][moment_parsing] accepted by Moment.js\n- `@return {Integer} days`\n\nGet the duration in days between two dates **including** both the start and end date.\n\n```javascript\nbcCalendarService.durationInDays('2016-04-05T04:00:00.000Z', '2016-04-12T04:00:00.000Z');\n// returns: 9\n```\n\n\n#### `organizeWeeks()`\n\n- `@param {Array} days` **Required**\n  - The array of days that needs to be organized into weeks.\n- `@return {Array} collection`\n\nThis method takes a collection of days and organizes them by week, padding any days as needed.\n\n```javascript\nbcCalendarService.organizeWeeks(days);\n// returns:\n[ // collection\n  [ // week\n    { // day\n      date: '2016-04-05T04:00:00.000Z',\n    },\n    ... // more days\n  ],\n  ... // more weeks\n]\n```\n\n\n#### `organizeMonths()`\n\n- `@param {Array} days` **Required**\n  - The array of days that needs to be organized into months.\n- `@return {Array} collection`\n\nThis method takes a collection of days and organizes them by weeks and months, padding any days as\nneeded.\n\n```javascript\nbcCalendarService.organizeMonths(days);\n// returns:\n[ // collection\n  [ // month\n    [ // week\n      { // day\n        date: '2016-04-05T04:00:00.000Z',\n      },\n      ... // more days\n    ],\n    ... // more weeks\n  ],\n  ... // more months\n]\n```\n\n\n#### `buildDays()`\n\n- `@param {Integer} limit` **Required**\n  - The number of days to create\n- `@param {String} start` **Optional**\n  - Any string representing a [valid date][moment_parsing] accepted by Moment.js\n  - Default value: The current day\n- `@return {Array} collection`\n\nBuild an array with a specific number of days starting from the date specified or the current date.\nAlthough there is only one item, each day is an object so that you can easily add custom properties\nto support any features needed.\n\n```javascript\nbcCalendarService.buildDays(3, '2016-04-12T04:00:00.000Z');\n// returns:\n[\n   {\n      \"date\":\"2016-04-12T04:00:00.000Z\"\n   },\n   {\n      \"date\":\"2016-04-13T04:00:00.000Z\"\n   },\n   {\n      \"date\":\"2016-04-14T04:00:00.000Z\"\n   }\n]\n```\n\n## Provider\n\nThe provider allows you to change the default settings for every instance of the calendar within\nyour project.\n\n\u003e Note: Don't be afraid to go look at the [source][source_provider]! It isn't too complicated and has plenty of\ncomments!\n\nInject the provider into your config function to use it:\n\n```javascript\n// ES6 example\nexport function myConfig(\n    bcCalendarConfigProvider\n) {\n    'ngInject';\n\n    // Now every calendar in your project with default to having the header hidden\n    bcCalendarConfigProvider.showHeader = false;\n\n}\n\n\n// ES5 example\nangular.module('myModule', ['bc.JsonCalendar'])\n    .config(myConfig);\n\nfunction myConfig(bcCalendarConfigProvider) {\n    bcCalendarConfigProvider.showHeader = false;\n}\n```\n\n\u003e [:tv: Provider demo][demo_provider_weekday]\n\n\n#### `startDate`\n\n- `{String}`\n  - Any [valid date][moment_parsing] accepted by Moment.js\n  - Default value: the current day\n\nDefine the default starting date for all calendars.\n\n```javascript\nbcCalendarConfigProvider.startDate = '2010-09-20T00:00:00.027Z';\n```\n\n#### `nestingDepth`\n\n- `{String}`\n  - Valid values: `day`, `week`, `month`\n  - Default value: `month`\n\nDefine the default nesting depth for all calendars. Learn more about nesting depth in the directive\nattribute documentation: [`bc-nesting-depth`](#bc-nesting-depth)\n\n```javascript\nbcCalendarConfigProvider.nestingDepth = 'week';\n```\n\n### `days`\n\n- `{Integer}`\n  - The number of days to be included in each calendar when no [`bc-end-date`](#bc-end-date) is\n    defined.\n  - Default value: `30`\n\n```javascript\nbcCalendarConfigProvider.days = 12;\n```\n\n#### `weekdayStyle`\n\n- `{String}`\n    - Collections: `letter`, `abbreviation`, `word`\n\nWeekdays can be output in [three formats](#bc-day-title-format). The values for each of these\nformats (or all of them) can be overwritten with translations or other custom values.\n\n```javascript\n// You can overwrite the entire `weekdayStyle` object or just a subset:\nbcCalendarConfigProvider.weekdayStyle.abbreviation = [\n    'SU',\n    'MO',\n    'TU',\n    'WE',\n    'TH',\n    'FR',\n    'SA',\n];\n\n// Default formats:\n// letter       : S, M, ...\n// abbreviation : Sun, Mon, ...\n// word         : Sunday, Monday, ...\n```\n\n#### `dayTitleFormat`\n\n- `{String}`\n    - Valid values: `letter`, `abbreviation`, `word`\n    - Default value: `abbreviation`\n\nDefine the default format for weekday names.\n\n```javascript\nbcCalendarConfigProvider.dayTitleFormat = `letter`;\n```\n\n#### `showWeekdays`\n\n- `{Bool}`\n    - Default value: `true`\n\nDefine the visibility of the weekdays header. This is only applicable if\n[`nestingDepth`](#nestingdepth) is set to `week` or `month`.\n\n```javascript\nbcCalendarConfigProvider.showWeekdays = false;\n```\n\n#### `setDayTemplate()`\n\n- `@param {String} template` **Required**\n\nPass in a template string to be used in place of the default day template. The passed in template\nwill be put into the [$templateCache][angular_template_cache] with the other templates.\n\nYou have access to one item inside this template: `day`. This is an object with a single item. If\nthe day is a valid day, `day.date` will contain a date formatted as an ISO string:\n`2016-05-01T00:00:00.027Z`. If the day is padding for a week or month, `day.date` will be `null`.\n\n```javascript\n// Don't forget, you can use the Angular date filter inside the template:\nconst myTemplate = '\u003cspan data-ng-if=\"day.date\"\u003eTODAY: {{day.date | date:\"d\"}}\u003c/span\u003e';\n\nbcCalendarConfigProvider.setDayTemplate(myTemplate);\n```\n\n```html\n\u003c!-- Default day template --\u003e\n\u003ctime\n  datetime=\"{{ day.date | date:'yyyy-MM-dd' }}\"\n  class=\"bc-calendar__day-time\"\n  title=\"{{ day.date }}\"\n  data-ng-if=\"day.date\"\n\u003e\n  \u003cspan data-ng-bind=\"vm.formatDate(day.date, vm.dateFormat)\"\u003e\u003c/span\u003e\n\u003c/time\u003e\n```\n\n#### `dateFormat`\n\n- `{String}`\n    - Any valid Moment.js [date filter format][moment_format]\n    - Default value: `D`\n\nDefine the default date format for every day.\n\n```javascript\nbcCalendarConfigProvider.dateFormat = 'EEE, d';\n// output: Sun, 1\n```\n\n#### `monthTitleFormat`\n\n- `{String}`\n    - Any valid Moment.js [date filter format][moment_format]\n    - Default value: `MMMM`\n\nDefine the default format for the month titles.\n\n```javascript\nbcCalendarConfigProvider.monthTitleFormat = 'MMM';\n// output: Jan\n```\n\n#### `showMonthTitles`\n\n- `{Bool}`\n    - Default value: `true`\n\nDefine the default visibility of the month names before each month when\n[nestingDepth](#nestingdepth) is set to `month`.\n\n```javascript\nbcCalendarConfigProvider.showMonthTitles = false;\n```\n\n\n## Styling\n\nOne of the primary goals of this project was to create a calendar free of styles and constraints.\nBecause of this, there are no styles applied by default. But, as a user of open-source modules, I\nreally value when I can get a simple version up and running without investing too much time.\nFor that reason there are three _very_ minimal themes included.\n\nThere are also plenty of clearly defined [classes](#classes) which allow for the easy creation of\ncustom themes.\n\n\n### Themes\n\nThese very minimal themes were created to hopefully spark your creativity rather than to use\ndirectly in production apps (unless of course you need something very, very minimal).\n\nTo enable a theme, add the corresponding class name to the directive element. Note that the theme may\nrequire a [custom template](#bc-day-template) for the day which adds specific elements and classes\nfor the theme. You can expand on these examples to build your own custom day and theme.\n\n```javascript\n\u003cbc-calendar\n  class=\"bc-calendar--days\"\n  bc-nesting-depth=\"week\"\n  bc-day-template=\"{{ vm.customDayTemplate }}\"\n\u003e\u003c/bc-calendar\u003e\n```\n\n\n#### `.bc-calendar--months`\n\nA classic month by month calendar.\n\n- Nesting depth should be set to `month`\n- Custom day template should be used\n\n\u003e [:tv: Months theme demo][demo_style_months]\n\n```html\n\u003cbc-calendar\n  class=\"bc-calendar--months\"\n  bc-nesting-depth=\"month\"\n  bc-day-template=\"{{ vm.customDayTemplate }}\"\n\u003e\u003c/bc-calendar\u003e\n\n\u003c!-- Note: Since 'month' is the default nesting depth, you can also leave it\n     off as long as the default has not been overwritten using the provider --\u003e\n\u003cbc-calendar\n  class=\"bc-calendar--months\"\n  bc-day-template=\"{{ vm.customDayTemplate }}\"\n\u003e\u003c/bc-calendar\u003e\n```\n\n**Custom Day Template:**\n\n```html\n\u003ctime\n  class=\"bc-calendar__day-time\"\n  datetime=\"{{ day.date | date:'yyyy-MM-dd' }}\"\n  title=\"{{ day.date }}\"\n  data-ng-if=\"day.date\"\n\u003e\n  \u003cspan class=\"week--date\"\u003e{{ day.date | date:\"d\"}}\u003c/span\u003e\n  \u003cspan class=\"month\"\u003e{{ day.date | date:\"MMMM\"}}\u003c/span\u003e\n\u003c/time\u003e\n```\n\n\n#### `.bc-calendar--days`\n\nA modern vertical calendar comprised of weeks.\n\n- Nesting depth should be set to `week`\n- Custom day template should be used\n\n\u003e [:tv: Days theme demo][demo_style_weeks]\n\n```html\n\u003cbc-calendar\n  class=\"bc-calendar--days\"\n  bc-nesting-depth=\"week\"\n  bc-day-template=\"{{ vm.yourCustomDayTemplate }}\"\n\u003e\u003c/bc-calendar\u003e\n```\n\n**Custom Day Template:**\n\n```html\n\u003ctime\n  class=\"bc-calendar__day-time\"\n  datetime=\"{{ day.date | date:'yyyy-MM-dd' }}\"\n  title=\"{{ day.date }}\"\n  data-ng-if=\"day.date\"\n\u003e\n  \u003cspan class=\"week--date\"\u003e{{ day.date | date:\"d\"}}\u003c/span\u003e\n  \u003cspan class=\"month\"\u003e{{ day.date | date:\"MMMM\"}}\u003c/span\u003e\n\u003c/time\u003e\n```\n\n\n#### `.bc-calendar--sidescroll`\n\nA side-scrolling calendar of days.\n\n- Nesting depth should be set to `day`\n- Custom day template should be used\n\n\u003e [:tv: Side-scroll theme demo][demo_style_sidescroller]\n\n```html\n\u003cbc-calendar\n  class=\"bc-calendar--sidescroll\"\n  bc-nesting-depth=\"day\"\n  bc-day-template=\"{{ vm.customDayTemplate }}\"\n  bc-days=\"12\"\n\u003e\u003c/bc-calendar\u003e\n```\n\n**Custom Day Template:**\n\n```html\n\u003ctime\n  class=\"bc-calendar__day-time\"\n  datetime=\"{{ day.date | date:'yyyy-MM-dd' }}\"\n  title=\"{{ day.date }}\"\n  data-ng-if=\"day.date\"\n\u003e\n  \u003cspan class=\"week--date\"\u003e{{ day.date | date:\"d\"}}th\u003c/span\u003e\n  \u003cspan class=\"week--day\"\u003e{{ day.date | date:\"EEEE\"}}\u003c/span\u003e\n\u003c/time\u003e\n```\n\n\n### Classes\n\nThe easiest way to get acquainted with the classes is to check out [one][demo_style_sidescroller] of\nthe [many][demo_style_weeks], [demos][demo_style_months] and inspect the DOM!\n\n\u003e Note: Due to a breaking change with AngularJS v1.5.0 relating to using `replace: true` with\ndirectives, the directive element is now output into the DOM. Wrapper classes are added to each to\nhelp developers adapt for this change in existing applications.\n\n```scss\n// \u003csection\u003e Primary container for the calendar\n.bc-calendar {}\n\n// \u003cbc-month\u003e Directive wrapper\n.bc-calendar__month-wrapper {}\n\n// \u003ctime\u003e The container for a month\n.bc-calendar__month {}\n\n// \u003cspan\u003e The month title 'March'\n.bc-calendar__month-title {}\n\n// \u003cspan\u003e Container for the weekday titles 'S M T W T F S'\n.bc-calendar__weekdays {}\n\n// \u003cbc-week\u003e Directive wrapper\n.bc-calendar__week-wrapper {}\n\n// \u003ctime\u003e The container for a week\n.bc-calendar__week {}\n\n// \u003cbc-day\u003e Directive wrapper\n.bc-calendar__day-wrapper {}\n\n// \u003csection\u003e The container for an individual day\n.bc-calendar__day {}\n\n// \u003csection\u003e Secondary class added to a day when inside the weekdays header\n.bc-calendar__day--weekdays {}\n\n// \u003cstrong\u003e Wrapper for the text inside a day within the weekdays header\n.bc-calendar__day-title {}\n\n// Class added to a day if it is before today's date\n.bc-calendar__day--disabled {}\n\n// Class added to a day if it is the current day\n.bc-calendar__day--today {}\n\n// Class added to even days (2nd, 4th, etc)\n.bc-calendar__day--even {}\n\n// Class added to odd days (1st, 3rd, etc)\n.bc-calendar__day--odd {}\n\n// Class added to a day when it is a 'filler' day rather than a valid day\n.bc-calendar__day--pad {}\n\n// Class added to a day when it is a valid day\n.bc-calendar__day--valid {}\n\n// Class added to a day when it is the currently selected day\n.bc-calendar__day--selected {}\n\n// \u003ctime\u003e The inner wrapper for the date in the default day template\n.bc-calendar__day-time {}\n\n```\n\n\n## Demos\n\n- [Demo collection][demo_collection]\n- [Simple demo][demo_simple]\n- [Custom start and end dates][demo_custom_dates]\n- [Custom nesting depth][demo_nesting_depth]\n- [Setting custom titles][demo_custom_titles]\n- [Using the callback][demo_callback]\n- [Custom day template][demo_custom_template]\n- [Using the service][demo_service]\n- [Using the provider][demo_provider_weekday]\n- [Side-scrolling theme][demo_style_sidescroller]\n- [Weeks-style vertical calendar theme][demo_style_weeks]\n- [Classic months-style theme][demo_style_months]\n\n\n## Development\n\n- `npm run build` - Build JS/CSS/HTML/SVG\n- `npm run build:js` - Build JS\n- `npm run build:css` - Build CSS\n- `npm run watch:css` - Watch CSS and rebuild on change\n- `npm run watch:js` - Watch JS/HTML and rebuild on change\n- `npm run watch` - Watch JS/CSS/HTML and rebuild on change\n\n\n\n\n[issues]: https://github.com/benjamincharity/angular-json-calendar/issues\n[angular_date]: https://docs.angularjs.org/api/ng/filter/date\n[angular_template_cache]: https://docs.angularjs.org/api/ng/service/$templateCache\n[moment_format]: http://momentjs.com/docs/#/displaying/format/\n[moment_parsing]: http://momentjs.com/docs/#/parsing/string/\n[source_day_template]: https://github.com/benjamincharity/angular-json-calendar/blob/master/src/templates/day.inner.html\n[source_service]: https://github.com/benjamincharity/angular-json-calendar/blob/master/src/calendar.service.js\n[source_provider]: https://github.com/benjamincharity/angular-json-calendar/blob/master/src/calendar.provider.js\n\n[demo_collection]: https://codepen.io/collection/nNzJmy/\n[demo_callback]: http://codepen.io/benjamincharity/pen/JRkQgA?editors=1000\n[demo_custom_titles]: http://codepen.io/benjamincharity/pen/YGvobv?editors=1000\n[demo_custom_template]: http://codepen.io/benjamincharity/pen/RGJzdB?editors=1000\n[demo_custom_dates]: http://codepen.io/benjamincharity/pen/mAKkQj?editors=1000\n[demo_simple]: http://codepen.io/benjamincharity/pen/vXAqkW?editors=1000\n[demo_nesting_depth]: http://codepen.io/benjamincharity/pen/GjBBZG?editors=1000\n[demo_provider_weekday]: http://codepen.io/benjamincharity/pen/XjBxJq?editors=0010\n[demo_service]: https://codepen.io/benjamincharity/pen/ORwByr?editors=0010\n[demo_style_sidescroller]: https://codepen.io/benjamincharity/pen/ORwByr?editors=0100\n[demo_style_weeks]: https://codepen.io/benjamincharity/pen/dpjgNB?editors=1000\n[demo_style_months]: https://codepen.io/benjamincharity/pen/EgpdXO?editors=1000\n\n[coverage_image]: https://coveralls.io/repos/github/benjamincharity/angular-json-calendar/badge.svg\n[coverage_url]: https://coveralls.io/github/benjamincharity/angular-json-calendar\n[license_image]: http://img.shields.io/badge/license-MIT-blue.svg\n[license_url]: LICENSE\n[npm_url]: https://npmjs.org/package/angular-json-calendar\n[npm_version_image]: http://img.shields.io/npm/v/angular-json-calendar.svg\n[circle_badge]: https://circleci.com/gh/benjamincharity/angular-json-calendar/tree/master.svg?style=svg\n[circle_link]: https://circleci.com/gh/benjamincharity/angular-json-calendar/tree/master\n\n","funding_links":[],"categories":["Directive"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Fangular-json-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamincharity%2Fangular-json-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Fangular-json-calendar/lists"}