2016-06-27 8 views
1

月表示では、現在の月だけ列ヘッダーにどのように表示できますか?Fullcalendar - 月表示の列ヘッダー

例えば、これは7月の図である。

enter image description here

あなたが見ることができるように、最初の4列はまだ私はビューの最初の4日間はしているからだと思います(6月を示しています六月)。私はcolumnFormat

+0

月名がheader-> titleであるため、なぜ 'ddd'を使用しないのですか? – Yuri

+0

@Yuriヘッダーは表示されないため – SharonKo

答えて

0

に月のddd, MMM YYYY形式を使用してい

はので、ここでは、条件付きの日付形式を追加する最も簡単な方法です方法はありません。列ヘッダーに格納されている日付をチェックし、その日が前月のものである場合は、ヘッダーからspan要素を削除します。この関数は、fullCalendarの初期化時にviewRender:で定義されます。

viewRender: function() { 
    var daysOfWeek = []; 
    var tableHeaders = []; 

    //collect all table headers 
    $(".fc-chrono th").each(function() { 
     daysOfWeek.push(moment(this.attr("data-date")).get('date')); //store day, like 31 
     tableHeaders.push(this); //store element 
    }); 

    //check if the border between month is somewhere here 
    var isBetweenTwoMonths = false; 
    var locationOfMonthBorder = null; 
    for (var i = 0; i < daysOfWeek.length - 1; i++) { 
     if (daysOfWeek[i] > daysOfWeek[i+1]) { // e.g. 31 > 1 
      isBetweenTwoMonths = true; 
      locationOfMonthBorder = i; 
      break; 
     } 
    } 

    //now remove all the column header texts up to the first day of next month 
    if (isBetweenTwoMonths) { 
     for (var i = 0; i < locationOfMonthBorder + 1; i++) { 
      tableHeaders[i].find("span.fc-cell-text").remove(); 
     } 
    } 
}