How can I change background color in fullcalendar

Question

How can I change background color in full calendar?

How can I change the background color for the available time in businessHours?

All available must be green and not-available(events) must be red.

$(function() {
  $('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    eventColor: 'green',
    allDaySlot: false,
    events: [{
      title: 'Teste2',
      start: new Date(2019, 5, 6, 11, 00),
      allDay: false,
      backgroundColor: 'red'
    }],
    businessHours: [ // specify an array instead
      { 
        dow: [ 3,4 ],
        start: '10:00', // 10am
        end: '16:00' // 4pm
      },
      {
        dow: [ 3,4 ], 
        start: '18:00', // 10am
        end: '20:00', // 4p
      }
    ]
  });
});

https://codepen.io/anon/pen/rgPKZm

Like this

https://stackoverflow.com/a/25174750/1675954 Also https://stackoverflow.com/a/36771891/1675954 — Rachel Gallen, Jun 03 '19 at 12:10
@RachelGallen, no I think OP wants to change the background colour of the empty slots which fall within the businessHours area. And, having had a play around with the CSS, I'm not sure it's possible. Then again I'm not sure it's necessary either - if the events represent the unavailable time, then anything highlighted white is, by definition, available. It might be slightly nicer to make it green, but I think the current distinction is pretty clear already. — ADyson, Jun 03 '19 at 12:13
@ADyson yes I wants to change the background colour of the empty slots which fall within the businessHours area. — Serhii Danovskyi, Jun 03 '19 at 12:18
@SerhiiDanovskyi if you examine the HTML of the calendar (using your browser's Elements Inspector tool) you'll hopefully soon see why it's impossible. There is no set of HTML elements which directly correspond to the area you've highlighted. This is because the calendar you can see visually is not actually a single grid of cells, it's in fact several layers of HTML placed on top of each other to create a visual effect. Unfortunately you can't use CSS to directly select that area because, quite simply, it doesn't actually exist. — ADyson, Jun 03 '19 at 12:30
@SerhiiDanovskyi One solution to this which I have seen used before is to replace the businessHours option with a series of [background events](https://fullcalendar.io/docs/background-events) which cover the same area of the calendar. Since these are events with colour properties, you can alter their background colour very easily in the normal way. — ADyson, Jun 03 '19 at 12:33
Great. You should post the code as an Answer here below, so others can see it easily and learn from it. You are allowed to answer your own questions (and of course it enables others to upvote it!). — ADyson, Jun 03 '19 at 12:51

score 2 · Answer 1 · edited Mar 11 '22 at 09:45

Solution found

$(function() {

    $('#calendar').fullCalendar({
        defaultView: 'agendaWeek',
        allDaySlot: false,
        selectable: true,
        select: function(startDate, endDate) {
            alert('selected ' + startDate.format() + ' to ' + endDate.format());
        },
        events: [{
                title: 'Teste2',
                start: new Date(2019, 5, 6, 11, 00),
                allDay: false,
                backgroundColor: 'red'
            },
            {
                dow: [3, 4],
                start: '10:00', // 10am
                end: '16:00', // 4pm
                rendering: 'background'
            }, {
                dow: [3, 4],
                start: '18:00', // 10am
                end: '20:00', // 4pm
                rendering: 'background'
            }
        ],
        businessHours: [ // specify an array instead
            {
                dow: [3, 4],
                start: '10:00', // 10am
                end: '16:00' // 4pm
            },
            {
                dow: [3, 4],
                start: '18:00', // 10am
                end: '20:00', // 4pm
            }
        ]
    });

});

How can I change background color in fullcalendar

1 Answers1