ありがとうございます。Fullcalendar Schedulerの期間をカスタマイズする方法は
私はfullcalendarスケジューラのものをcustimizingと苦労しています。
私はちょうど以下のようにweektimetableを表示したいと思います。 （参考のため、以下のCSSは私が編集したものですが、もちろん私の望む答えではありません）
元のfullcalendarスケジューラーのweekshotの場合、同じyポイントを持つことはできません私はこれをカスタマイズしたいと思っています。
あなたのアドバイスをしてください、ありがとう
あなたはこのシナリオを作成するために使用している正確なイベント・データを見なければ、それは問題がある正確に何を確認するのは難しいです。しかし、ここに私の提案があります：
あなたは2つのイベントを並べて欲しいと思っていますが、時間が重なっている限り、決してできません。時間が重複しない場合でも、イベント1の終了とイベント2の開始がスロットの途中にある場合、それらは重複しているように見えます。
はのは、以下のスニペットを使用してポイントを説明してみましょう：
デモに2つのカレンダーは（1秒を表示するには、スクロールダウン）があります。どちらのカレンダーも同じリソースとイベントを持っています。
カレンダーは1日間隔でしか表示されないため、最初のカレンダーでは重複して表示されます。その日の文脈の中では、事象は依然として重なっている。その日には1つのスロットしか置くことができません。
ただし、2番目のカレンダーでは、スロットの継続時間（12時間）が今度は イベントが別のスロットに配置されるのに十分なほど短いため、2番目のリソースのイベントが並べて表示されますそれらの開始/終了時間。
$(function() { // document ready
$('#calendar1').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: {
days: 1
},
resources: [{
"id": 1,
"title": "Screenshot 1"
},
{
"id": 2,
"title": "Screenshot 2"
},
],
events: [{
id: '1',
resourceId: "1",
start: '2017-06-01',
end: '2017-06-04',
title: 'event 1'
},
{
id: '2',
resourceId: "1",
start: '2017-06-03',
end: '2017-06-06',
title: 'event 2'
},
{
id: '3',
resourceId: "2",
start: '2017-06-01',
end: '2017-06-03T12:00',
title: 'event 3'
},
{
id: '4',
resourceId: "2",
start: '2017-06-03T12:00',
end: '2017-06-06',
title: 'event 4'
}
]
});
$('#calendar2').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: {
hours: 12
},
resources: [{
"id": 1,
"title": "Screenshot 1"
},
{
"id": 2,
"title": "Screenshot 2"
},
],
events: [{
id: '1',
resourceId: "1",
start: '2017-06-01',
end: '2017-06-04',
title: 'event 1'
},
{
id: '2',
resourceId: "1",
start: '2017-06-03',
end: '2017-06-06',
title: 'event 2'
},
{
id: '3',
resourceId: "2",
start: '2017-06-01',
end: '2017-06-03T12:00',
title: 'event 3'
},
{
id: '4',
resourceId: "2",
start: '2017-06-03T12:00',
end: '2017-06-06',
title: 'event 4'
}
]
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" media="all" />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.css' rel='stylesheet' />
<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.4.0/fullcalendar.min.js"></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.js'></script>
<div id='calendar1'></div>
<br/><br/>
<div id='calendar2'></div>だから、結論では、あなたが望む効果を得るために、あなたは
私は時間の長さに気付かなかった。実際、私はあなたがそれをする前にこの問題を解決しました。 –
@JasonSon問題ありません。あなたの理解が助けになった/あなたの理解を確認した場合、将来の読者がこれが有用な情報であることを知るために、それを合格とマークすることを検討してください。ありがとう。 – ADyson
私はセカンドショットのようにしたいです。私はあなたが私の意図を理解してもらいたい。ありがとうございます。 –