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

stackoverflow.com/a/25174750/1675954 Also stackoverflow.com/a/36771891/1675954 — Rachel Gallen
@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
@ADyson yes I wants to change the background colour of the empty slots which fall within the businessHours area. — Serhii Danovskyi
@SerhiiDanovskyi One solution to this which I have seen used before is to replace the businessHours option with a series of 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

Serhii Danovskyi Serhii Danovskyi · Accepted Answer · 2019-06-03T12:54:53

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
  }
]
  });

});

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

I Use background events

How can I change background color in fullcalendar

1 Answers