{"id":13568082,"url":"https://github.com/mbarde/volto-fullcalendar-block","last_synced_at":"2025-05-13T13:09:48.302Z","repository":{"id":114770195,"uuid":"384070484","full_name":"mbarde/volto-fullcalendar-block","owner":"mbarde","description":"FullCalendar Block for Volto","archived":false,"fork":false,"pushed_at":"2024-08-20T15:10:56.000Z","size":3227,"stargazers_count":6,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T04:35:07.319Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/mbarde.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-08T09:24:59.000Z","updated_at":"2024-06-27T13:04:12.000Z","dependencies_parsed_at":"2024-04-22T09:57:41.443Z","dependency_job_id":"d41a0c0f-033c-486d-91fc-e15b9023d80c","html_url":"https://github.com/mbarde/volto-fullcalendar-block","commit_stats":{"total_commits":54,"total_committers":4,"mean_commits":13.5,"dds":0.4814814814814815,"last_synced_commit":"60db2fcf568a705f32e929d65fcab5e06faaa493"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbarde%2Fvolto-fullcalendar-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbarde%2Fvolto-fullcalendar-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbarde%2Fvolto-fullcalendar-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbarde%2Fvolto-fullcalendar-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mbarde","download_url":"https://codeload.github.com/mbarde/volto-fullcalendar-block/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948418,"owners_count":21988957,"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-08-01T14:00:19.770Z","updated_at":"2025-05-13T13:09:48.255Z","avatar_url":"https://github.com/mbarde.png","language":"JavaScript","funding_links":[],"categories":["Add-ons"],"sub_categories":[],"readme":"# volto-fullcalendar-block\n\nBlock for [Volto](https://github.com/plone/volto) to display events from an iCal/ics file in a [FullCalendar](https://fullcalendar.io/).\n\n## Features\n\n### Listing block variation for Event-ish content-types\n\nhttps://user-images.githubusercontent.com/4497578/154287664-6153ae22-27dd-48ed-984a-93817ef70431.mp4\n\n* Display content-types with behavior `plone.eventbasic` within a listing block as calendar (for customization see below)\n* In order to display recurrent events, you need to add a catalog index and metadata column:\n\n```XML\n\u003c?xml version=\"1.0\"?\u003e\n\u003cobject name=\"portal_catalog\"\u003e\n    \u003cindex name=\"recurrence\" meta_type=\"FieldIndex\"\u003e\n        \u003cindexed_attr value=\"recurrence\"/\u003e\n    \u003c/index\u003e\n    \u003ccolumn value=\"recurrence\"/\u003e\n\u003c/object\u003e\n```\nMore details checkout the following link: https://5.docs.plone.org/external/plone.app.dexterity/docs/advanced/catalog-indexing-strategies.html#adding-new-indexes-and-metadata-columns\n\n### Calendar block for remote events\n\nhttps://user-images.githubusercontent.com/4497578/154287676-295386f9-faac-47e8-b0ef-f017f8c80dde.mp4\n\n* Specifiy an URL to an .ics/.iCal file -\u003e Contained events are displayed in the calendar using FullCalendars [iCalendar plugin](https://fullcalendar.io/docs/icalendar)\n\n### Configure FullCalendar toolbar via block settings\n\nhttps://user-images.githubusercontent.com/4497578/154287799-eca71fe0-4ce2-4e9d-8921-9729e191f2fc.mp4\n\n### Customize FullCalendar options\n\nIf you want to add props to the FullCalendar component (see: https://fullcalendar.io/docs/react#props), you can specify them in this config entry: \n\n```Javascript\nconfig.settings.fullcalendar = {\n  additionalOptions: {\n    ...\n  }\n}\n```\n\n**Example: Custom event renderer to display descriptions as popups**\n\n(see: https://fullcalendar.io/docs/react#content-injection)\n\n```Javascript\nimport { Popup } from 'semantic-ui-react';\nimport '@plone/volto/config';\n\nexport default function applyConfig(config) {\n  config.settings.fullcalendar = {\n    additionalOptions: {\n      eventContent: (eventInfo) =\u003e {\n        const MAX_LEN = 500;\n        const description =\n          (eventInfo.event.extendedProps?.description || '').length \u003e MAX_LEN\n            ? eventInfo.event.extendedProps.description.slice(0, MAX_LEN) +\n              ' ...'\n            : eventInfo.event.extendedProps.description;\n        return (\n          \u003c\u003e\n            \u003cdiv className=\"fc-event-time\"\u003e{eventInfo.timeText}\u003c/div\u003e\n            {description ? (\n              \u003cPopup\n                content={description}\n                trigger={\n                  \u003cdiv className=\"fc-event-title\"\u003e{eventInfo.event.title}\u003c/div\u003e\n                }\n                wide=\"very\"\n              /\u003e\n            ) : (\n              \u003cdiv className=\"fc-event-title\"\u003e{eventInfo.event.title}\u003c/div\u003e\n            )}\n          \u003c/\u003e\n        );\n      },\n    },\n  };\n  return config;\n}\n```\n\n### Customize listing block variation\n\nOnly items which have an attribute `start` will translate into calendar entries. (You can enable the behavior `plone.eventbasic` if you want this for your custom content-type.)\n\nIf you need to perform some data transformation before passing the listing items into the FullCalendar, you can build a wrapper around the listing component of this addon, like that:\n\n1. Adapt `tsconfig.js`:\n\n```Javascript\n{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@mbarde/volto-fullcalendar-block-original\": [\n        \"../node_modules/@mbarde/volto-fullcalendar-block/src\"\n      ]\n    }\n}\n```\n\n2. Create `src/customizations/@mbarde/volto-fullcalendar-block/components/manage/Blocks/Listing/FullCalendar.jsx` (see https://training.plone.org/mastering-plone/volto_overrides.html#component-shadowing)\n\n```Javascript\n/* EXAMPLE Wrapper around the original component to transform offers into events.\n   (One offer can have multiple dates.)   \n*/\n// eslint-disable-next-line import/no-unresolved\nimport FullCalendarListingOrig from '@mbarde/volto-fullcalendar-block-original/components/manage/Blocks/Listing/FullCalendar';\n\nconst FullCalendarListing = ({ items, ...props }) =\u003e {\n  const allEvents = items.flatMap((item) =\u003e {\n    if (item['@type'] !== 'Offer') return item;\n    let itemEvents = item.offer_dates.items\n      .filter((od) =\u003e od.start \u0026\u0026 od.end)\n      .map((od) =\u003e {\n        return {\n          '@id': item['@id'],\n          title: item.title,\n          description: item.description,\n          start: od.start,\n          end: od.end,\n        };\n      });\n    return itemEvents;\n  });\n  return \u003cFullCalendarListingOrig items={allEvents} {...props} /\u003e;\n};\n\nexport default FullCalendarListing;\n\n```\n\n(Wrapper imports the original component and passes the transformed items array as property to it.)\n\n## Setup\n\n### Add volto-fullcalendar-block to your Volto project\n\n1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone\n\n   For example [Docker container](https://6.docs.plone.org/install/containers/) via command:\n\n   ```\n   docker run --name plone -p 8080:8080 -e SITE=Plone -e PROFILES=\"profile-plone.restapi:blocks\" plone\n   ```\n\n2. Start Volto frontend\n\n- If you already have a volto project, just update `package.json`:\n\n  ```JSON\n  \"addons\": [\n      \"@mbarde/volto-fullcalendar-block\"\n  ],\n\n  \"dependencies\": {\n      \"@mbarde/volto-fullcalendar-block\": \"*\"\n  }\n  ```\n\n- If not, create one:\n\n  ```\n  npm install -g yo @plone/generator-volto\n  yo @plone/volto my-volto-project --addon @mbarde/volto-fullcalendar-block\n  cd my-volto-project\n  ```\n\n3. Install new add-ons and restart Volto:\n\n   ```\n   yarn\n   yarn start\n   ```\n\n4. Go to http://localhost:3000\n\n## Tests\n\nExpects Volto to run on `http://localhost:3000` by default (see `cypress.json`).\n\nRun tests: `yarn cypres:run`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbarde%2Fvolto-fullcalendar-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmbarde%2Fvolto-fullcalendar-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbarde%2Fvolto-fullcalendar-block/lists"}