Fullcalendar v4 wrong color on background event with inverse-background rendering

Question

Why can't I get white color with two background events with inverse-background rendering?

I have found two similar questions but can't comment them (because of low reputation): FullCalendar 4 inverse-background

How to avoid cumulative layer color in Fullcalendar inverse-background

Sample of problem in fullcalendar v4: http://jsfiddle.net/hrvoje2/ye2gkb4a

Sample of good results in fullcalendar v3: http://jsfiddle.net/gwpoofqk/1/

events: [
  {
    id: 2,
    start: '2018-05-02 10:00:00',
    end: '2018-05-02 11:00:00',
    color: 'blue',
    rendering: 'inverse-background'
  },
  {
    id: 2,
    start: '2018-05-02 14:00:00',
    end: '2018-05-02 15:00:00',
    color: 'green',
    rendering: 'inverse-background'
  }
]

V3 renders ok (white), but v4 is blending colors (white and blue/green). Documentation says 'Events that share the same id will be grouped together when this rendering happens'. https://fullcalendar.io/docs/v4/background-events

if you believe the calendar is not behaving in the documented way then you should consider raising a bug about it - see fullcalendar.io/reporting-bugs. We cannot fix internal fullCalendar bugs on StackOverflow - we can answer questions about your implementation of fullCalendar, and how you should interact with its API, but we cannot fix issues within the product itself. — ADyson

Hrvoje Hrvoje · Accepted Answer · 2019-08-10T08:01:36

In v4, you have to use groupId to associate them together instead of id. The docs are wrong right now (they say id).

Found that information in this bug report: https://github.com/fullcalendar/fullcalendar/issues/4659

Working example: http://jsfiddle.net/hrvoje2/pzu1qmvc/

events: [
  {
    id: 1,
    groupId: 1,
    start: '2018-05-02 10:00:00',
    end: '2018-05-02 11:00:00',
    color: 'blue',
    rendering: 'inverse-background'
  },
  {
    id: 2,
    groupId: 1,
    start: '2018-05-02 14:00:00',
    end: '2018-05-02 15:00:00',
    color: 'green',
    rendering: 'inverse-background'
  }
]

Fullcalendar v4 wrong color on background event with inverse-background rendering

1 Answers