Question

Give event a title and background in fullcalendar

Answer 1

I have recently had similar problem. I am building myself a simple webapp for managing my work time and I wanted to use fullcalendar and display how much hours I have worked on each day. Standard events where showing thin rectangle which didn't look good. I noticed that there are background events so I used them to mark on which day I worked. It looked much better as the entire day was highlighted. But similar to you I wanted to show some info, namely hours for the day. So I come up with the following solution. I create two events for the day. First one is creating a background event and second one is creating normal event with title set to hours but with background set to transparent. With a little bit help of css I align text for the standard event. The code for it looks like this:$('#calendar').fullCalendar({ eventBackgroundColor: '#ABFFA6', eventColor: 'transparent', eventBorderColor: 'transparent', eventTextColor: '#000', events: [ {"start":"2015-01-02","rendering":"background"}, {"title":"06:10","start":"2015-01-02","backgroundColor":"transparent"}, ] }); This code will mark Jan 2nd with light green background and add 6:10 label into it.