次の月または前月をクリックすると、現在の日の新しい背景色をfullcalendarに保ちます。

Question

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; 

と、この私が呼び出していますかcomponenet： はここに私のコードです

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

Answer 1

eventAfterAllRenderコールバックを使用してみてください。イベントがレンダリングされると、要素のスタイルが設定されます。唯一の欠点は、スタイリングされるまでわずかな遅延があるかもしれないが、わずか数ミリ秒のようだ。ここにはJSFiddleがあります。

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