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 [email protected]

Link

Story Book Link Calender

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_full-calender

Import component

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

Usage

<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

Samplecode

<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 | - | - |