【问题标题】:FullCalendar background color of row of today in AgendaWeek view and AgendaDay viewAgendaWeek 视图和 AgendaDay 视图中今天行的 FullCalendar 背景颜色
【发布时间】:2017-08-07 11:05:53
【问题描述】:

有人可以帮助我在 Fullcalendar 的议程周视图和议程日视图中仅更改今天行的背景颜色的代码吗?这是我的日历代码:

<style>
        body {
            padding-top: 70px;
            /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
        }
        #calendar {
            max-width: 100%;
        }
        #calendar.agenda-week{
          background-color: #FF9900;
        }
</style>
//...
$('#calendar').fullCalendar({
            locale: "es",
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            views: {
                week: {
                columnFormat:'ddd D',
                },
            },
            defaultView: 'agendaWeek',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            selectable: true,
            selectHelper: true,
            minTime: "09:30:00",
            maxTime: "19:30:00",
            slotLabelFormat: "h(:mm)a",
            slotDuration: "00:30:00",
            slotLabelInterval: "00:30:00",
            businessHours:
            {
              start: '13:30',
              end:   '17:00',
              dow:  [1,2,3,4,5,6,0]
            },
            dayRender: function (date, cell) {

                var today = new Date();

                if (date.date() === today.getDate() && date.month() === today.getMonth()) 
                {
                   cell.css("background-color", "#C0C0C0");//gray for today in month view
                }                    

            },
            viewRender: function(view,element){
                $("#calendar").addClass('agenda');//this change background color to orange for all views
            },
            //...
        });

这是现在的日历

【问题讨论】:

    标签: javascript fullcalendar


    【解决方案1】:

    希望我理解正确。

    使用 CSS,您可以执行以下操作:

    #calendar .fc-agendaWeek-view .fc-today,  #calendar .fc-agendaDay-view .fc-today {
      background: red !important;
    }
    

    【讨论】:

    • 非常感谢。这真的是我想做的XD。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-30
    相关资源
    最近更新 更多