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

Question

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.

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.

Can anyone help me with the above points?

Thanks

devil_inside · Answer

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 (
        
            
        
    );
};

export { SimpleComponent };

Results in

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

1 Answers