Migrating from MDX1 to MDX2 stories | Storybook | Page 1

## With view control

An example using the view control with a custom hook provided through the Calendar

The `useCalendarHandlers` hook provides the attributes:

| attribute         | type                                              | description |
| -                 | -                                                 | - |
| date              | Date                                              | The current date |
| view              | CalendarView                                      | The current `CalendarView` |
| persistView       | (view: CalendarView, date?: Date) => void         | A method to persist the view in the localStorage, this sets the new view and/or date |
| navLinkDayClick   | (data: Date) => void                              | A helper for the day click event, this sets the new date when occurs a day click | 
| handleViewControl | (action: CalendarView \| DateOperation ) => void  | A method for navigation, accepts a `CalendarView` or a `DateOperation` |
| setCalendarRef    | (ref: FullCalendar) => void                       | A helper to set the calendar ref (It is required for several operations) | 
| rerenderEvents    | () => void                                        | Forces a re-render |

The `CalendarView` and `DateOperation` are enums:

| CalendarView  | DateOperation |
| -             | -             |
| Day           | Today         |
| Week          | NextDate      |
| Month         | PrevDate      |

To instantiate the hook you must provide a `localViewHandler`, for this you should use the `createLocalViewHandler` that receives an object with the shape:

```ts
{
  id: string,
  defaultView: CalendarView
}

<pre>
<code className="language-tsx">
{${ withViewControlSnippet }}
</code>
</pre>

<Preview>
<Story name="with view control">
{ withViewControlComp }
</Story>
</Preview>


## With Custom Event Cards

<pre>
  <code className="language-tsx">
    {`${ withCustomCardsSnippet }`}
  </code>
</pre>

<Preview>
  <Story name="with view custom event card">
    { withCustomCardsComp }
  </Story>
</Preview>

## With Zoom controls

A small snippet with the usage of useZoomProps:

<pre>
  <code className="language-tsx">
  {`${ snippetUseZoomProps }`}
  </code>
</pre>

<Preview>
  <Story name="with zoom controls">
    { withZoomControl }
  </Story>
</Preview>


# Props

<Props of={ Calendar } />

#Migrating from MDX1 to MDX2 stories