(fullcalendar) Transmission of the background color of the calendar in the event object with start / stop times

Question

I use fullcalendar, and I'm looking for a way to pass the background color as an event so that the application on the calendar can use a combination of color events and color backgrounds. I am sure that this is not supported by the library, so if anyone has any comments on coding a function or code experience, that would be helpful.

The following question is very similar to mine, but not written clearly enough to find out if this is a hoax: Fullcalendar cell background color

Update 1

According to the accepted answer, I use the following event specifications

{ 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. The next step is to prevent the event overlap display algorithm so that light blue looks more like a background color, less like an event.

Update 2

Since then, I discovered this sample application that does what I need: http://fullcalendar.io/js/fullcalendar-2.2.0/demos/background-events.html

Answer 1

This question you are referring to does not match. He was looking to change the background color of any day in which there is an event, and 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 the event data in the color property.

All examples can be found on the FullCalendar Event Source Object page. As indicated on this example page, you can set it in an 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 they set the background for each event in the source, but you can do this for each event, just 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 in the calendar, e.g.

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

After further refinement, it looks like you want certain time intervals to have colors, but not to be a “real” event. You can do this in FullCalendar 2.2 with 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>