Question

我正在使用FullCalendar组件，我需要在周末，星期五和星期五上色。星期六。我在这里推荐使用以下内容： Can I set a different color for the weekend on monthly fullCalendar display

$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend');

我还添加了css类。

这是我的代码，周末没有颜色......任何建议！

$(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    $.getJSON('[@spring.url '/loadSomeData'/]', function (data) {
      $.getJSON('[@spring.url '/loadOtherData/]', function (info) {
        information = returnedPublicVacation;

        var calendar = $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          selectable: true,
          selectHelper: true,
          select:
            function(start, end, allDay) {
              vacationStart = start;
              showTheCorrectDialog(vacationStart);
            },

          eventClick: function(calEvent, jsEvent, view) {

            showTheCorrectDialog(calEvent.start);

            // change the border color just for fun
            $(this).css('border-color', 'red');
          },

          editable: true,
          events:data.concat(information)
        });
        resourceVacation = data;
      });
    });

    $('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend');
  });

Answer 1

您是否在css文件中为类添加了样式？

你也可以试试这个：

.fc-fri { color:blue; }
.fc-sat { color:red;  }

（或.fc-sun for Sunday）您可以在此处查看示例：http://jsfiddle.net/rajesh13yadav/nf9whojL/1/

Answer 2

AJS.$(document).ready(function () {
    AJS.$(".fc-weekend-column").each(function(i,el){
        AJS.$(this).css("background-color", "#FFF7F7");
    });
});

Answer 3

在版本4中，您可以使用“ daysOfWeek ”添加一个针对所有星期日或其他日子的活动。

    events: [
    {
      daysOfWeek: [0,6], //Sundays and saturdays
      rendering:"background",
      color: "#ff9f89",
      overLap: false,
      allDay: true
    }]

我建议您使用此方法，因为您可以通过服务器端脚本语言（例如PHP，Node.js，JavaScript等）轻松地对其进行更改

Answer 4

这对我有用：

.fc-sun { 
color:#337ab7;  
border-color: black;  
background-color: #ffa58c; }

Answer 5

全日历版本 5 中的解决方案：

将 CSS 样式应用于 fc-day-sat 和 fc-day-sun 类：< /p>

#calendar .fc-day-sun, #calendar .fc-day-sat {
    background-color: #f4f5d7;
}

如果您不想更改日历标题的颜色（显示“Sat”和“Sun”），您可以精确地应用 fc-day-sat 和 fc-day-sun 类，通过添加 td 标签：

#calendar td.fc-day-sun, #calendar td.fc-day-sat {
    background-color: #f4f5d7;
}

Answer 6

全日历第 5 版：

.fc-sat 和 .fc-sun 已转换为 .fc-day-sat 和 .fc-day-sun。

同样将 bgcolor 应用于 .fc-day-sat, .fc-day-sat 将不再起作用，因为他们已将 bgcolor 应用于最深的子类 .fc-non-business。

<块引用>

.fc .fc-non-business {  
  background-color: #fff; 
}

一个普通的类现在就可以完成这项工作。

Answer 7

此代码与我合作：

#calendar .fc-bgevent {
        background: #000000;
}

在Fullcalendar上色周末

7 个答案: