Development

The frontend is written in TypeScript with Vue 3. The sources are in Resources/Private/TypeScript and transpiled by Vite with vite-plugin-typo3 into Resources/Public. The built files are part of the repository and the release, Resources/Private/TypeScript and the build configuration are not (see .gitattributes).

Structure of the frontend sources

Build/ViteEntrypoints.json              Entrypoint of the build
Resources/Private/TypeScript/
    fullcalendar.ts                     Mounts a Vue app for every calendar
    App.vue                             The calendar, the event modal and the filter modal
    components/                         Components of the category filter
    styles/                             SCSS (colors of the categories, filter)
    types/                              Types of the configuration
Resources/Public/
    JavaScript/fullcalendar.js          Built script (ES module)
    Css/fullcalendar.css                Built styles
    Fonts/                              Bootstrap Icons font

Build

In the directory of the extension

npm install
npm run build        # type check (vue-tsc) and build
npm run watch        # rebuild on changes
npm run typecheck
npm test             # JavaScript tests (Node.js 22.18 or newer)

The calendar reads its configuration from global variables, which are written by the template Resources/Private/Templates/Calendar/App.html: the ids of all calendars in fullcalendarids and for every calendar a variable with this id and the properties settings and lang.

Note

FullCalendar is kept at version 6, because the plugins of version 7 are not yet released as stable versions. vue-tsc requires TypeScript 6 as long as it doesn't support TypeScript 7.