FullCalendar 4 inverse-background

0
votes

I have problem with Inverse Backgrounds in FullCalendar v4.0.2.

code:

let calendarEl = document.getElementById(this.element_id);
this.calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'timeGrid' ],
    height: "auto",
    nowIndicator : true,
    defaultView: 'timeGridDay',
    events: [
        {
            id: 2,
            start: '2019-04-17 10:00:00',
            end: '2019-04-17 11:00:00',
            color: 'blue',
            rendering: 'inverse-background'
        } , {
            id: 2,
            start: '2019-04-17 14:00:00',
            end: '2019-04-17 15:00:00',
            color: 'green',
            rendering: 'inverse-background'
        }
    ]
});
this.calendar.render();

when i use this code events that share the same id wouldn't grouped together when this rendering happens.

1
fullcalendar-4

1 Answers

0
votes

I'm not entirely sure but I think you're using the wrong view for that type of rendering.

const el = document.querySelector("#calendar");

const calendar = new FullCalendar.Calendar(el, {
  plugins: ['timeGrid'],
  defaultView: 'timeGridWeek',
     events: [
        {
            id: 2,
            start: '2019-04-17 10:00:00',
            end: '2019-04-17 11:00:00',
            color: 'blue',
            rendering: 'inverse-background'
        } , {
            id: 2,
            start: '2019-04-17 14:00:00',
            end: '2019-04-17 15:00:00',
            color: 'blue',
            rendering: 'inverse-background'
        }
    ]
});

calendar.render();

https://codepen.io/anon/pen/rbJyzv 👀