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

Question

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 1

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');
}