{"id":30730536,"url":"https://github.com/jacoduplessis/calendar","last_synced_at":"2025-10-25T02:25:11.011Z","repository":{"id":25911240,"uuid":"106875156","full_name":"jacoduplessis/calendar","owner":"jacoduplessis","description":"A small, fast and efficient JavaScript calendar that can display events.","archived":false,"fork":false,"pushed_at":"2022-08-04T18:22:00.000Z","size":111,"stargazers_count":36,"open_issues_count":1,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T16:51:00.191Z","etag":null,"topics":["calendar","javascript","svelte"],"latest_commit_sha":null,"homepage":"https://jacoduplessis.github.io/calendar/","language":"HTML","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/jacoduplessis.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-13T21:30:28.000Z","updated_at":"2024-09-18T08:57:29.000Z","dependencies_parsed_at":"2022-08-07T11:16:10.222Z","dependency_job_id":null,"html_url":"https://github.com/jacoduplessis/calendar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jacoduplessis/calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacoduplessis%2Fcalendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacoduplessis%2Fcalendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacoduplessis%2Fcalendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacoduplessis%2Fcalendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacoduplessis","download_url":"https://codeload.github.com/jacoduplessis/calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacoduplessis%2Fcalendar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273468872,"owners_count":25111220,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","javascript","svelte"],"created_at":"2025-09-03T16:11:04.596Z","updated_at":"2025-10-25T02:25:10.953Z","avatar_url":"https://github.com/jacoduplessis.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Calendar\n\nThe 7Kb JavaScript calendar.\n\nYou worked so hard to keep your app small. And then came the manager's request to add a calendar.\nShit. Now you need Moment and jQuery and all your self-discipline means nothing. Until now.\n\nThe purpose of this library is to render 'events'. It offers a `calendar` view as well\nas a `list` view.\n\nIn order to avoid confusion with JavaScript events, calendar 'events' are known \nas `entries` (singular: `entry`) in the code base and API.\n\n## Demos\n\n[Basic Usage](https://jacoduplessis.github.io/calendar/demo/basic.html)\n\n[Editor Plugin](https://jacoduplessis.github.io/calendar/demo/editor.html)\n\n[Display Trello Board](https://jacoduplessis.github.io/calendar/demo/trello.html)\n\n## Usage\n\n```html\n\u003cdiv id=\"calendar\"\u003e\u003c/div\u003e\n\u003cscript src=\"calendar.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var calendar = new Calendar({\n    target: document.querySelector(\"#calendar\"),\n    data: {\n      entries: [{\n        dateFrom: '2017-10-10',\n        title: 'Hallo',\n        content: 'World'\n      }]\n    }\n  })\n\u003c/script\u003e\n\n```\n\n## Data Object\n\n### `monthNames` [Array]\n\nNames of the months to display in the header.\n\ndefault: `[\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"]`\n\n### `dayNames` [Array]\n\nNames of the days to display in calendar header. Week starts on Sunday.\n\ndefault: `[\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"]`\n\n### `entries` [Array]\n\nEntries to display. See `Entry Object` below.\n\nDefault: `[]`\n\n### `month` [Integer]\n\nAlong with `year` determines which month is displayed.\n\nDefault: current month\n\n### `year` [Integer]\n\nAlong with `month` determines which month is displayed.\n\nDefault: current year\n\n### `escape` [Boolean]\n\nWhether to escape the `content` field of the event. Set to `false` if you need to display HTML in the modal. Needless to say, you need to sanitize user generated content server-side.\n\nDefault: `true`\n\n### `showNew` [Boolean]\n\nWhether to show the New Event click area on the calendar.\n\nDefault: `false`\n\n### `previousText` [String]\n\nText to display on the button that goes back in time.\n\nDefault: `\"Prev\"`\n\n### `nextText` [String]\n\nText to display on the button that goes forward in time.\n\nDefault: `\"Next\"`\n\n### `calendarText` [String]\n\nText to display on the button that enables the calendar view.\n\nDefault: `\"Calendar\"`\n\n### `listText` [String]\n\nText to display on the button that enables the list view.\n\nDefault: `\"List\"`\n\n### `emptyText` [String]\n\nText to display when list view is empty.\n\nDefault: `\"No Events To Display\"`\n\n### `untitledText` [String]\n\nText to display when entry title is empty.\n\nDefault: `\"Untitled\"`\n\n### `view` [String]\n\nThe initial render mode. Must be one of `\"calendar\"` or `\"list\"`.\n\nDefault: `\"calendar\"`\n\n### `defaultColor` [String]\n\nDefault entry color. Can be overwritten per entry. Text color will adapt to\ncreate contrast.\n\nDefault: `\"darkblue\"`\n\n### `message` [String]\n\nMessage to display in the header, useful for indication loading status.\n\n### `banner` [String]\n\nDisplay an important notification to the user, such as connections errors.\n\n## Entry Object\n\nEach entry may have the following keys:\n\n### `start` [String] **required**\n\nThe starting date/time in ISO8601 format and UTC timezone, e.g. 2017-01-01T10:00:00Z.\n\n### `end` [String]\n\nThe ending date/time in ISO8601 format and UTC timezone, e.g. 2017-01-01T10:00:00Z.\nIf omitted, will be the same as `start`, and `allDay` will be `false`.\n\n### `all_day` [Boolean]\n\nWhether to use only the date component of `start`/`end`. \n\n### `title` [String]\n\nTitle of the entry.\n\nDefault: `\"\"`\n\n### `content` [String]\n\nContent to display when modal is opened. Can contain\nHTML if `escape` is set to `false` in calendar options.\n\n### `color` [String]\n\nCSS color to associate with this entry. Do not use named colors - a hex code is required.\n\nDefault: `\"#00008b\"` (`darkblue`)\n\n### `image` [String]\n\nURL of an image to display in the modal.\n\n### `url` [String]\n\nExternal link.\n\n## Calendar API\n\n### `.set(data)`\n\nThis updates the calendar's state with the new values provided and causes the DOM to update.\n\nUsage:\n\n```js\ncalendar.set({events: [...]}) // update events\n\ncalendar.set({year: 2018, month: 1}) // jump to Feb 2018 (months are zero-indexed)\n```\n\n### `.get(key)`\n\nGet calendar state.\n\nUsage:\n\n```js\nvar entries = calendar.get('entries')\n```\n\n### `.observe(key, callback[, options])`\n\nUse this to check when the calendar display is changed, \npossible fetching new entry data and updating the calendar with\n`.set`.\n\nUsage:\n\n```js\ncalendar.observe('month', function(newMonth, oldMonth) {\n  console.log(\"Month changed from\", oldMonth, \"to\", newMonth)\n  console.log(\"Year is\", cal.get('year'))\n  fetch(`/entries/?year=${cal.get('year')}\u0026month=${newMonth}`).then(r =\u003e r.json()).then(data =\u003e {\n    const entries = cal.get('entries')\n    cal.set({entries: entries.concat(data.entries)})\n  })\n})\n```\n\n### `.destroy()`\n\nRemoves the component from the DOM and removes any observers and event listeners that were created. \n\nUsage:\n\n```js\ncalendar.destroy()\n```\n\n### `.on(event, callback)`\n\nRespond to events. See events below.\n\n## Trigger the modal\n\n```js\ncalendar.set({showModal: true})\n```\n\n\n## Access to DOM Nodes\n\nCertain nodes van be reference using the `refs` property of the calendar.\n\n### `modalContent`\n\nUsage:\n\n```js\ncalendar.refs.modalContent.innerHTML = '\u003ch1\u003eCustom Modal Content\u003c/h1\u003e'\ncalendar.set({showModal: true})\n```\n\n## Events\n\n### `entryClicked`\n\nCalled when an entry is clicked/tapped in calendar view.\n\nUsage:\n\n```js\ncalendar.on('entryClicked', function(event) {\n  console.log(event.entry)\n})\n```\n\n### `newClicked`\n\nCalled when the New Entry area is clicked/tapped in calendar view.\n\nUsage:\n\n```js\ncalendar.on('newClicked', function(event) {\n  calendar.refs.modalContent.innerHTML = '\u003ch1\u003eAdd New Event\u003c/h1\u003e'\n  calendar.set({showModal: true})\n})\n```\n\n## Translation\n\nAll strings can be overwritten in the options, so if you need\nsomething other than English, just pass in the translated strings.\n\n## Custom Modal Buttons\n\n```js\n\ncalendar.set({\n  modalButtons: [\n    {id:'do-something', text: 'Click Me'}\n  ]\n})\n\ncalendar.on('do-something', function(event) {\n  console.log(event.entry)\n})\n```\n\n## Todo\n\nEditor plugin form validation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacoduplessis%2Fcalendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacoduplessis%2Fcalendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacoduplessis%2Fcalendar/lists"}