当点击下个月或前一个月时,保持当前的新背景颜色在完整的日历

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

本文关键字:新背景 日历 颜色 背景 下个月 一个      更新时间:2023-09-26

我正在用npm fullcalendar做一个react项目。有一个要求,我需要改变今天的颜色。我使用了下面的命令:

$('.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}/>

尝试使用eventAfterAllRender回调。当事件完成渲染后,它将对元素进行样式化。唯一的缺点是在它被样式化之前可能会有轻微的延迟,但似乎只有几毫秒。这是一个JSFiddle。

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