Reactjs fullcalendar with dynamic events

Hello to all, welcome to therichpost.com. In this post, I will tell you, Reactjs fullcalendar with dynamic events.

Post Working:

In this post, I am showing dynamic events in fullcalendar into my reactjs application. For getting events from my laravel backend , I have used axios service.

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 reactjs fresh setup and for then we need to run below commands into our terminal and also we should have latest node version installed on our pc:

npx create-react-app therichpost

cd therichpost

npm start

2. We need to run below commands also to have fullcalendar and axios modules into our reactjs application:

npm install --save @fullcalendar/react @fullcalendar/daygrid

npm install axios //API Service

npm start //start the application

3. Now, we need to add below code into our src/app.js file or you can replace below code with existing one that you have into your src/app.js file:

import React from 'react';
import './App.css';

//Importing FullCalendar Module
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

//Importing axios service
import axios from 'axios';

class App extends React.Component {
  //initialize array variable
  constructor() {

    //super is used to access the variables
    super();
    this.state = {
       data: []
    }
 }
 componentDidMount() {

 //API request
 axios.get("http://localhost/therichpost/public/api/sample-restful-apis").then(response => {
  
  //getting and setting api data into variable
  this.setState({ data : response.data });
 
})
}
  
//Final output
render() {
  return (
    <div className="App">
      
        <h1>Reactjs FullCalendar with dynamic events</h1>
      
        <FullCalendar
          plugins={[ dayGridPlugin ]}
          initialView="dayGridMonth"
          events = {[this.state.data]}
        />
    </div>
  );
  
}

}
export default App;

4. Laravel demo api that I have made into my routes/api.php file:

Route::get('sample-restful-apis', function()
{
return response()->json([
    'title' => 'Laravel API Events','start' => '2020-07-26'
]);
});

This is it friends and if you have any kind of query then please do comment below.

Friends, I share my personal practice posts to help others. Please must share your views on this post because your views give me confidence and I will make more good posts for you.

Thanks

Jassa