npm package: @licuido-ui/ui_full-calender
Description: FullCalender - FullCalender component,you can add event, edit and delete the event and you may able view in month ,week and day view, Mostly you can customize the calender using css `import '@licuido-ui/ui_full-calender/dist/index.css'`
Latest version: 0.0.2

# Calender

FullCalender - FullCalender component,you can add event, edit and delete the event and you may able view in month ,week and day view, Mostly you can customize the calender using css `import '@licuido-ui/ui_full-calender/dist/index.css'`

### Author

- @author Arunachalam R <arunachalam@crayond.co>

## Link

[Story Book Link Calender](http://216.48.182.148:3333/?path=/docs/components-calender--docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_full-calender
```

## Import component

```jsx
import { FullCalender } from '@licuido-ui/ui_full-calender';
```

## Usage

```jsx
<FullCalender
  allEvent={events}
  eventsData={events}
  eventCategories={[
    { name: 'Default Calendar', color: '#DBE9FF' },
    { name: 'Event Planning', color: '#DBE9FF' },
    { name: 'Campaign', color: '#F4DBFF' },
    { name: 'Birthday Calendar', color: '#DBFFE5' },
  ]}
  calenderList={[
    { calenderTitle: 'Default Calendar' },
    { calenderTitle: 'Event Planning' },
    { calenderTitle: 'Campaign' },
    { calenderTitle: 'Birthday Calendar' },
  ]}
  nationalLeaves={[
    { date: '2023-06-14', title: 'National Holiday' },
  ]}
  styleProps= {
      layoutBorderStyle: {
        borderColor: '#E9E9E9',
      },
      beforeMonthStyle: {
        backgroundColor: '#FAFAFA',
      },
      todayDateStyle: {
        backgroundColor: '#eaeaea',
      },
      addEventStyle: {
        color: '#665CD7',
      },
      tabStyle: {
        backgroundColor: '#665cd7',
        color: '#fff',
        borderColor: '##665cd7',
        fontSize: '14px',
        fontWeight: '600',
      },
      headStyle: {
        color: '#000',
        fontSize: '14px',
        fontWeight: '500',
      },
      fontFamily: {
        fontFamily: 'Poppins, sans-serif',
      },
    }
    remainderOption={{ value: 'min', label: 'Min' }
      { value: 'hour', label: 'Hours' }
      { value: 'months', label: 'Months' }}
/>
```
## Image

![alt text](./assets/calender.png)

## Samplecode

```jsx
<FullCalender
  allEvent={events}
  eventsData={events}
  eventCategories={[
    { name: 'Default Calendar', color: '#DBE9FF' },
    { name: 'Event Planning', color: '#DBE9FF' },
    { name: 'Campaign', color: '#F4DBFF' },
    { name: 'Birthday Calendar', color: '#DBFFE5' },
  ]}
  calenderList={[
    { calenderTitle: 'Default Calendar' },
    { calenderTitle: 'Event Planning' },
    { calenderTitle: 'Campaign' },
    { calenderTitle: 'Birthday Calendar' },
  ]}
  nationalLeaves={[
    { date: '2023-06-14', title: 'National Holiday' },
  ]}
  styleProps= {
      layoutBorderStyle: {
        borderColor: '#E9E9E9',
      },
      beforeMonthStyle: {
        backgroundColor: '#FAFAFA',
      },
      todayDateStyle: {
        backgroundColor: '#eaeaea',
      },
      addEventStyle: {
        color: '#665CD7',
      },
      tabStyle: {
        backgroundColor: '#665cd7',
        color: '#fff',
        borderColor: '##665cd7',
        fontSize: '14px',
        fontWeight: '600',
      },
      headStyle: {
        color: '#000',
        fontSize: '14px',
        fontWeight: '500',
      },
      fontFamily: {
        fontFamily: 'Poppins, sans-serif',
      },
    }
    remainderOption={{ value: 'min', label: 'Min' }
      { value: 'hour', label: 'Hours' }
      { value: 'months', label: 'Months' }}
    select={0}
    allEvent={[]}
    eventsData={[]}
    editListValue={''}
    onEventsDelete={()=>onEventsDelete()}
    handleEventChange={()=>handleEventChange()}
    onEventsEdit={()=>onEventsEdit()}
    OnEventAdd={()=>OnEventAdd()}
    onCalenderListClick={()=>onCalenderListClick()}
    addCalenderList={()=>addCalenderList()}
    calenderList={[]}
    closeEventDialog={()=>closeEventDialog()}
    onEventDialogChange={()=>onEventDialogChang(e)}
    eventDialogTitle={''}
    eventDialogDescription={''}
    selectedCategoryDialog={''}
    startTimeDialog={''}
    endTimeDialog={''}
    eventRemainder={''}
    selectedDay={''}
    onSelectEventFunc={()=>onSelectEventFunc()}
    onCustomizeEvent={()=>onCustomizeEvent()}
/>
```
### Props

  | **Name**                     | **Description**                          | **Default** | **Control**                                                                                                                                                                                                                                     |
  | ---------------------------- | ---------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | **select**                   | number                                   | \-          | Set object                                                                                                                                                                                                                                      |
  | **CalenderStyle**            |                                          | \-          | CalenderStyle : \{height : "100vh"width : "100%"\}                                                                                                                                                                                              |
  | **CommonLeaves**             | array                                    | \-          | CommonLeaves : \[0 : "saturday"1 : "sunday"\]                                                                                                                                                                                                   |
  | **calenderTitle**            |                                          | \-          | Calender                                                                                                                                                                                                                                        |
  | **nationalLeaves**           | National Leave is array of object        | \-          | nationalLeaves : \[0 : \{\.\.\.\} 2 keys1 : \{\.\.\.\} 2 keys2 : \{\.\.\.\} 2 keys3 : \{\.\.\.\} 2 keys\]                                                                                                                                       |
  | **eventCategories**          | EventCategories is array of object       | \-          | eventCategories : \[0 : \{\.\.\.\} 2 keys1 : \{\.\.\.\} 2 keys2 : \{\.\.\.\} 2 keys3 : \{\.\.\.\} 2 keys\]                                                                                                                                      |
  | **calenderList**             | CalenderList is array of object          | \-          | calenderList : \[0 : \{\.\.\.\} 1 key1 : \{\.\.\.\} 1 key2 : \{\.\.\.\} 1 key3 : \{\.\.\.\} 1 key\]                                                                                                                                             |
  | **styleProps**               | Style Object                             | \-          | styleProps : \{layoutBorderStyle : \{\.\.\.\} 1 keybeforeMonthStyle : \{\.\.\.\} 1 keytodayDateStyle : \{\.\.\.\} 1 keyaddEventStyle : \{\.\.\.\} 1 keytabStyle : \{\.\.\.\} 5 keysheadStyle : \{\.\.\.\} 3 keysfontFamily : \{\.\.\.\} 1 key\} |
  | **remainderOption**          | RemainderOption is array of object       | \-          | remainderOption : \[0 : \{\.\.\.\} 2 keys1 : \{\.\.\.\} 2 keys2 : \{\.\.\.\} 2 keys\]                                                                                                                                                           |
  | **calenderTabId**            | This for calender tab view  Bdd testing  | \-          |
  | **calenderTabdataTestid**    | This for calender tab view  Bdd testing  | \-          |
  | **calenderTabClassname**     | This for calender tab view Bdd testing   | \-          |
  | **calenderlistBddName**      | This for calender list view  Bdd testing | \-          |
  | **calenderlistBddClassName** | This for calender list view  Bdd testing | \-          |
  | **calenderlistBddId**        | This for calender list view  Bdd testing | \-          |
  | **nationalLeaveBgColor**     | string                                   | \-          | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);                                                                                                                                                                                 |
  | **calenderActiveBgColor**    | string                                   | \-          | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);                                                                                                                                                                                 |
  | **calenderActiveColor**      | string                                   | \-          | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);                                                                                                                                                                                 |
  | **calenderListName**         | string                                   | \-          | My Calender                                                                                                                                                                                                                                     |
  | **eventTitleHeadStyle**      | \{\}                                     | \-          | eventTitleHeadStyle : \{fontSize : "14px"color : "\#000"\}                                                                                                                                                                                      |
  | **SearchCalender**           | string                                   | \-          |
  | **onCalenderSearch**         | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **SearchCalenderList**       | string                                   | \-          |
  | **onCalenderListSearch**     | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **customCalenderListSx**     | \{\}                                     | \-          | customCalenderListSx : \{\}                                                                                                                                                                                                                     |
  | **customHeadStyle**          | string                                   | \-          | customHeadStyle : \{color : "\#665CD7"ml : "8px"\}                                                                                                                                                                                              |
  | **addEventBtnSx**            | string                                   | \-          | addEventBtnSx : \{backgroundColor : "\#665CD7"\}                                                                                                                                                                                                |
  | **onCalenderListClick**      | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **onEventsDelete**           | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **onEventsEdit**             | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **OnEventAdd**               | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **onEventDialogChange**      | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **onSelectEventFunc**        | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **onSaveCalenderList**       | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **onDeleteCalenderList**     | function                                 | \-          | \-                                                                                                                                                                                                                                              |
  | **onCustomizeEvent**         | function                                 | \-          | \-                                                                                                                                                                                                                                              |