CODEWITHSUNDEEP
fullcalendar
Hrvoje
Hrvoje

Reputation: 11

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

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

Upvotes: 0

Views: 321

Answers (1)

Hrvoje
Hrvoje

Reputation: 11

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'
  }
]

Upvotes: 1

Related Questions