Fullcalendar 使用周视图，按月而不是按周导航

Question

我正在使用 fullcalendar 为一所学校实施时间表，其中课程在整个月的特定日期进行，例如课程可以在 TTH 或 MWF、TWTH 等

我正在尝试实现周视图，但我想逐月导航，因此我不必在整个月的每个特定日期都显示相同的课程（月视图）。受this question 的启发，我尝试实现以下内容：

$('#calendar').fullCalendar({
defaultView: 'customWeek',
views: {
    customWeek: {
        type: 'week',
        duration: {months: 1}
    }
}
});

但是这个实现并没有强制视图在月初开始，所以如果我浏览日历，下一个视图将在每月的第二天或第三天，或者有时在最后一天开始上个月。

我还尝试使它在月视图上与 CSS 一起使用，使其看起来像周视图：

.fc-day-top .fc-day-number{
   display: none;
}

.fc td {
  border-bottom: 0 !important;
  border-top: 0 !important;
}

.fc-head {
  border-top: 1px solid black !important;
  border-bottom: 1px solid black !important;
}
.fc-body{
  border-bottom: 1px solid black !important;
}

但我丢失了日历开头的时间段，事件卡在了顶部，看起来很糟糕。

所以我正在寻找完成这项任务的最佳方法。

Answer 1

那个很有趣！所以诀窍是隐藏我们不想在月视图中看到的.fc-week 行。这样，我们就不必乱用正常的导航了。

为此，我们必须定位我们想要查看的行。我在这里做了两个选择：

1. 包含该月 1 日的那一周
2. 第一个完整的一周（没有上个月的一天）

它可以使用两个布尔值在代码中“切换”。现在设置为第二个选项。

请随时提出任何问题！ ;)

// Switches about what to display
// Use only one of the two to true.
var FIND_first_full_week = true;
var FIND_first_day_of_month = false;


$("#calendar").fullCalendar({

  viewRender: function(){
    var ShowWeek;
    var weeks = $(".fc-week");

    // Find the first day of the month
    if(FIND_first_day_of_month){
      for(i=0;i<weeks.length;i++){
        var days = weeks.eq(i).find(".fc-day-number");
        days.each(function(){
          if( $(this).html()=="1" && !$(this).parent().is(".fc-other-month") ){
            ShowWeek = i;
          }
        });
      }
    }
    
    // Find first full week of the month (no day in past month)
    if(FIND_first_full_week){
      for(i=0;i<weeks.length;i++){
        var firstFullWeek = false;
        var dayCount=0;

        var days = weeks.eq(i).find(".fc-day-number");
        days.each(function(){
          if(!firstFullWeek){
            if( !$(this).parent().is(".fc-other-month") ){
              dayCount++;
              if(dayCount==7){
                firstFullWeek = true;
                ShowWeek = i;
                i = weeks.length;
              }
            }
          }
        });
      }
    }
    
    // Fix FullCalendar display!
    setTimeout(function(){
      weeks.not(weeks.eq(ShowWeek)).css({"display":"none"});
      var weekHeight = weeks.height();
      $(".fc-day-grid-container").css({"height":weekHeight});
    },10);
  }
});

/* Your CSS */
.fc td {
  border-bottom: 0 !important;
  border-top: 0 !important;
}

.fc-head {
  border-top: 1px solid black !important;
  border-bottom: 1px solid black !important;
}
.fc-body{
  border-bottom: 1px solid black !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

<div id="calendar"></div>