Add Full Calendar in React Application

Posted By : Shubham Vishnoi | 06-Sep-2021

Full calender is the most famous javascript library which can be integrated with React projects.It can be used for plotting events .Dedidcated docs is provided on its site.

https://fullcalendar.io/

It has different views:-

1)Timeline view

2)Month view

3)List view

Different plugins are provided by library for implementation.The below given is the component render for full calender on webpage.Import the necessary plugins and library from node_module.Its very easy to use for initial basic view.You can then customize it according to your need.Events can be added on api calls and can be passed in event props.

     

  <FullCalendar

schedulerLicenseKey={'Lisence key'}

scrollTime={moment().subtract(1, 'hours').format('HH:00:00')}

plugins={[timeLinePlugin, interactionPlugin, bootstrapPlugin]}

dateClick={handleDateClick}

eventClick={handleEventClick}

firstDay={1}

height="100%"

headerToolbar={{

left: 'title',

center: '',

end: '',

}}

views={{

resourceTimelineDay: {

type: 'resourceTimelineDay',

buttonText: 'Daily',

slotDuration:'00:10:00',

eventMinWidth:1,

slotMinWidth:40

},

resourceTimelineWeekDays: {

type: 'resourceTimelineWeek',

duration: {weeks: 1},

slotDuration: {days: 1},

slotLabelFormat: [

{month: 'long', year: 'numeric'}, // top level of text

{

day: 'numeric',

weekday: 'short',

omitCommas: true,

},

],

buttonText: 'Weekly',

},

}}

eventTimeFormat={{

hour: 'numeric',

minute: '2-digit',

hour12: false,

}}

nextDayThreshold={'06:00'}

initialView={CALENDAR_DAILY}

filterResourcesWithEvents={true}

resourceOrder="title employee"

resourceAreaHeaderContent={resourceAreaHeaderContent}

resourceAreaWidth="6.3rem"

resources={[...resources]}

events={[...eventsValue]}

themeSystem="bootstrap"

viewClassNames={viewClassNames}

lazyFetching={false}

editable={editMode ? true : false}

eventChange={event => handleVisitChange(event)}

timeZone={timeZone ? timeZone : 'none'}

/>

The above full calender compoent has props used for different purposes.Some of them are:-

initial_view-the first view of calender it can be daily or montly,

events-It takes array of events which has strt_date,end_date,title of events

resource-It takes array of resources by which events are plotted.

resourceWIdth-width of resource column

eveentTimeformat-format of time on events bars (12 or 24 format)

various header porps are also there to change header of scheduler

Various features are given in the docs.It also has drag and drop feature and css cane be customized.One can easily implement the libraray and take advantage of its pre buld features.Some of the feature are part of premium version which can be buy and you got the license key which need to be pass as props in the component.The calender and scheduler are need of many applications and this javascript library full fill all requirement.

You can also checkout other library like this- dhtmlx,React scheduler.Different libarary has different props and method to implement but there basic idea is same reagrading the events and resources.These difference can be easily find in thier docs. 

Thanks You!

GOOD LUCK


Please remove URL from text

Comment is required

Sending message..
Connect with us