FullCalendar - 日表示で特定の時間を非表示にする

Question

jQuery FullCalendarプラグインを使用していて、特定の時間を日表示で非表示にしたいとします。

午前6時から午前10時まで、午後12時から午後4時までカレンダーを表示したいと思います。

私は既にminTime: '6:00'とmaxTime: '14:00'を設定していますが、午前10時から午後12時までの時間も隠す必要があります。

Answer 1

問題はfullcalendarはMoment.jsの持続時間に依存していることです。私が知る限り、あなたは複数の期間である期間を持つことはできません。

しかし、fullcalendarがアジェンダをレンダリングしてから、アジェンダが配置された後にイベントが必要な位置を計算しているようです。 CSSソリューションが許容されるのであれば、あなたは常に次のことができます：

[data-time^="10"]>td, [data-time^="11"]>td, [data-time^="12"]>td 
{ 
    height: 0 !important; 
    border: 0 !important; 
} 

これは、テーブルの行の「データ・タイム」属性を照合することによって動作します。マッチパターンはプレフィックスマッチであるため、入力を省くことができます。 （クローム52の作品）を実証する

https://www.w3.org/TR/css3-selectors/#selectors

編集：あなたは、プレフィックスに一致するように^=を使用したくない場合は、これらを試すことができます。ご覧のとおり、影響を受けた細胞の子供を隠す必要がありました（display: none;）。また、その範囲に該当する日付の時間を除外または変更するには、独自のデータをフィルタリングする必要があります。この予防措置を取らないと何が起こるかを示すいくつかのイベントを含めました。

$(document).ready(function() { 
 
\t $('#calendar').fullCalendar({ 
 
\t \t header: { 
 
\t \t \t left: 'prev,next today', 
 
\t \t \t center: 'title', 
 
\t \t \t right: 'agendaDay' 
 
\t \t }, 
 
\t \t defaultView: 'agendaDay', 
 
\t \t defaultDate: '2016-06-12', 
 
\t \t editable: true, 
 
\t \t eventLimit: true, 
 
\t \t events: [ 
 
\t \t \t { 
 
\t \t \t \t title: 'Meeting', 
 
\t \t \t \t start: '2016-06-12T10:30:00', 
 
\t \t \t \t end: '2016-06-12T12:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Loooong Meeting', 
 
\t \t \t \t start: '2016-06-12T09:30:00', 
 
\t \t \t \t end: '2016-06-12T14:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Lunch', 
 
\t \t \t \t start: '2016-06-12T12:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Meeting', 
 
\t \t \t \t start: '2016-06-12T14:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Happy Hour', 
 
\t \t \t \t start: '2016-06-12T17:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Dinner', 
 
\t \t \t \t start: '2016-06-12T20:00:00' 
 
\t \t \t } 
 
\t \t ] 
 
\t }); 
 
})

[data-time^="10"]>td, 
 
[data-time^="11"]>td, 
 
[data-time^="12"]>td 
 
{ 
 
    height: 0 !important; 
 
    border: 0 !important; 
 
} 
 

 
[data-time^="10"]>td *, 
 
[data-time^="11"]>td *, 
 
[data-time^="12"]>td * 
 
{ 
 
    display: none !important; 
 
}

<link href="http://fullcalendar.io/js/fullcalendar-2.9.1/fullcalendar.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script> 
 
<script src="http://fullcalendar.io/js/fullcalendar-2.9.1/fullcalendar.min.js"></script> 
 
<div id="calendar"></div>