---
route: /components/add-to-calendar
menu: Components
---

import { Playground, Props } from 'docz';
import { AddToCalendar } from './AddToCalendar.tsx';
import { Text } from './Text.tsx';

# AddToCalendar

It allows to define an event that a user can quickly add to her/his own calendar, we support Google, Apple and Outlook calendars.

Internally this component uses [`Card`](/components/card), [`CardHeader`](/components/card-header) and [`ButtonList`](/components/button-list), therefore styles are inherited from those.

## Properties

<Props of={AddToCalendar} />

## MML string

```xml
<mml>
  <add_to_calendar
    title="Christmas party"
    start="2020-12-24T18:00:00.148Z"
    end="2020-12-26T15:00:00.148Z"
    description="The gift is your presence"
    location="Boulder, CO"
  />
</mml>
```

## Usage

### Basic

<Playground>
  <MML
    source={`
    <mml>
      <add_to_calendar 
        title="Christmas party" 
        start="2020-12-24T18:00:00.148Z" 
        end="2020-12-26T15:00:00.148Z" 
        description="The gift is your presence" 
        location="Boulder, CO"
      />
    </mml>
  `}
  />
</Playground>