---
id: calendar
title: Calendar
sidebar_label: Calendar
---

import { some } from 'fp-ts/lib/Option'
import moment from 'moment'
import uuid from 'uuid'

import { ShowCase } from '../docComponents/ShowCase'

import { Calendar } from 'src/common/monoblocks/calendar/Calendar'
import {
  Event,
  SchedulerType,
} from 'src/common/monoblocks/calendar/Calendar.types'
import {
  SchedulerContext,
  useScheduler,
} from 'src/common/monoblocks/scheduler/Scheduler.hooks'

export const event = {
  id: uuid.v4(),
  schedulerType: SchedulerType.Transient,
  title: 'New Session 1',
  start: moment(new Date())
    .hour(9)
    .toDate(),
  end: moment(new Date())
    .hour(16)
    .toDate(),
}

export const CalendarExample = () => {
  const schedulerRedux = useScheduler({ event: some(event) })
  return (
    <SchedulerContext.Provider value={schedulerRedux}>
      <Calendar events={[event]} />
    </SchedulerContext.Provider>
  )
}

:::caution Issues

- Renders modal on mount

:::

<ShowCase>
  <CalendarExample />
</ShowCase>