平日ビューのフルカレンダーをカスタマイズするにはどうすればよいですか？

Question

完全なカレンダーを使用してこのタイプのビューを取得するにはどうすればよいですか？

画像でわかるように、私は平日のみヘッダーにします。

Answer 1

私はあなたがこのために探していると思う：

$('#calendar').fullCalendar({ 
    defaultView: 'agendaWeek', 
    weekends: false // will hide Saturdays and Sundays 
}); 

これは、基本的な使用方法のドキュメントで見つけることができます。 https://fullcalendar.io/docs/usage/

Answer 2

FullCalendarには、繰り返しイベントの完全な概念はありません。複数の曜日にイベントを表示しますが、より洗練されたルール（「毎週月曜日」など）を使用してイベントを繰り返すことはできません。

これを解決するには、カスタマイズが必要です。幸運なことに、これは基本的なコードを変更することなく、APIを通じて行うことができます。 1つの方法は、イベントオブジェクトの構造を少し変更し、カスタムデータを読み込んで、単一の「イベント」オブジェクトに基づいて適切な繰り返しイベントを作成するように、カスタムコードをfullCalendarの「eventRender」コールバックに書き込むことですそれに餌を与えた。

$(document).ready(function() { 
 
    var repeatingEvents = [{ 
 
    "id": "1", 
 
    "title": "Event 1", 
 
    //in "start and "end", only set times of day, not dates. 
 
    "start": "09:00", 
 
    "end": "10:00", 
 
    //use standard dow property to define which days of the week the event will appear on 
 
    "dow": "1", 
 
    //the custom "ranges" sets when the repetition begins and ends 
 
    "ranges": [{ 
 
     "start": "2017-06-01", 
 
     "end": "2017-06-30" 
 
    }], 
 
    "allDay": false 
 
    }, { 
 
    "id": "2", 
 
    "title": "Event 2", 
 
    "start": "10:00", 
 
    "end": "12:00", 
 
    "dow": "2", 
 
    "ranges": [{ 
 
     "start": "2017-05-10", 
 
     "end": "2017-07-16" 
 
    }], 
 
    "allDay": false 
 
    }, { 
 
    "id": "3", 
 
    "title": "Event 3", 
 
    "start": "15:00", 
 
    "end": "16:30", 
 
    "dow": "3", 
 
    "ranges": [{ 
 
     "start": "2017-06-01", 
 
     "end": "2017-06-30" 
 
    }], 
 
    "allDay": false 
 
    }]; 
 

 
    $('#calendar').fullCalendar({ 
 
    hiddenDays: [0], //hide Sundays as per your screenshot 
 
    minTime: "07:00", 
 
    maxTime: "22:00", 
 
    defaultView: 'agendaWeek', 
 
    events: repeatingEvents, 
 
    //custom code to create repeating events from the data 
 
    eventRender: function(event) { 
 
     return (event.ranges.filter(function(range) { // test event against all the ranges 
 

 
     return (event.start.isBefore(range.end) && 
 
      event.end.isAfter(range.start)); 
 

 
     }).length) > 0; //if it isn't in one of the ranges, don't render it (by returning false) 
 
    } 
 
    }); 
 
});

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script> 
 
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/gcal.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" rel="stylesheet" media="all" /> 
 
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" media="all" /> 
 

 
<div id='calendar'></div>

残念ながら、このソリューションは、すべての日のイベントでは動作しませんが、そうでなければ、私はそれは便利です願っています。

P.S. https://stackoverflow.com/a/29393128/5947043