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

Check this web part sample which uses full calendar library: github.com/pnp/sp-dev-fx-webparts/tree/main/samples/…. Let me know if this works for you. — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Sep 17, 2022 at 14:03
@Ganesh Thanks for your response. I have created an SPFx solution with React. So, I will need a calendar that works correctly under the .tsx file. Can you please share your thoughts on the same? — thedeepponkiya
– thedeepponkiya, Commented Sep 19, 2022 at 12:58

devil_inside · Accepted Answer · 2022-09-18 12:22:21Z

1

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

answered Sep 18, 2022 at 12:22

devil_inside

4751 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thedeepponkiya · Accepted Answer · 2022-09-26 08:23:53Z

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

Please install the below packages.

npm i @fullcalendar/[email protected] --save
npm i @fullcalendar/[email protected] --save
npm i @fullcalendar/[email protected] --save
npm i @fullcalendar/[email protected] --save

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related