FullCalendarJavascriptReactjs

Reactjs fullcalendar with dynamic events

reactjs fullcalendar with dynamic events

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

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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