单击下个月或上个月时,将当前日期的新背景颜色保留在fullcalendar中

时间:2016-08-15 16:16:53

标签: javascript jquery reactjs fullcalendar

我正在使用npm fullcalendar进行反应项目。我需要更改当天的颜色。我设法使用以下方法做到了这一点:

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

然而,问题是当我点击下个月或上个月时,它会将颜色更改为库的原始颜色。我怎样才能保留新的背景颜色? 这是我的代码:

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;

以及我如何调用组件:

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

0 个答案:

没有答案