open-index/open-npm huggingface dataset:
npm package: @odyssoft/calendar
Description: Full screen calendar component built using React, Storybook, Material UI, Material UI Icons and Emotion
Author: Seann Hewitson
Latest version: 1.0.4

# @odyssoft/calendar

Full screen calendar built using React, storybook, Mui, Mui-icons &amp; emotion

![Preview](/images/preview.png?raw=true "Full Preview")

## Installation

```bash
npm install @odyssoft/calendar
```

## Usage

```tsx
import { Calendar } from '@odyssoft/calandar'

export const MyComponent = () => (
  <div style={{ display: 'flex', height: '100vh', width: '100vw' }}>
    <Calendar />
  </div>
)
```

## Props

| Prop          | Required | Values                                   | Default Value                    |
| ------------- | -------- | ---------------------------------------- | -------------------------------- |
| data          | no       | [CalendarEvent](#CalendarEvent-type)[]   | []                               |
| defaultView   | no       | 'day' \| 'week' \| 'month' \| 'year'     | 'month'                          |
| editable      | no       | true \| false                            | false                            |
| navigation    | no       | true \| false                            | false                            |
| onEventChange | no       | callback function                        | undefined                        |
| sidebar       | no       | true \| false                            | false                            |
| views         | no       | ('day' \| 'week' \| 'month' \| 'year')[] | ['day', 'week', 'month', 'year'] |

---

## CalendarEvent type

| Attribute   | Required | Values                                                 | Default Value | Description                                                                                                                                                 |
| ----------- | -------- | ------------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| allDay      | no       | boolean                                                | false         | If false or undefined, start and end date will need to be [DateTimeType](#DateTimeType). When true start and end date will need to be [DateType](#DateType) |
| calendar    | yes      | [CalendarType](#CalendarType)                          |               |
| description | no       | string                                                 |               |
| end         | yes      | [DateType](#DateType) \| [DateTimeType](#DateTimeType) |               |
| id          | yes      | string                                                 |               |
| start       | yes      | [DateType](#DateType) \| [DateTimeType](#DateTimeType) |               |
| title       | yes      | string                                                 |               |

---

## DateType

string in the date format 'DD-MM-YYYY'

## DateTimeType

string in the date format 'DD-MM-YYYY HH:mm