fullcalendar - Fullcalendar 的彩色周末

Question

我正在使用 FullCalendar 组件，我需要为周末、周五和周六着色。我按照这里的建议使用了以下内容：我可以在每月的 fullCalendar 显示上为周末设置不同的颜色吗

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

score 30 · Accepted Answer

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

你也可以试试这个：

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

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

score 5 · Accepted Answer

在版本 4 中，您可以使用“ daysOfWeek ”为所有星期日或其他日子一起添加事件。

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

我建议您使用这种方法，因为您可以使用服务器端脚本语言（如 PHP、Node.js、JavaScript 等）轻松更改它。

score 4 · Accepted Answer

4

这对我有用：

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

于 2017-09-20T09:41:57.470 回答

score 1 · Accepted Answer

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

score 1 · Accepted Answer

FULLCALENDAR 版本 5 中的解决方案：

将 CSS 样式应用于fc-day-sat和fc-day-sun类：

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

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

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

score 1 · Accepted Answer

如果要去掉周末的顶层，使用下面的代码

.fc-day-sat .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
        display: none;
}

.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
    display: block;
}

.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness .fc-non-business{
    display: none;
}

之后您可以使用此代码：使用此

score 0 · Accepted Answer

在完整日历版本 5 中

几天的 css 类已更改如下。

.fc-sun -> .fc-day-sun

.fc-mon -> .fc-day-mon

.fc-tue -> .fc-day-tue

.fc-wed -> .fc-day-wed

.fc-thu -> .fc-day-thu

.fc-fri -> .fc-day-fri

.fc-sat -> .fc-day-sat

所以你可以使用像（星期天）

.fc-day-sun {
    background-color: red;
    /*your styles goes here*/
}

score 0 · Accepted Answer

完整日历版本 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; 
}

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

score -1 · Accepted Answer

-1

这段代码与我一起工作：

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

于 2020-02-10T10:36:36.977 回答

fullcalendar - Fullcalendar 的彩色周末

9 回答 9

Related

Reference