当点击下个月或前一个月时,保持当前的新背景颜色在完整的日历
keep the new background color of current day in fullcalendar when click on next month or previous month
我正在用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');
}
相关文章:
- 防止模式背景覆盖在每个打开的新模式上变得更暗
- 通过右键单击更改完整日历中事件的背景颜色 - 不起作用
- 在 html 中,打开一个具有选定背景颜色的新窗口
- Google API v3 使用 JavaScript 添加新日历
- 新颂网站 - 滚动时从一个背景图像平滑过渡到下一个背景图像
- Chrome扩展程序:如何在新选项卡中显示背景图像
- 根据季节(当前日历月)更改<正文>(在 CSS 中)的背景图像
- 添加新事件而不删除“全日历”中的现有事件
- 仅当新背景图像退出时,才更改背景图像
- 新的谷歌日历登录页滚动
- 如何在内容不同时淡入的情况下淡入到新背景
- 在java脚本的帮助下,在日历中显示背景日期应该是红色的,我也从oracle数据库中获取数据
- 如何在外部元素掉落的基础上更改背景颜色's id:完整日历
- Javascript:在新窗口中打开背景图像
- 我如何使用Windows.打开打开一个新的网页,就在我的网站上面,同时淡化背景
- 使用Jquery更改背景图像(添加新的图像路径)
- 淡入新背景,并在10s后淡出
- 如何在新窗口中打开iframe日历
- 当点击下个月或前一个月时,保持当前的新背景颜色在完整的日历
- 值更改时文本框上的新背景颜色