# TypeScript Support

<script>
  import { examplesTreeUrl, pricingUrl } from '$docs-config';
</script>

It is possible to use FullCalendar and [Scheduler]({pricingUrl}) with **TypeScript**, a type-aware superset of the JavaScript language that compiles down to JavaScript.<!--more--> TypeScript is great for the maintainability of large JavaScript projects, however, it is probably overkill for smaller projects. [Learn more about TypeScript &raquo;](https://www.typescriptlang.org/)

You will then need to set up some sort of build system that compiles TypeScript to JavaScript. You can use the `tsc` compiler directly or you can use a more sophisticated system like [Vite](https://vite.dev/).

- [View the **FullCalendar + TypeScript + Vite** example repo &raquo;]({examplesTreeUrl}/typescript)
- [View the **FullCalendar Scheduler + TypeScript + Vite** example repo &raquo;]({examplesTreeUrl}/typescript-scheduler)

Once you have your build system set up, you can begin to write type-aware code like this:

**example.ts**:

```ts
import { Calendar } from 'fullcalendar';
import themePlugin from "fullcalendar/themes/monarch";
import dayGridPlugin from 'fullcalendar/daygrid';

// stylesheets
import 'fullcalendar/skeleton.css';
import 'fullcalendar/themes/monarch/theme.css';
import 'fullcalendar/themes/monarch/palettes/purple.css';

document.addEventListener('DOMContentLoaded', function() {
  let calendarEl: HTMLElement = document.getElementById('calendar')!;

  let calendar = new Calendar(calendarEl, {
    plugins: [themePlugin, dayGridPlugin]
    // options here
  });

  calendar.render();
});
```