Render Calendar events by React Component

[havantuan]

how to Render Calendar events by React Component. I want to custorm events to Jsx. Help me

[sanjeev07]

make a array of object like events = [{title: 'All Day Event',start: '2017-05-01'},{title: 'Long Event',start: '2017-05-07',end: '2017-05-10'}.....] then pass the same array to react calendar component through events props like below .

render(){
		const options = {
			header: {
				left: 'month,basicWeek,basicDay,listMonth',
				center: 'title',
		        right: 'prev,next today'
		        },
		        defaultView: 'month',
		        locale: 'tr',
		        events: events,
		        viewRender: (view, element)=> {
			        //Do something
			        console.log(view,element)
			    }
		    }
		return(
			<div id="example-component">
				<FullCalendar
			    	{...options}
			/>
		   	</div>
		);
} 

```hope this will help you . 

[abrousseau001]

Good afternoon. I am working on a react component as well and I am having inconsistent behaviour. Sometimes the react component will load the events and display them and other times it does not. Please see the below sample.

import React from 'react';
import { connect } from 'react-redux';
import FullCalendar from 'fullcalendar-reactwrapper';
import { Jumbotron } from 'react-bootstrap';

import '../../../node_modules/fullcalendar/dist/fullcalendar.css';

class CalendarPage extends React.Component {
    constructor(props) {
        super(props);

        const events = [
            {
                title: 'All Day Event',
                start: '2017-07-01',
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2017-07-19T16:00:00',
            },
        ];

        const options = {
            //Build the header
            //Left: Set the buttons to move between calendar months/weeks or return to the current date
            //Centre: Set the title, in this case the default month/year or week date range (ie 6/5/2017-6/11/2017)
            //Right: Set the option to switch between a month or week view
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay',
            },

            //Basic options to make the calendar not default events to an entire day, editable, and the text colour to be displayed as black
            allDayDefault: false,
            businessHours: {
                // days of week. an array of zero-based day of week integers (0=Sunday)
                dow: [1, 2, 3, 4, 5], // Monday - Friday

                start: '07:30', // business days' starting hour
                end: '17:00', // business days' ending time
            },

            defaultView: 'month',
            editable: true,

            //Basic click listener that reports information about the event
            eventClick: this.handleEventClick.bind(this),

            //Basic listener that reports updated status of an event that has been dropped onto the calendar - ie existing event whether dropped onto another day
            eventDrop: this.handleDropEvent.bind(this),

            eventLimit: true,
            events: events,
            navLinks: true,

            //Basic selection listener that reports information about the javascript event and the date range selected
            select: this.handleSelection.bind(this),
            selectable: true,
            selectHelper: true,
            textColor: 'black',
            timezone: 'local',
        };

        this.state = {
            options,
        };
    }

    handleEventClick(event) {
        alert('Event: ');
        alert('Coordinates: ');
        alert('View: ');
    }

    handleDropEvent(event) {
        alert('Event: ');
        alert('Coordinates: ');
        alert('View: ');
    }

    handleSelection(event) {
        alert('Event: ');
        alert('Coordinates: ');
        alert('View: ');
    }

    render() {
        const { options } = this.state;

        return (
            <Jumbotron style={{ background: '#ffffff' }}>
                <FullCalendar {...options} />
            </Jumbotron>
        );
    }
}

/**
 * Function that checks the state of the application and maps the elements of the state to the properties
 * @param {Reducer<S>} state - representing the root reducer and is able to check any reducer function that is
 * registered to it
 * @returns {object} - empty object as the state is not needed in this page
 */
function mapStateToProps(state) {
    return {};
}

const connectedCalendarPage = connect(mapStateToProps)(CalendarPage);
export { connectedCalendarPage as CalendarPage };

Any assistance in this matter would be greately appreciate @sanjeev07

[sanjeev07]

make sure when ever your events changes it should re-render the component again with the updated events . it should work .

[weblabjovan]

@sanjeev07 Is there a way to render events with more info in a structural way. My biggest concern is in the list view. Right now I am using a function in the eventRender method, the function takes each event element and appends td html tags to it.

customListView(event, element, view) { if (view.type === 'listWeek') { element.append('td'+someVar+'td'); }
} }

For plain view purposes that is ok, but when I want to have a table row with some more data about the event and a functions like edit, delete, etc.. I have no way to connect my react functions with click events. Do you know how we can render an event in a list view with a lot more data structured in columns and attach functions to each event in the list.

Thanks

[zeroyls]

How to set parameters to change calendar view event? Such as the old method like this $('#calendar').fullCalendar('next'), how to transfer parameters to your components?

[luciancaetano]

Just used ReactDOM

const eventRender = (e) => {
    const el = e.el;
    const content = (
        <React.Fragment>
            <div className="fc-content">
                hello world
            </div>
            <div className="fc-resizer fc-end-resizer" />
        </React.Fragment>
    )
    ReactDOM.render(content, el);
    return el;
}