Question

我正在使用 fullcalendar 来实施学校的课程安排，课程在整个月的特定日期，例如课程可以在 TTH 或< strong> MWF ， TWTH 等。

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

{{1}}

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

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

{{1}}

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

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

Answer 1

那个很有趣！因此，诀窍是隐藏我们不希望在月视图中看到的.fc-week行。然后，我们不必乱用正常的导航。

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

包含当月1日的一周
第一个完整的一周（上个月没有一天）

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

随意提出任何问题！ ;）

// 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>

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

1 个答案: