(fullcalendar) Passing calendar background color in event object with start/stop time

Question

I am using fullcalendar and I am looking for a way to pass background color as an event so that my calendar app can use a combination of colored events and colored backgroun

Answer 1

That question you referenced isn't the same. He was looking to change the background color of any day that has an event, not the event itself. What you are trying to do is supported by the library. You can set the color of the event by passing in a color property with the event data.

All examples can be found on the FullCalendar Event Source Object page. As noted on that example page, you can set it in the array of events:

{
    events: [
        {
            title: 'Event1',
            start: '2011-04-04'
        },
        {
            title: 'Event2',
            start: '2011-05-05'
        }
        // etc...
    ],
    eventColor: 'yellow',   // an option!
    textColor: 'black' // an option!
}

or in JSON:

{
    url: '/myfeed.php',
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

Now, those are setting the background for every event in the source, but you can do it per event as well, the same way, like:

[
    {
        "title": "Free Pizza",
        "allday": "false",
        "borderColor": "#5173DA",
        "color": "#99ABEA",
        "textColor": "#000000",
        "description": "Fake description for the Free Pizza",
        "start": "2014-11-15T16:30:28",
        "end": "2014-11-15T17:30:28",
        "url": "some url"
    },
    {
        "title": "CSS Meetup",
        "allday": "false",
        "borderColor": "#820F20",
        "color": "#A6113C",
        "textColor": "#ffffff",
        "description": "Fake description",
        "start": "2014-11-19T16:30:28",
        "end": "2014-11-19T18:30:28",
        "url": "someUrl
    }
]

You can use eventColor and eventTextColor (src) to set the background for all events on the calendar, like

$('#fullCal').fullCalendar({
    events: [...],
    eventColor: 'yellow',
    eventTextColor: 'black'
});

After further clarification it appears you want certain time slots to have colors but not be a "real" event. You can do this in FullCalendar 2.2 using the Background Events by adding rendering: 'background' to the event (documentation).

$('#fullCal').fullCalendar({
  events: [{
    title: 'Main Event 1',
    start: moment().add(-4, 'h'),
    end: moment().add(-2, 'h'),
    color: '#ff0000',
    allDay: false
  }, {
    start: moment().add(2, 'h'),
    end: moment().add(5, 'h'),
    rendering: 'background'
  }, {
    title: 'Main Event 2',
    start: moment().add(5, 'h'),
    end: moment().add(7, 'h'),
    color: '#00cc00',
    allDay: false,
    fakeEvent: false
  }],
  header: {
    left: '',
    center: 'prev title next',
    right: ''
  },
  timezone: 'local',
  defaultView: 'agendaWeek'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.js"></script>

<div id="fullCal"></div>