web-dev-qa-db-ja.com

Fullcalendar jqueryプラグインの年ビュー

私はフルカレンダーでYearViewを開始しました（基本的な 'MonthView'から派生し、学校の休みなどの長いイベントを表示するために必要です）。

  1. 「BasicEventRenderer」を使用して、「DayEventRenderer」の「segmentContainer」をどのように設定しますか？
  2. そして、アクティブな年を区切るためにデフォルトの開始終了日をいつ初期化するのですか？ （開始月は変更される可能性があり、現在の月と当日にハイライトを維持できるのは素晴らしいことです）。

https://github.com/Paulmicha/fullcalendar で私のgithubフォークを参照してください

->サンプルファイルは https://github.com/Paulmicha/fullcalendar/blob/master/tests/year-view-test-01.html

enter image description here

javascriptjqueryjquery-pluginsfullcalendar
33
Paul

FullCalendarドキュメント： http://arshaw.com/fullcalendar/docs/

イベントをJSONとして読み込む： http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

レンダリングイベント： http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/

レンダリングイベントの例：

fc.fullCalendar('renderEvent', {
    'id': 1,
    'title': 'Test Event 1',
    'start': '2009-11-05T13:15:30Z',
    'end': '2009-11-05T13:30:00Z'
});

利用可能な月の表示を制限します： フルカレンダーは利用可能な月の表示を制限しますか？

10
Eduardo Cuomo

または、次のような年次ビューが必要な場合： enter image description here

npmでインストールできます https://www.npmjs.com/package/fullcalendar-year-view

手順：

cd yourFileLocation
npm init (press enter)
npm i fullcalendar-year-view

Libファイルを取得するには、yourFileLocation/node_modules/fullcalendar-year-view/dist/

または、browserifyをページに使用できます

Cssおよびjs libファイルをページに含める

最後に「年」ビューを使用します

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'year,month,basicWeek,basicDay'
  }
  ....
2
Devsullo

ユーザーインターフェイスの代替手段は bootstrap-year-calendar になると思います。これにより、年全体を表示し、1日に1つまたは複数の値を配置できますが、値はホバーまたはクリックでのみ表示されます。

私の必要のために、それはトリックをしました。

2
tabacitu