Wednesday, May 29, 2024

Reactjs fullcalendar with dynamic events

reactjs fullcalendar with dynamic events

Hello to all, welcome to 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
    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 : });
//Final output
render() {
  return (
    <div className="App">
        <h1>Reactjs FullCalendar with dynamic events</h1>
          plugins={[ dayGridPlugin ]}
          events = {[]}

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.



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

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