How to avoid cumulative layer color in Fullcalendar inverse-background

问题

I added different business hours for specific dates and different ressources, but the inverse-background layers are cumulative.

The event on the morning have color of afternoon event parameter and reciprocally.

I want to have both white events.

Example here: http://jsfiddle.net/gwpoofqk/ it's independent of businessHours and ressource parameters.

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

回答1:

"inverse-background" fills in all the space not occupied by the event on which it is declared with the colour specified. This includes space occupied by other events. Since your other event is also a background event, it's not a solid colour, and the other inverse-background colour shows through it. Due to way the calendar renders all of this, it's not possible to find the bit which represents the actual event, and set its opacity to 0 so that the alternate background would not show through.

Without making alterations to the fullCalendar source code to make the above process possible, the only workaround I am aware of is - as mentioned in the documentation (https://fullcalendar.io/docs/v3/background-events) - to give each event the same id, so that they will be grouped together and automatically use a single background colour. The colour of the first event in the group is used:

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

See http://jsfiddle.net/gwpoofqk/1/ for a working demo

来源：https://stackoverflow.com/questions/50114102/how-to-avoid-cumulative-layer-color-in-fullcalendar-inverse-background

标签

fullcalendar

fullcalendar-scheduler

fullcalendar-3