<p>同じカレンダーで 2 つの異なる期間を使用する予定です。私がこれまでに見つけた唯一の方法は、次のように 2 つの異なるカレンダーで実行することです。
<p>
<pre class="brush:js;toolbar:false;">$(".btn-show").click(function(e) {
e.preventDefault();
el = $(this).data('要素');
$(el).show();
$("セクション > div").not(el).hide();
});
$(document).on('click', '.dad-visita', function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
初期ビュー = 'timeGridWeek';
}それ以外{
初期ビュー = 'timeGridWeek';
}
var CalendarEl = document.getElementById('calendario');
var today = moment().day();
var Calendar = new FullCalendar.Calendar(calendarEl, {
ヘッダーツールバー: {
左: '今日の前、次'、
中央: 'タイトル'、
右: 'dayGridMonth、timeGridWeek、timeGridDay'
}、
ロケール: "pt-br",
ボタンテキスト:{
今日：「ホジェ」、
リスト：「リスタ」
}、
ナビリンク: true、
firstDay: 今日、
hiddenDays: [ 0 ]、
初期ビュー: 初期ビュー、
編集可能: true、
選択可能: true、
unselectAuto: true、
イベントオーバーラップ: false、
イベントカラー: '#f16621',
スロット期間: '00:45',
allDaySlot : false、
イベント開始編集可能: false、
eventDurationEditable:false、
長押し遅延: 0、
nowIndicator: "true"、
スロット最小時間: '10:30'、
スロット最大時間: '12:00',
contentHeight: '自動',
});
カレンダー.レンダー();
});
$(document).on('click', '.dad-visita', function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
初期ビュー = 'timeGridWeek';
}それ以外{
初期ビュー = 'timeGridWeek';
}
var CalendarEl = document.getElementById('calendario1');
var today = moment().day();
var Calendar = new FullCalendar.Calendar(calendarEl, {
ヘッダーツールバー: {
左: '今日の前、次'、
中央: 'タイトル'、
右: 'dayGridMonth、timeGridWeek、timeGridDay'
}、
ロケール: "pt-br",
ボタンテキスト:{
今日：「ホジェ」、
リスト：「リスタ」
}、
ナビリンク: true、
firstDay: 今日、
非表示日: [ 0 ]、
初期ビュー: 初期ビュー、
編集可能: true、
選択可能: true、
unselectAuto: true、
イベントオーバーラップ: false、
イベントカラー: '#f16621',
スロット期間: '00:45',
allDaySlot : false、
イベント開始編集可能: false、
eventDurationEditable:false、
長押し遅延: 0、
nowIndicator: "true"、
スロット最小時間: '14:30',
スロット最大時間: '19:00',
contentHeight: '自動',
});
カレンダー.render();
});</pre>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel="スタイルシート」>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>
<a href="s160" data-element="#minhaDiv160" class="btn-show お父さん訪問">
<i class="metismenu-icon pe-7s-info"></i>
コンサルタントの訪問
</a>
<section id="s160">
<div style="display:none;" id="minhaDiv160">
<div class="cal-wrapper"><div id='calendario'></div></div>
<div class="cal-wrapper"><div id='calendario1'></div></div>
</div>
</section></pre>
</p>
<p>但是这样我就必须有两个日历，这不是正确的方法。我必须这样做的原因是我需要 slotDuration 为 45 分钟，并且在早上它会正确假设事件的时间。</p>
<p>但是下午的活动从 14:30 开始，并且通过此 slotDuration，如果您将 slotMinTime 设置为 10:30，将 slotMaxTime 设置为 19:00，则下午活动的日历将从 14:15 开始，如示例所示： </p>
<p>
<pre class="brush:js;toolbar:false;">$(".btn-show").click(function(e) {
e.preventDefault();
el = $(this).data('element');
$(el).show();
$("section > div").not(el).hide();
});
$(document).on('click', '.dad-visita', function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
initialViews = 'timeGridWeek';
}else{
initialViews = 'timeGridWeek';
}
var calendarEl = document.getElementById('calendario');
var today = moment().day();
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
locale: "pt-br",
buttonText:{
today: 'Hoje',
list: 'Lista'
},
navLinks: true,
firstDay: today,
hiddenDays: [ 0 ],
initialView: initialViews,
editable: true,
selectable: true,
unselectAuto:true,
eventOverlap: false,
eventColor: '#f16621',
slotDuration: '00:45',
allDaySlot : false,
eventStartEditable: false,
eventDurationEditable:false,
longPressDelay: 0,
nowIndicator: "true",
slotMinTime: '10:30',
slotMaxTime: '19:00',
contentHeight: 'auto',
});
calendar.render();
});</pre>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel="スタイルシート」>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>
<a href="s160" data-element="#minhaDiv160" class="btn-show お父さん訪問">
<i class="metismenu-icon pe-7s-info"></i>
コンサルタントの訪問
</a>
<section id="s160">
<div style="display:none;" id="minhaDiv160">
<div class="cal-wrapper"><div id='calendario'></div></div>
<div class="cal-wrapper"><div id='calendario1'></div></div>
</div>
</section></pre>
</p>
<p>14:15 に開始すると、午後のさまざまなイベントすべてに必要な時間がすぐに返されます。 </p>
<p>この問題の解決策はまだ見つかりません。</p>
<p><strong>带有 selectAllow 的代価：</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$(".btn-show").click(function(e) {
e.preventDefault();
el = $(this).data('要素');
$(el).show();
$("セクション > div").not(el).hide();
});
$(document).on('click', '.dad-visita', function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
初期ビュー = 'timeGridWeek';
}それ以外{
初期ビュー = 'timeGridWeek';
}
var CalendarEl = document.getElementById('calendario');
var today = moment().day();
var Calendar = new FullCalendar.Calendar(calendarEl, {
ヘッダーツールバー: {
左: '今日の前、次'、
中央: 'タイトル'、
右: 'dayGridMonth、timeGridWeek、timeGridDay'
}、
ロケール: "pt-br",
ボタンテキスト:{
今日：「ホジェ」、
リスト：「リスタ」
}、
ナビリンク: true、
firstDay: 今日、
非表示日: [ 0 ]、
初期ビュー: 初期ビュー、
編集可能: true、
選択可能: true、
unselectAuto: true、
イベントオーバーラップ: false、
イベントカラー: '#f16621',
スロット期間: '00:15',
allDaySlot : false、
イベント開始編集可能: false、
eventDurationEditable:false、
長押し遅延: 0、
nowIndicator: "true"、
スロット最小時間: '10:30'、
スロット最大時間: '19:00',
contentHeight: '自動',
選択: 関数(開始、終了) {
var start1 = moment((start.startStr)).format('HH:mm:ss');
if(start1 == '14:15:00'){
$('#ModalAddVisit #start').val(moment((start.startStr)).format('YYYY-MM-DD' " " '14:30:00'));
$('#ModalAddVisit #end').val(moment((start.startStr)).format('YYYY-MM-DD' " " '15:15:00'));
$("#ModalAddVisit").modal("show");
}
}、
});
カレンダー.render();
});</pre>
<pre class="brush:html;toolbar:false;"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/ bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<a href="s160" data-element="#minhaDiv160" class="btn-show お父さん訪問">
<i class="metismenu-icon pe-7s-info"></i>
コンサルタントの訪問
</a>
<section id="s160">
<div style="display:none;" id="minhaDiv160">
<div class="cal-wrapper"><div id='calendario'></div></div>
</div>
</セクション>
<div class="modal fade" tabindex="-1" id="ModalAddVisit" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data- bs-keyboard="false">
<div class="modal-dialog modal-lg" role="document">
<div class="モーダルコンテンツ">
<div class="モーダルヘッダー">
<h5 class="modal-title" id="exampleModalLabel">NOVA VISITA</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="モーダルボディ">
<form method="POST" class="row g-3 insvisit">
<div class="行">
<div class="col-6">
<label for="start">
データ/HORA 初期 <span style="color: red;">*</span></label>
<input type="text" name="start" id="start" 必須>
</div>
<div class="col-6">
<label for="end"> <gt;データ/ホラ最終</strong> <span style="color: red;">*</span></label>
<input type="text" name="end" id="end" 必須>
</div>
</div>
<div class="モーダルフッター">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary validatevisit" id="save-event">Gravar</button>
</div>
</フォーム>
</div>
</div>
</div>
</div></pre>
</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
FullCalendar では、同じカレンダーに 2 つの異なる最小値と最大値を設定することはできません。
これを回避しながら、45 分間の時間を強制し、正午 (アクティビティを作成できないとき) に休憩を取るという目標を達成するには、次の方法を実行できます。
slotDuration- を 15 分に短縮し、
ユーザーが実際に選択できる期間の長さを制限するには、
selectAllow- を使用し、
businessHours- を使用して使用できない期間をマークし、selectConstraint を使用してこの期間中にユーザーがイベントを追加できないようにします。
リーリー リーリー