user261002 user261002 - 3 months ago 20
React JSX Question

keep the new background color of current day in fullcalendar when click on next month or previous month

I am working on a react project using npm fullcalendar. there is a requirement that I need to change the color of the current day. I managed to do that using the following :

$('.fc-today').attr('style','background-color:#40cc25');


however, the problem is that when I click on next month or previous month it change the color to the original color of the library. how can I keep my new background color?
here is my code :

var EventCalendar = React.createClass({
mixins: [History],

getInitialState: function () {
return {
isModalOpen: false
};
},
_onCalendarSelect: function (start, end, jsEvent, view) {
if (!AuthStore.isAdministrator())
return;

var event = {
start: start,
end: end
};

this.setState({
event: event,
isUpdate: false
});

this.props.onNewEvent(event);
},
_onEventSelect: function (event) {
this.props.onEventSelect(event)
},
_loadEvents: function(start, end, timezone, callback) {
var events = EventStore.getInRange(start, end, this.props.environmentId);
if (!EventStore.isLoaded(start.format("YYYY-MM"))) {
EventActions.fetchData(start, end, this.props.environmentId)
} else {
callback(events);
}
},
_onEventStoreUpdate: function() {
// This is fix for IE11 required by bug RTC #458121
var moment = this.$fullCalendarContainer.fullCalendar('getDate');
this.$fullCalendarContainer.fullCalendar('destroy');
this.$fullCalendarContainer.fullCalendar({
defaultView: 'month',
defaultDate : moment,
selectable: true,
eventLimit: true,
eventClick: this._onEventSelect,
select: this._onCalendarSelect,
events: this._loadEvents,
displayEventEnd: false,
displayEventTitle: true,
nextDayThreshold: false
});

$('.fc-today').attr('style','background-color:#40cc25');

// For other browsers we can just use : this.$fullCalendarContainer.fullCalendar('refetchEvents');
},
componentWillMount: function () {
EventActions.invalidateData();
},
componentDidMount: function () {
this.$fullCalendarContainer = $(this.getDOMNode());
this.$fullCalendarContainer.fullCalendar({
defaultView: 'month',
selectable: true,
eventLimit: true,
eventClick: this._onEventSelect,
select: this._onCalendarSelect,
events: this._loadEvents,
displayEventEnd: false,
displayEventTitle: true,
nextDayThreshold: false
});
EventStore.addChangeListener(this._onEventStoreUpdate);
},
componentWillUnmount: function () {
this.$fullCalendarContainer.fullCalendar('destroy');
EventStore.removeChangeListener(this._onEventStoreUpdate);
EventActions.invalidateData();
},
render: function () {
return <div/>
}
});

module.exports = EventCalendar;


and this how I am calling the componenet:

<EventCalendar onEventSelect={this._onEventSelect} onNewEvent={this._onNewEvent} environmentId={this.props.params.id}/>

Answer

Try using the eventAfterAllRender callback. When events are done rendering then it will style the element. The only downside is there may be a slight delay before it is styled but it seems to be just a few milliseconds. Here is a JSFiddle.

eventAfterAllRender: function(view) {
    $('.fc-today').attr('style','background-color:#40cc25');
}
Comments