FullCalendar: Add background-color for the whole day not for the event alone through 'addEventSource'

Question

I want to add background color for the whole day and not the event background alone. For the code that i have written now, i could see events alone as background My view code is as follows:

<script>    
$(document).ready(function() {
    $.ajax({
    url: "<?php echo base_url() ?>/cmn/calendar/show_holidays",
    type: 'POST', // Send post data
    data: 'type=fetch',
    async: true,

    success: function(s){
          holidays = s;
          $('#calendar').fullCalendar('addEventSource', JSON.parse(holidays));
           }
             });

    /* initialize the calendar
    -----------------------------------------------------------------*/
    $('#calendar').fullCalendar({

        utc: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, 

    });
    });

And My codeigniter controller code is as follows:

    public function show_holidays()
    {
    $type = $_POST['type'];
    $holidays=$this->calendar_m->show_holidays();
    foreach($holidays as &$val){
     $val['allDay'] = 'true'; 
     $val['Rendering'] = 'Background'; 
     $val['textColor'] = '#000';
     $val['title'] = 'Holiday today' 
     $val['backgroundColor'] = 'yellow'; // added background color to all the holidays
            }
     echo json_encode($holidays);
}

So i am passing the data through json. I get the output as follows:-

Now i want the yellow color event to be look like the background color in sundays.(i.e.) background color for the whole day not for the event alone. Is it possible through 'addEventSource'? Thanks in advance.

Answer 1

The following is the fiddle that displays the output. I got the background color for the whole day and not the event background alone. It is achieved through 'addEventSource' Hope this Helps..!

var jsonEvents = 
[{allDay 
: 
"true" ,
backgroundColor 
: 
"red" ,
id 
: 
13 ,
rendering 
: 
"background" ,
start 
: 
"2016-05-01" ,
textColor 
: 
"white" ,
title 
: 
"Mayday",
className
:
"event-full"
}]


$('#calendar').fullCalendar({ 

utc: true, 
header: { 
left: 'prev,next today', 
center: 'title', 
right: 'month,agendaWeek,agendaDay' 
}, 
editable: true, 
droppable: true, 

eventAfterRender: function(event, element, view) { 
element.append(event.title); 
} 

});


$('#calendar').fullCalendar('addEventSource', jsonEvents);

https://jsfiddle.net/xxrznf2j/

Answer 2

Your code is fine. You just have a tiny case sensitive mistake

$val['Rendering'] = 'Background';  

change it to

$val['rendering'] = 'background';  

Both the 'R' and 'B' to 'r' and 'b'