---
title: "Development"
manual: "Fullcalendar"
version: "main"
permalink: "https://docs.typo3.org/permalink/mediaessenz/fullcalendar:development@main"
source: "Reference/Development/Index.rst"
rendered: "2026-10-25T19:39:52+00:00"
---

# Development {#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](https://github.com/lochmueller/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**

```text
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 {#build}

**In the directory of the extension**

```bash
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`](https://docs.typo3.org/m/typo3/reference-coreapi/14.3/en-us/ExtensionArchitecture/FileStructure/Resources/Private/Index.html#file-extension-resources-private-templates-controllername-actionname-fluid-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.