Home FullCalendar Reactjs FullCalendar open Sweetalert on dayclick

Reactjs FullCalendar open Sweetalert on dayclick

by therichpost
Published: Updated: 0 comments
Reactjs FullCalendar open Sweetalert on dayclick

Hello to all, welcome to therichpost.com. In this post, I will tell you, Reactjs FullCalendar open Sweetalert on dayclick.

Reactjs full-calendar working

Post Working:

Friends, in this post, I am opening sweetalert modal popup on dayclick fullcalendar event into my reactjs application. In this working post I have used fullcalendar, reactjs, sweetalert latest versions.

Here you can check more posts related fullcalendar with other programming languages:

Fullcalendar Multiple Uses


Here is the working code snippet and please use carefully:

1. Firstly, we need to get fresh react set and for this we need to run below commands into our terminal and make sure, we should have latest node installed in my our system: 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npx create-react-app therichpost
cd therichpost
npm start
npx create-react-app therichpost cd therichpost npm start
npx create-react-app therichpost

cd therichpost

npm start

 

2. Now we need to run below commands to get fullcalendar and sweetlaert modules into our reactjs app:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install --save @fullcalendar/react @fullcalendar/daygrid
npm i @fullcalendar/interaction
npm install sweetalert2-react
npm start //start the application
npm install --save @fullcalendar/react @fullcalendar/daygrid npm i @fullcalendar/interaction npm install sweetalert2-react npm start //start the application
npm install --save @fullcalendar/react @fullcalendar/daygrid

npm i @fullcalendar/interaction

npm install sweetalert2-react

npm start //start the application

 

3. Finally, we need to add below code into our src/App.js file to get fullcalendar and its events working:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
...
//Fullcalendar, Sweetalert modules imported
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction"; // needed for dayClick
import Swal from 'sweetalert2'
...
function App() {
return (
<div className="App">
<h1>Reactjs FullCalendar Working Example</h1>
<FullCalendar
plugins={[ dayGridPlugin, interactionPlugin ]}
//Dayclick open sweetalert
dateClick={function(arg) {
Swal.fire({
title: 'Date',
text: arg.dateStr,
type: 'success',
})
}}
initialView="dayGridMonth"
events={[
{ title: 'event 1', date: '2020-07-01' },
{ title: 'event 2', date: '2020-07-02' }
]}
/>
</div>
);
}
...
... //Fullcalendar, Sweetalert modules imported import FullCalendar from '@fullcalendar/react' import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from "@fullcalendar/interaction"; // needed for dayClick import Swal from 'sweetalert2' ... function App() { return ( <div className="App"> <h1>Reactjs FullCalendar Working Example</h1> <FullCalendar plugins={[ dayGridPlugin, interactionPlugin ]} //Dayclick open sweetalert dateClick={function(arg) { Swal.fire({ title: 'Date', text: arg.dateStr, type: 'success', }) }} initialView="dayGridMonth" events={[ { title: 'event 1', date: '2020-07-01' }, { title: 'event 2', date: '2020-07-02' } ]} /> </div> ); } ...
...
//Fullcalendar, Sweetalert modules imported
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction"; // needed for dayClick
import Swal from 'sweetalert2'

...
function App() {
  return (
    <div className="App">
      
        <h1>Reactjs FullCalendar Working Example</h1>
      
        <FullCalendar
          plugins={[ dayGridPlugin, interactionPlugin ]}

          //Dayclick open sweetalert
          dateClick={function(arg) {
            Swal.fire({
              title: 'Date',
              text: arg.dateStr,
              type: 'success',
              
            })
          }}
          initialView="dayGridMonth"
          events={[
            { title: 'event 1', date: '2020-07-01' },
            { title: 'event 2', date: '2020-07-02' }
          ]}
        />
    </div>
  );
  
}
...

 

This is it friends and if you have any kind of query then please do comment below. Also please share your views on this post.

After this, I will come with reactjs fullcalender more posts and if you have any kind of suggestion or requirement then can comment below.

Jassa

Thanks

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.