Scheduler

Datetime picker with availability using iCal.

Properties

name

string

required

selected

string | undefined

dateInterval

number | undefined

timeInterval

number | undefined

dateFormat

string | undefined

ddd MMM DD

timeFormat

string | undefined

hh:mm A

duration

number | undefined

icalAvailability

string | undefined

fullDay

boolean | undefined

MML string

<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

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

17:27 pm

<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>
`}
/>

<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>
`}
/>

Full Day

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

17:27 pm

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

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

With ICal availability URL

Notice Dec 25 and Dec 26 are removed from the dates

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

17:27 pm

<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>
`}
/>

<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>
`}
/>

Scheduler

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

MML string

Basic usage

Full Day

With ICal availability URL

Properties