1
I’m using the fullcalendar
in version 5.5.1, and in the month view the events are shown only with a ball on the side and no background color, unless the event contains the allDay: true
.
Then he shows the background color without the ball, what I need is for the background color to appear with the ball, for the ball to be status indicator, and the background color to indicate tasks. With that, I started from the premise of changing the source code of the library and found the following code:
TableListItemEvent.prototype.render = function () {
var _a = this, props = _a.props, context = _a.context;
var timeFormat = context.options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
var timeText = buildSegTimeText(props.seg, timeFormat, context, true, props.defaultDisplayEventEnd);
return (createElement(EventRoot, { seg: props.seg, timeText: timeText, defaultContent: renderInnerContent$2, isDragging: props.isDragging, isResizing: false, isDateSelecting: false, isSelected: props.isSelected, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday }, function (rootElRef, classNames, innerElRef, innerContent) { return ( // we don't use styles!
createElement("a", __assign({ className: ['fc-daygrid-event', 'fc-daygrid-dot-event',eventDef.publicId].concat(classNames).join(' '), ref: rootElRef }, getSegAnchorAttrs$1(props.seg)), innerContent)); }));
};
if it includes the:
style:{backgroundColor:'#345674',color:'#FFF'}
in this way:
TableListItemEvent.prototype.render = function () {
var _a = this, props = _a.props, context = _a.context;
var timeFormat = context.options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
var timeText = buildSegTimeText(props.seg, timeFormat, context, true, props.defaultDisplayEventEnd);
return (createElement(EventRoot, { seg: props.seg, timeText: timeText, defaultContent: renderInnerContent$2, isDragging: props.isDragging, isResizing: false, isDateSelecting: false, isSelected: props.isSelected, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday }, function (rootElRef, classNames, innerElRef, innerContent) { return ( // we don't use styles!
createElement("a", __assign({ className: ['fc-daygrid-event', 'fc-daygrid-dot-event',eventDef.publicId].concat(classNames).join(' '),style:{backgroundColor:'#345674',color:'#FFF'}, ref: rootElRef }, getSegAnchorAttrs$1(props.seg)), innerContent)); }));
};
meets what I need. But I don’t want to pass just a static color, I want to be able to choose the color when including the event. It doesn’t have to be necessarily changing the library, if someone has another way to do this.?