angularjs – 如何更改fullcalendar单元格颜色？

发布时间：2020-12-17 17:42:36 所属栏目：安全来源：网络整理

导读：我正在尝试更改AngularUI的日历单元格颜色. 但总是只改变事件颜色. 如何改变日间细胞的颜色？这是我设置事件的Angular代码： $scope.events = [ {className: 'fa fa-shopping-basket',title: 'dashboard',start: new Date(y,m,1),url: 'http://localhost/vi

我正在尝试更改AngularUI的日历单元格颜色.

但总是只改变事件颜色.

如何改变日间细胞的颜色？

这是我设置事件的Angular代码：

$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',url: 'http://localhost/view_finance/d/dash2',{className: 'fa fa-user',title: 'balance',url: 'http://localhost/view_finance/d/balance',{className: 'fa fa-bar-chart',title: 'invoice',5),url: 'http://localhost/view_finance/invoice/invoice#!/invoice_view',title: 'documents',d - 3,16,0),url: 'http://localhost/view_finance/files/browse/home',{title: 'control side',d + 4,url: 'http://localhost/view_finance/manage/dashboard',{title: 'balance',d + 1,19,end: new Date(y,22,30),{title: 'invoice settings',28),29),url: 'http://localhost/view_finance/invoice/invoice#!/invoice_setting',allDay: true}
];

这是我目前的观点

enter image description here

解决方法

最后我做了它并且它的工作

$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
            } 

}

这是我对硬编码值的看法

enter image description here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!