---
title: Overview
description: Add WebMCP calendar tools to an existing FullCalendar React app without replacing your backend, database, or calendar UI.
---

Expose FullCalendar workflows to WebMCP agents in an existing React app — without replacing your backend, database, or calendar UI.

[View demo](https://protocoltooling.com/integrations/fullcalendar/demo)

```package-install
npm install @protocoltooling/fullcalendar
```

## How it fits your app

You keep ownership of event persistence. The integration registers calendar tools in the browser and routes agent reads and writes through your existing operations:

```ts
useFullCalendarWebMCP({
  calendarRef,
  events: repository, // your list / get / create / update / delete
  onEventsChanged: refreshEvents,
});
```

```text
Agent ⇄ WebMCP tools ⇄ your repository ⇄ your DB / API / state
                              ↓
                       onEventsChanged
                              ↓
                         FullCalendar
```

Your app remains the source of truth. See [Repository](/integrations/fullcalendar/concepts/repository) for the persistence model and [Security](/integrations/fullcalendar/concepts/security) for auth boundaries.

## What you get

Six structured calendar tools for read/create/update/delete workflows. See [Agent tool workflows](/integrations/fullcalendar/concepts/agent-tools) for the tool list and common compositions.

## Next step

<CardGroup cols={2}>
  <Card title="Quickstart" href="/integrations/fullcalendar/quickstart" icon="rocket">
    Install, connect your repository, register the hook, and verify.
  </Card>
  <Card title="Existing app" href="/integrations/fullcalendar/guides/existing-app" icon="layers">
    Drop the integration into a calendar you already ship.
  </Card>
</CardGroup>