How to include background color in the FULLCALENDAR event?

Asked

Viewed 36 times

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.?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.