@odyssoft/calendar

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

Installation

npm install @odyssoft/calendar

Usage

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[] | [] | | 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. When true start and end date will need to be DateType | | calendar | yes | CalendarType | | | description | no | string | | | end | yes | DateType | DateTimeType | | | id | yes | string | | | start | yes | DateType | DateTimeType | | | title | yes | string | |

DateType

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

DateTimeType

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