1

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'
        }
    ]
ADyson
  • 57,178
  • 14
  • 51
  • 63
polo7
  • 57
  • 1
  • 11
  • can you please show the business hours and resource definitions, and also state what view you're using and with what settings, please. Then we can reproduce the issue easily and accurately. – ADyson May 01 '18 at 10:56
  • yes: businessHours:[{dow: [ 2, 3 ],start: '08:00',end: '12:00'},{dow: [ 2, 3 ],start: '13:30',end: '18:30'}]. I use 2 days view and sheduler with vertical ressources. – polo7 May 01 '18 at 11:20
  • can you please add that to the question, not the comments (use the "edit" button to change your question, and also provide the resource list as requested. – ADyson May 01 '18 at 11:31
  • I updated all the post to make more simple and clear. – polo7 May 01 '18 at 11:51

1 Answers1

2

"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

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • Thanks for this issue, the same id give what I want. It is to display staff working hours as ressource. It just inverse-background cumulate layer with business hours, but it's a detail because staff usually do not work out of business hours. – polo7 May 01 '18 at 14:18
  • @polo7 no problem, if the answer has helped you please remember to mark it as "accepted" - thanks – ADyson May 01 '18 at 19:41
  • 1
    @EPurpl3 Well it depends on your exact definition of "doesn't work". What goes wrong for you? Here's a demo using v4 with a timeline view: https://codepen.io/ADyson82/pen/qGgJaX?&editable=true&editors=001 The only change to the data is to add a resource ID (which is necessary otherwise events can't be shown in a timeline, since it wouldn't know which resource to put them on). The only change to the result is that the `color` value is used on the event itself, not white. I don't know if that's intentional. The background events docs don't say if timeline views are explicitly supported or not. – ADyson Jun 03 '19 at 12:27
  • @ADyson awesome, the resource ID did the trick. I dont know how i didnt thought about that, i use the resource ID for every event but i didnt used it for this background events. Works great now, thanks. – EPurpl3 Jun 04 '19 at 16:06