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

fullcalendar

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 backgrounds.
I'm pretty sure this is not supported by the library, so if anyone has any notes towards coding the feature or experience working with the code, that would be helpful.

enter image description here

The following question is very similar to mine, but not written clearly enough to know if it's a dupe:
Fullcalendar event cell background color

Update 1

Based on the accepted answer, I use the following event specs

{
    title: '',
    start: moment().add(2,'h').toISOString(),
    end: moment().add(5,'h').toISOString(),
    color: 'rgba(63, 191, 191, 0.24)',
    textColor: 'rgba(63, 191, 191, 0)',
    editable: false,
    durationEditable: false,
    allDay: false,
    fakeEvent: true
},          
{
    title: 'WORK DAY',
    start: moment().add(1,'h').toISOString(),
       end: moment().add(3,'h').toISOString(),
       color: 'green',
    //background-color = 'blue'                     
},

And get this result. Next step is trying to prevent the event overlapping display algorithm, so that the light blue appears more like a background color, less like an event.

enter image description here

Update 2

I have since discovered this example app that accomplishes what I needed: http://fullcalendar.io/js/fullcalendar-2.2.0/demos/background-events.html

Best Answer

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>

Related Topic