{"id":18800630,"url":"https://github.com/bitovi/calendar-events-component","last_synced_at":"2026-03-19T06:28:31.884Z","repository":{"id":136980856,"uuid":"182833156","full_name":"bitovi/calendar-events-component","owner":"bitovi","description":"Show events from a google calendar","archived":false,"fork":false,"pushed_at":"2023-04-10T18:43:42.000Z","size":233,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":37,"default_branch":"main","last_synced_at":"2025-01-31T00:22:28.328Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bitovi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-04-22T17:15:34.000Z","updated_at":"2023-04-06T21:43:34.000Z","dependencies_parsed_at":"2023-07-16T18:19:01.110Z","dependency_job_id":null,"html_url":"https://github.com/bitovi/calendar-events-component","commit_stats":null,"previous_names":["bitovi/calendar-events"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitovi%2Fcalendar-events-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitovi%2Fcalendar-events-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitovi%2Fcalendar-events-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitovi%2Fcalendar-events-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitovi","download_url":"https://codeload.github.com/bitovi/calendar-events-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239734448,"owners_count":19688255,"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":[],"created_at":"2024-11-07T22:19:27.264Z","updated_at":"2026-01-03T22:30:12.839Z","avatar_url":"https://github.com/bitovi.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## @bitovi/calendar-events\n\nThe `@bitovi/calendar-events` package exports a `\u003ccalendar-events\u003e`\ncustom element that lists events loaded from a google calendar.\n\nImport the `calendar-events.js` file from `/dist/amd/`, `/dist/cjs/`, or `/dist/global/`\n\nUse it by adding the custom element to your page:\n\n```html\n\u003ccalendar-events\n  api-key=\"AIzaSyBsNpdGbkTsqn1BCSPQrjO9OaMySjK5Sns\"\n  calendar-id=\"jupiterjs.com_g27vck36nifbnqrgkctkoanqb4@group.calendar.google.com\"\n  event-count=\"3\"\n  show-recurring\n\u003e\u003c/calendar-events\u003e\n```\n\n## Attributes\n\n### api-key\n\n`required`\n\nSet this to a google api key.\n\n### calendar-id\n\n`required`\n\nThe calendar whose events will be displayed.\n\n### event-count\n\nThe total number of events to display. This defaults to `10`.\n\n### show-recurring\n\nIf present, this will include recurring events.\n\n\n## HTML\n\nThe default html output for an event looks like the following:\n\n```html\n\u003ccalendar-events\u003e\n  \u003cdiv class=\"calendar-events-event\"\u003e\n    \u003cdiv class='event-header'\u003e\n      \u003cdiv class='event-summary'\u003e\u003ca class='event-url event-title'\u003e\u003c/a\u003e\u003c/div\u003e\n      \u003cdiv class='event-group'\u003e\u003c/div\u003e\n      \u003cdiv class='event-date'\u003e\u003c/div\u003e\n      \u003cdiv class='event-location'\u003e\u003c/div\u003e\n      \u003cdiv class='event-body'\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class='event-footer'\u003e\u003ca class='event-url'\u003eView Event\u003c/a\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  ...\n\u003c/calendar-events\u003e\n```\n\nYou can customize it by adding it to a `\u003ctemplate\u003e` within your page:\n\n```html\n\u003ccalendar-events\u003e\n  \u003ctemplate\u003e\n    \u003ca class='event-url'\u003e\n      \u003ch1 class='event-title'\u003e\u003c/h1\u003e\n      \u003cp class='event-body'\u003e\u003c/p\u003e\n    \u003c/a\u003e\n  \u003c/template\u003e\n\u003c/calendar-events\u003e\n```\n\nIf you wrap your custom event template in a container with class `calendar-events-event`, you can specify custom templates for other states as well:\n\n```html\n\u003ccalendar-events\u003e\n  \u003ctemplate\u003e\n    \u003cdiv class=\"calendar-events-event\"\u003e\n      \u003ca class='event-url'\u003e\n        \u003ch1 class='event-title'\u003e\u003c/h1\u003e\n        \u003cp class='event-body'\u003e\u003c/p\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv class='calendar-events-pending'\u003eAppears when the calendar API is fetching\u003c/div\u003e\n    \u003cdiv class='calendar-events-rejected'\u003e\u003cp\u003eAppears when an error occured.\u003c/p\u003e\u003c/div\u003e\n    \u003cdiv class='calendar-events-resolved'\u003e\u003cp\u003eAppears when there are no events to display.\u003c/p\u003e\u003c/div\u003e\n  \u003c/template\u003e\n\u003c/calendar-events\u003e\n```\n\nWithin the event template (`.calendar-events-event`), the following classes will allow the element to be updated with corresponding information about the event. The textContent of every tag matching the class is replaced.\n\n`.event-title` - The title of the event (`event.summary` from the API response)\n\n`.event-group` - The name of the Calendar the event was created under (`event.organizer.displayName`)\n\n`.event-location` - The location field or hangout link, urls become links. (`event.location || event.hangoutLink`)\n\n`.event-body` - The content of the description field. Linebreaks in plaintext converted into br tags. (`event.description`)\n\n`a.event-url` - Updates the href (must be an `a` tag in your template) as a link to the event itself. (`event.htmlLink`)\n\n`.event-all-day` - adds a `data-all-day` attribute to the element with a value of true or false for styling purposes like hiding the time.\n\n`.event-date` - The event's start date and time. (`event.start.dateTime || event.start.date`)\n\n### .event-date locales and options\n\nThe replaced value of `.event-date` uses [date.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString). The `locales` and `options` parameters are best documented under the [Intl.DateTimeFormat() constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat).\n\nBy default, if the calendar start date does not include a time (\"All Day\" is checked) then the date shown in `.event-date` elements will be the result of calling `.toLocaleString(undefined, { month: \"short\", day: \"numeric\", year: \"numeric\" })`\n\nIn the US, that might produce the string `Apr 7, 2023`. In Japan, it may return `2023年4月7日`. Order of the options does not matter.\n\nBy default, if the calendar start date also includes a time, the default options are:\n\n```\nmonth: \"short\",\nday: \"numeric\",\nyear: \"numeric\",\nhour: \"numeric\",\nminute: \"2-digit\"\n```\n\nwhich may produce `Apr 7, 2023, 9:21 PM` in the US or `2023年4月7日 21:21` in Japan.\n\n#### data-locales\n\nTo set a specific locale, pass a space separated list of locale tags like so:\n\n`\u003cspan class=\"event-date\" data-locales=\"en-US\"\u003e\u003c/span\u003e`\n\nor\n\n`\u003cspan class=\"event-date\" data-locales=\"iu-Cans-CA es-PR\"\u003e\u003c/span\u003e`\n\nthe first tag in the list that's suported by the browser will be chosen.\n\n#### data-options\n\nBrowsers do not support all combinations of [the possible options options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#datestyle) but many work as expected.\n\nYou can use the `data-options` attribute to customize the output.\n\nOptions in the mdn documentation linked above can be placed in the attribute in a space separated list to include them in the output.\n\n```html\n\u003cspan class=\"event-date\" data-locales=\"en-US\" data-options=\"month day weekday\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-locales=\"en-US\" data-options=\"weekday\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-locales=\"en-US\" data-options=\"year\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-locales=\"en-US\" data-options=\"month\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-locales=\"en-US\" data-options=\"day\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-locales=\"en-US\" data-options=\"hour\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-locales=\"en-US\" data-options=\"hour hourCycle:h24\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-locales=\"en-US\" data-options=\"hour hour12:false\"\u003e\u003c/span\u003e\n```\n\nThese are the most common combinations:\n```\ndata-options=\"weekday year month day hour minute second\"\ndata-options=\"weekday year month day\"\ndata-options=\"year month day\"\ndata-options=\"year month\"\ndata-options=\"month day\"\ndata-options=\"hour minute second\"\ndata-options=\"hour minute\"\n```\n\nDefaults are used for each option. To choose specifc variants of an option, add a colon immediately after the option property and its desired value imediately after that.\n\n```html\n\u003cspan class=\"event-date\" data-options=\"month:short day:2-digit weekday:short\"\u003e\u003c/span\u003e\n\n\u003cspan class=\"event-date\" data-options=\"hour hourCycle:h24\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-options=\"hour hour12:false\"\u003e\u003c/span\u003e\n\n\u003cspan class=\"event-date\" data-options=\"weekday:long\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-options=\"weekday:short\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-options=\"weekday:narrow\"\u003e\u003c/span\u003e\n\n\u003cspan class=\"event-date\" data-options=\"year:numeric\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-options=\"year:2-digit\"\u003e\u003c/span\u003e\n\n\u003cspan class=\"event-date\" data-options=\"month:numeric\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-options=\"month:2-digit\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-options=\"month:long\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-options=\"month:short\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-options=\"month:narrow\"\u003e\u003c/span\u003e\n\n\u003cspan class=\"event-date\" data-options=\"day:numeric\"\u003e\u003c/span\u003e\n\u003cspan class=\"event-date\" data-options=\"day:2-digit\"\u003e\u003c/span\u003e\n```\n\n### data-find\n\nCopy text and urls from links in the event's description (.event-body) into other parts of the template.\n\nGiven this event description:\n\nQA Con 2023 [register here](https://bitovi.com) if you wish.\n[Check out Andrew's meme of the day here](https://i.imgur.com/i7eZZ5X.jpg).\n\nthe following event template\n\n```html\n\u003ccalendar-events\u003e\n  \u003ctemplate\u003e\n    \u003cdiv class=\"calendar-events-event\"\u003e\n      \u003ca data-find=\"register\"\u003e\u003c/a\u003e\n      \u003cimg data-find=\"meme\"\u003e\n\n      \u003cp class='event-body'\u003e\u003c/p\u003e\n      \u003ca data-find=\"register\"\u003eRegister Here!\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/calendar-events\u003e\n```\n\nwould produce:\n\n```html\n\u003cdiv class=\"calendar-events-event\"\u003e\n  \u003ca data-find=\"register\" href=\"https://bitovi.com\"\u003eregister here\u003c/a\u003e\n  \u003cimg data-find=\"meme\" src=\"https://i.imgur.com/i7eZZ5X.jpg\" alt=\"Check out Andrew's meme of the day here\"\u003e\n\n  \u003cp class='event-body'\u003e\n    QA Con 2023 \u003ca href=\"https://bitovi.com\"\u003eregister here\u003c/a\u003e if you wish.\u003cbr\u003e\n    \u003ca href=\"https://i.imgur.com/i7eZZ5X.jpg\"\u003eCheck out Andrew's meme of the day here\u003c/a\u003e.\n  \u003c/p\u003e\n  \u003ca data-find=\"register\" href=\"https://bitovi.com\"\u003eRegister Here!\u003c/a\u003e\n\u003c/div\u003e\n```\n\nif you want the copied data to be removed from the event-body, add `data-cut` flag to the `data-find` elements:\n\n```html\n\u003ccalendar-events\u003e\n  \u003ctemplate\u003e\n    \u003cdiv class=\"calendar-events-event\"\u003e\n      \u003ca data-find=\"register\" data-cut\u003e\u003c/a\u003e\n      \u003cimg data-find=\"meme\" data-cut\u003e\n\n      \u003cp class='event-body'\u003e\u003c/p\u003e\n      \u003ca data-find=\"register\"\u003eRegister Here!\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/calendar-events\u003e\n```\n\nbecomes:\n\n```html\n\u003cdiv class=\"calendar-events-event\"\u003e\n  \u003ca data-find=\"register\" href=\"https://bitovi.com\"\u003eregister here\u003c/a\u003e\n  \u003cimg data-find=\"meme\" src=\"https://i.imgur.com/i7eZZ5X.jpg\" alt=\"Check out Andrew's meme of the day here\"\u003e\n\n  \u003cp class='event-body'\u003e\n    QA Con 2023  if you wish.\u003cbr\u003e\n    .\n  \u003c/p\u003e\n  \u003ca data-find=\"register\" href=\"https://bitovi.com\"\u003eRegister Here!\u003c/a\u003e\n\u003c/div\u003e\n```\n\nCoordinate with your marketing team on what keywords your templates can expect to find in the link text within your event descriptions.\n\nUsing either above template, if the event description was instead:\n\n\"2077 DLC marketing campaign starts in June!\"\n\nthe result would be:\n\n```html\n\u003cdiv class=\"calendar-events-event\"\u003e\n  \u003cp class='event-body'\u003e\n    2077 DLC marketing campaign starts in June!\n  \u003c/p\u003e\n\u003c/div\u003e\n```\n\n(any links without an `href` or images without a `src` are removed from the output)\n\nYou can specify default `href` / `src` attributes in the template, `data-find` will override them if found, otherwise the defaults will remain in the final output.\n\nIf a link in the template uses the `.event-url` class AND `data-find`, the event url will act as a default href value and only be overwritten if data-find matched. If not matched, the link will remain in the output with the event-url.\n\nDefault textContent of a link will NOT be overwritten by `data-find`.\n\nDefault alt text of an image WILL be overwritten by `data-find`.\n\nFinally, if your marketing team wants to be more flexible with their link text in the event descriptions, you can specify multiple find terms in your template with a space-separated-list of terms:\n\n```html\n...\n\u003ca data-find=\"register registration\"\u003e\u003c/a\u003e\n...\n```\n\nThere should not be more than one link in the event's description whose text contains a `data-find` query term (case insensitive), but if there is, only the first one is used.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitovi%2Fcalendar-events-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitovi%2Fcalendar-events-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitovi%2Fcalendar-events-component/lists"}