How to change fullcalendar cell color?

Question

I'm trying to change AngularUI's calendar cell color.

But always change event color only.

How to change day cell color?

This is my Angular code for setting events:

$scope.events = [
    {className: 'fa fa-shopping-basket', title: 'dashboard', start: new Date(y, m, 1), url: 'http://localhost/view_finance', backgroundColor: '#80d4ff', borderColor: '#80d4ff', textColor: '#0088cc', allDay: true},
    {className: 'fa fa-line-chart', title: 'dashboard 2', start: new Date(y, m, 1), url: 'http://localhost/view_finance/d/dash2', backgroundColor: '#80d4ff', borderColor: '#80d4ff', textColor: '#0088cc', allDay: true},
    {className: 'fa fa-user', title: 'balance', start: new Date(y, m, 1), url: 'http://localhost/view_finance/d/balance', backgroundColor: '#80d4ff', borderColor: '#80d4ff', textColor: '#0088cc', allDay: true},
    {className: 'fa fa-bar-chart', title: 'invoice', start: new Date(y, m, 5), url: 'http://localhost/view_finance/invoice/invoice#!/invoice_view', backgroundColor: '#80d4ff', borderColor: '#80d4ff', textColor: '#0088cc', allDay: true},
    {className: 'fa fa-bar-chart', title: 'documents', start: new Date(y, m, d - 3, 16, 0), url: 'http://localhost/view_finance/files/browse/home', backgroundColor: '#80d4ff', borderColor: '#80d4ff', textColor: '#0088cc', allDay: true},
    {title: 'control side', start: new Date(y, m, d + 4, 16, 0), url: 'http://localhost/view_finance/manage/dashboard', backgroundColor: '#80d4ff', borderColor: '#80d4ff', textColor: '#0088cc', allDay: true},
    {title: 'balance', start: new Date(y, m, d + 1, 19, 0), end: new Date(y, m, d + 1, 22, 30), url: 'http://localhost/view_finance/d/balance', backgroundColor: '#80d4ff', borderColor: '#80d4ff', textColor: '#0088cc', allDay: true},
    {title: 'invoice settings', start: new Date(y, m, 28), end: new Date(y, m, 29), url: 'http://localhost/view_finance/invoice/invoice#!/invoice_setting', backgroundColor: '#80d4ff', borderColor: '#80d4ff', textColor: '#0088cc', allDay: true}
];

This is my current view

Answer 1

Finally I did it and its working

$scope.uiConfig = {
    calendar: {
        height: 650,
        editable: true,
        header: {
            left: '',
            center: 'prev title next',
            right: ''
        },
        defaultView: 'month',
        dayRender: function (date, cell) {
                 $r = $scope.getDateInfo(date);
                if($r){
                   cell.css("background-color", "#ccf3ff"); 
                }
                cell.html('<i class="fa fa-line-chart"  ></i>'+$r.amount+'<br/><i class="fa fa-user" ></i>'+$r.users+'<br/><i class="fa fa-shopping-basket" ></i>'+$r.income);
            }

    }
};

$scope.getDateInfo = function(date){
    return {
             amount : 50000,
             users  : 10,
             income : 5000
            } 

}

This is my view with hard-coded values

Answer 2

You can set the color in the Event Source Object.

Here is a few example:

{
    events: [
        { title: 'Event1', start: '2011-04-04' },
        { title: 'Event2', start: '2011-05-05' }
    ],
    color: 'yellow',   // background color
    textColor: 'black' // text color
}