デザイン12月スロット

Question

サンプル・ビューのカスタム年ビュー：私は毎月スロットにタイムラインを表示するためのカスタム年のビューを作成したいと思います

を。私は、カスタムビューでfullcalendarスケジューラを使用して、次のように定義することができます。

views: { 
    timelineCustom: { 
    type: 'timeline', 
    buttonText: 'Year View',    
    duration: {year:1}, 
    slotDuration: {month:1} 
    } 
} 

はしかし、来年3月31で4月1日と最後の月の開始に伴い当連結会計年度のビューを設定する方法はありません。また、イベントがその月の後半から始まるにもかかわらず、タイムラインバーは1ヶ月間のスロットをカバーします。

Answer 1

最初の問題は、新しい「visibleRange」オプションを使用して4月に開始し、3月に終了するという問題を解決できます。これにより、ビューの開始日/終了日を「currentDate」（つまり、現在のfullCalendarの日付が選択されていると見なされる日付）に対して相対的に指定できます。 「次へ/前へ」が現在の日付を1年増分するようにするには、「dateIncrement」オプションも設定する必要があります。

N.B.これには、fullCalendar 3.3.0およびスケジューラ1.6.0以降が必要です。

timelineCustom: { 
    type: 'timeline', 
    buttonText: 'Year View', 
    dateIncrement: { years: 1 }, 
    slotDuration: { months: 1 }, 
    visibleRange: function(currentDate) { 
     return { 
      start: currentDate.clone().startOf('year').add({ months: 3}), 
      end: currentDate.clone().endOf("year").add({ months: 4}) 
     }; 
    } 
} 

しかし、タイムラインバーが全体の月のスロットをカバーし、あなたの問題は、イベントが唯一の月の後半に開始していても、本当に解けない詳細

ためhttps://fullcalendar.io/docs/current_date/visibleRange/とhttps://fullcalendar.io/docs/current_date/dateIncrement/を参照してください。あなたが望む方法。 「スロット」の全ポイントは、特定のビューののイベントを表示できる最小時間になります。それよりも微妙にしたい場合は、より短いスロットを定義する必要があります。 fullCalendarのデフォルトの「月間」（非タイムライン）ビューでも同じことが起こります。すべてのイベントは時間切れであっても1日をカバーしますが、その記述の時間を見ることができます。あなたの例では、説明に表示されているイベントの日付がすでに表示されていることがわかります。そのため、ユーザーにとっては合理的であるはずです。

ユーザーに[月間表示]をクリックすると、スロットの期間をより正確に表示してより詳細な内訳が表示されます。どちらかを妥協してslotDurationをもっと小さくする必要があります。