How to change the color of a fullcalendar cell?

Question

I am trying to change the color of an AngularUI calendar cell.

But always change the color of the event.

How to change the color of cells for a day?

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 his work

 $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 are some examples:

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

Answer 3

I don’t think that the ui-calendar directive (or the full calendar ) specifically supports changing the background color of only those cells that contain events , so there is nothing “ordinary”, you can do this. This leaves two options:

• Extend the functionality of the current directive by wrapping it inside its own custom directive. (Perhaps best practice, but I wouldn’t do this, seems redundant for the simple style of multiple DOM elements).
• Download and modify the Angular-UI directive and offer it as a new feature. (I chose this approach and I hope that they will support it in the future).

To change the Angular -UI directive:

The directive will probably be in a file called calendar.js . Open it and make the following changes ...

Introduce the $timeout dependency into the uiCalendar directive:

 .directive('uiCalendar', ['uiCalendarConfig', '$timeout', function(uiCalendarConfig, $timeout) { 

Then add this to the bottom of the uiCalendar link() directive:

 $timeout(function() { for (var i = 0; i < scope.eventSources[0].length; i++) { var event = scope.eventSources[0][i]; var eventDate = moment(event.start).format("YYYY-MM-DD"); var tds = $("td.fc-day[data-date='" + eventDate + "']"); for (var j = 0; j < tds.length; j++) { var td = tds[j]; $(td).css("background", "#000000"); }; }; }); 

How it works.

When a full calendar is generated, it creates data-date attributes for the type of cells you want to change the background color (i.e. cells marked with the fc-day class). The figure below shows one row (week) of these cells.

Inside the directive (where we have access to events), we can bypass events and retrieve them eventDate in the format "YYYY-MM-DD", as used by the data-date attribute. Then we use this eventDate to find the corresponding fc-day cells (using Select Equal Selector ), and then set their background color accordingly. The $timeout needed to ensure that this happens after the DOM is created.

Output