How to get event title on event click fullcalendar in reactjs?

·

,
reactjs

Hello, welcome to therichpost.com. In this post, I will tell you, How to get event title on event click fullcalendar in reactjs? Reactjs is a Javascript Library to build user interface.

In this post, we will implement fullcalendar in reactjs and this is very interesting. First, you need to run below  command into your command prompt to install fullcalendar package into your reactjs app:

npm install fullcalendar-reactwrapper --save

In this post, I will get event title while click on event and I will come with more tricks with combination of reactjs and fullcalendar.

Here is the working image of fullcalendar in reactjs:

fullcalendar-in-reactjs

After this, you need to add below code into your index.js file and see how fullcalendar event click works:
import React from 'react';
import ReactDOM from 'react-dom';
import FullCalendar from 'fullcalendar-reactwrapper';
import 'fullcalendar/dist/fullcalendar.css';
class Hello extends React.Component{
    constructor(props) {
    super(props);
    this.state = {
    events:[
                {
                    title: 'All Day Event',
                    start: '2018-06-05'
                },
                {
                    title: 'Long Event',
                    start: '2018-06-02',
                    end: '2018-06-04'
                }
            ],		
    }
  }
 
  render() {
    return (
      <div id="example-component">
        <FullCalendar
             id = "your-custom-ID"
         header = {{
            left: 'prev,next today myCustomButton',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        }}
         
        navLinks= {true} // can click day/week names to navigate views
        editable= {true}
        eventLimit= {true} // allow "more" link when too many events
        events = {this.state.events}	
    eventClick = {function(calEvent, jsEvent, view, resourceObj) {alert(calEvent.title)}}
    />
      </div>
    );
  }
  }

  ReactDOM.render(<Hello />, document.getElementById('root'));

 I will do more with reactjs. If you have any query related to this post then please comment below.

 

Comments

6 responses to “How to get event title on event click fullcalendar in reactjs?”

  1. Sri Avatar
    Sri

    Full Calendar in React JS: How to add dropdown to navigate to a particular month.

  2. Ajay Malhotra Avatar

    I will update you.

  3. srikanth Avatar
    srikanth

    hi bro, Is it possible to add an event by clicking on the date and how to sync events to Gmail or Phone Calendar or outlook. please help me bro.

  4. Ajay Malhotra Avatar

    Yes, it is possible to add event by clicking on the date.

  5. dhara Avatar
    dhara

    how can we add or delete event by clicking on date?

  6. Ajay Malhotra Avatar

    Hi and I will update you on this.
    Thanks