Question

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

但总是只改变事件颜色。

如何更改日间单元格颜色？

这是我设置事件的角色代码：

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

这是我目前的观点

Answer 1

最后我做了它的工作

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

}

这是我的硬编码值视图

Answer 2

您可以在Event Source Object。

中设置颜色

以下是一些例子：

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

Answer 3

我不认为 ui-calendar directive （或 full calendar 本身）特别支持仅更改那些背景颜色包含事件的单元格，因此您无法设置这些“普通”。这留下了两个选择：

通过将当前指令的功能包装在您自己的自定义指令中来扩展其功能。（也许更好的做法，但我不会这样做，仅仅为几个DOM元素设计风格似乎有点过分了。）
下载并修改Angular-UI指令，并将其建议为新功能。（我选择了这种方法，希望将来能够支持它。）

修改Angular-UI指令：

该指令可能位于名为 calendar.js 的文件中。打开它并进行以下更改......

将$timeout依赖项注入uiCalendar指令：

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

添加然后将其添加到uiCalendar指令link()函数的底部：

$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");
    };
  };
});

工作原理。

生成完整日历后，它会在您希望更改背景颜色的单元格的类型上创建data-date属性（即标有fc-day的单元格类）。下图显示了这些单元格的一行（一周）。

在指令内部（我们可以访问事件），我们可以循环事件并以eventDate属性使用的“YYYY-MM-DD”格式检索data-date。然后，我们使用eventDate查找相应的fc-day单元格（使用Attribute Equals Selector），然后相应地设置其背景颜色。需要$timeout服务以确保在生成DOM之后发生这种情况。

<强>输出

如何更改fullcalendar单元格颜色？

3 个答案: