---
route: /components/scheduler
menu: Components
---

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

# Scheduler

Datetime picker with availability using [iCal](https://icalendar.org/).

## Properties

<Props of={Scheduler} />

## MML string

```xml
<mml name="massage">
  <scheduler name="appointment" duration="30" interval="30" selected="2020-11-16T10:30:00.000Z"/>
  <button name="action" value="reserve">Reserve</button>
</mml>
```

## Basic usage

<Playground>
  <MML
    source={`
    <mml type="card">
      <scheduler 
        name="appointment" 
        duration="30" 
        timeInterval="15"
        selected="2020-11-16T10:30:00.000Z"
      />
      <button name="action" value="reserve">Reserve</button>
    </mml>
  `}
  />
</Playground>

## Full Day

<Playground>
  <MML
    source={`
      <mml type="card">
        <scheduler name="appointment" fullDay="true" />
        <button name="action" value="reserve" icon="add_alarm">Book</button>
      </mml>
    `}
  />
</Playground>

## With ICal availability URL

Notice Dec 25 and Dec 26 are removed from the dates

<Playground>
  <MML
    source={`
    <mml type="card">
      <scheduler
        name="appointment"
        duration="30"
        timeInterval="40"
        selected="2020-12-24T10:30:00.000Z"
        icalAvailability="https://getstream.github.io/mml-react/public/netherlands.ics"
      />
      <button name="action" value="reserve">Reserve</button>
    </mml>
  `}
  />
</Playground>