@licuido-ui/ui_full-calender NPM

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

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

alt text

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

@emotion/react @emotion/styled @mui/icons-material @mui/material moment react react-big-calendar react-dom

@licuido-ui/react

0.0.2

8 months ago