CODEWITHSUNDEEP
fullcalendarsharepoint-onlinespfxfullcalendar-4sharepointframework
thedeepponkiya
thedeepponkiya

Reputation: 112

How to add full-calendar in SPFx React Functional Component?

Is there any idea how to add fullcalendar to SPFx react functional component?

I need to add the below fullcalendar component in my SPFx react solution.

https://fullcalendar.io/docs/react

I have found the below link but it is for the class component.

https://github.com/garima2510/SPFx-React-FullCalendar-Panel

Can anyone suggest to me fullcalendar for SPFx React Class Component?

I have imported the Font Awesome library in SPFx React Class Component Solution and It is working correctly. I have used the below link as a reference,

https://sharepoint.stackexchange.com/questions/297690/adding-external-css-fontawesome-to-an-spfx-webpart-on-spo

Now, I need to add Font Awesome library in SPFx React Functional Component Solution without using any npm packages.

I have imported the font-family in my SPFx react solution. Below is the code snippet for the same.

@font-face {
    font-family: 'Work Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Work Sans Regular'), url('../fonts/WorkSans-Regular.woff2') format('woff2');
}

.root-div {
    font-family: 'Work Sans Regular' !important;
}

I am facing the above error after adding font family in my solution. enter image description here

Can anyone help me with the above points?

Thanks

Upvotes: 0

Views: 1196

Answers (2)

thedeepponkiya
thedeepponkiya

Reputation: 112

I have found the solution. I have used the full-calendar component.

Please install the below packages.

Please refer to below code snippet,

import FullCalendar, { EventInput, EventApi, DateSelectArg, EventClickArg, EventContentArg, formatDate } from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

<FullCalendar
       plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
       headerToolbar={{
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay'
       }}
       initialView='dayGridMonth'
       editable={false}
       selectable={false}
       selectMirror={false}
       dayMaxEvents={false}
       initialEvents={allEvents}
       events={allEvents}
/>

Please refer to the below link for more details,

https://fullcalendar.io/docs/getting-started

Thanks

Upvotes: 0

devil_inside
devil_inside

Reputation: 450

For font-aweseome: It is almost the same in functional components. But since there is no constructor you can use the useEffect hook.

import * as React from 'react';
import { SPComponentLoader } from "@microsoft/sp-loader";

const SimpleComponent:React.FC<{}> = () => {

    React.useEffect(() => {
        SPComponentLoader.loadCss("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
    },[]);

    return (
        <div>
            <i className="fa fa-edit"></i>
        </div>
    );
};

export { SimpleComponent };

Results in

enter image description here

Upvotes: 1

Related Questions