Question

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

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

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

这对我来说有效，选择了本月的星期一/星期六，但是当我单击下一个/上一个按钮或更改月份时，我的选择消失了。我还需要选择一整年。怎么做？ 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属性（其中包含时刻日期对象）中提取年份，并根据需要在年份中设置类别。

例如：

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>

如何在完整日历中选择全年的工作日或周末？

1 个答案: