如何select Full calendar中的一整年的Weekdays或Weekend？

Question

如何select一年中完整日历中的工作日或周末？

我尝试了一些来自堆栈溢出的答案。

 $('.fc-day.fc-mon').css('backgroundColor', 'teal');
 $('.fc-day.fc-sat').css('backgroundColor', 'teal');

这对我有用，当前月份 mon/sat selected，但是当我单击 next/previous 按钮或更改月份时，我的 selection 不见了。我还需要 select 一整年。？怎么做？ TIA

Answer 1

您的代码在执行时页面中存在为元素添加样式的代码，但在更改月份后它将重新创建新元素并销毁所有现有元素，因此您的更新不会反映在新创建的元素中。

您有 2 个选项，如果您希望它始终存在，那么您可以在 CSS 中为这些元素添加简单的样式。

.fc-day.fc-mon,.fc-day.fc-sat{ 
  background-color: teal;
}

或者您必须在呈现新日历视图时始终执行此操作，您可以在 viewRender 回调中执行此操作。

viewRender: function (view, element) {
    $('.fc-day.fc-mon').css('backgroundColor', 'teal');
    $('.fc-day.fc-sat').css('backgroundColor', 'teal');
}

更新： 您可以从 view.start 属性（保存时刻日期对象）中提取年份并根据年份设置 class 如有必要。

例如：

viewRender: function(view, element) {
  if (view.start.format('YYYY') === '2019') {
    $('.fc-day.fc-mon').css('backgroundColor', 'teal');
    $('.fc-day.fc-sat').css('backgroundColor', 'teal');
  }
}

$(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  console.log(y + "-" + m + "-" + d);

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    viewRender: function(view, element) {
      if (view.start.format('YYYY') === '2019') {
        $('.fc-day.fc-mon').css('backgroundColor', 'teal');
        $('.fc-day.fc-sat').css('backgroundColor', 'teal');
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<div id='calendar'></div>

如何select Full calendar中的一整年的Weekdays或Weekend？

How to select a full year's Weekdays or Weekend in Full calendar?

javascript

fullcalendar