fullcalendar에서 SlotMinTime과 SlotMaxTime으로 정의된 두 개의 기간을 갖고 싶습니다.
P粉617237727
2023-09-04 11:32:30
<p>같은 달력에서 두 개의 서로 다른 기간을 사용할 계획입니다.지금까지 제가 찾은 유일한 방법은 다음과 같이 두 개의 서로 다른 캘린더에서 이 작업을 수행하는 것입니다. </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) ) {
initialViews = 'timeGridWeek';
}또 다른{
initialViews = 'timeGridWeek';
}
var CalendarEl = document.getElementById('calendario');
var today = moment().day();
var Calendar = new FullCalendar.Calendar(calendarEl, {
헤더 도구 모음: {
왼쪽: '이전,다음 오늘',
가운데: '제목',
오른쪽: 'dayGridMonth,timeGridWeek,timeGridDay'
},
로캘: "pt-br",
버튼텍스트:{
오늘: '호제',
목록: '리스타'
},
navLinks: 사실,
firstDay: 오늘,
숨겨진일: [ 0 ],
초기 보기: 초기 보기,
편집 가능: 사실,
선택 가능: 사실,
선택 해제자동:true,
eventOverlap: 거짓,
이벤트색상: '#f16621',
슬롯지속시간: '00:45',
allDaySlot : 거짓,
eventStartEditable: 거짓,
eventDurationEditable:false,
longPressDelay: 0,
지금표시기: "true",
SlotMinTime: '10:30',
슬롯MaxTime: '12:00',
콘텐츠 높이: '자동',
});
Calendar.render();
});
$(document).on('click', '.dad-visita', function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
initialViews = 'timeGridWeek';
}또 다른{
initialViews = 'timeGridWeek';
}
var CalendarEl = document.getElementById('calendario1');
var today = moment().day();
var Calendar = new FullCalendar.Calendar(calendarEl, {
헤더 도구 모음: {
왼쪽: '이전,다음 오늘',
가운데: '제목',
오른쪽: 'dayGridMonth,timeGridWeek,timeGridDay'
},
로캘: "pt-br",
버튼텍스트:{
오늘: '호제',
목록: '리스타'
},
navLinks: 사실,
firstDay: 오늘,
숨겨진일: [ 0 ],
초기 보기: 초기 보기,
편집 가능: 사실,
선택 가능: 사실,
선택 해제자동:true,
eventOverlap: 거짓,
이벤트색상: '#f16621',
슬롯지속시간: '00:45',
allDaySlot : 거짓,
eventStartEditable: 거짓,
eventDurationEditable:false,
longPressDelay: 0,
지금표시기: "true",
SlotMinTime: '14:30',
슬롯MaxTime: '19:00',
콘텐츠 높이: '자동',
});
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>
<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>
<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 Dad-visita">
<i class="metismenu-icon pe-7s-info"></i>
컨설턴트 방문
</a>
<섹션 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>
</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('요소');
$(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) ) {
initialViews = 'timeGridWeek';
}또 다른{
initialViews = 'timeGridWeek';
}
var CalendarEl = document.getElementById('calendario');
var today = moment().day();
var Calendar = new FullCalendar.Calendar(calendarEl, {
헤더 도구 모음: {
왼쪽: '이전,다음 오늘',
가운데: '제목',
오른쪽: 'dayGridMonth,timeGridWeek,timeGridDay'
},
로캘: "pt-br",
버튼텍스트:{
오늘: '호제',
목록: '리스타'
},
navLinks: 사실,
firstDay: 오늘,
숨겨진일: [ 0 ],
초기 보기: 초기 보기,
편집 가능: 사실,
선택 가능: 사실,
선택 해제자동:true,
eventOverlap: 거짓,
이벤트색상: '#f16621',
슬롯지속시간: '00:45',
allDaySlot : 거짓,
eventStartEditable: 거짓,
eventDurationEditable:false,
longPressDelay: 0,
지금표시기: "true",
SlotMinTime: '10:30',
슬롯MaxTime: '19:00',
콘텐츠 높이: '자동',
});
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>
<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>
<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 Dad-visita">
<i class="metismenu-icon pe-7s-info"></i>
컨설턴트 방문
</a>
<섹션 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>
</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) ) {
initialViews = 'timeGridWeek';
}또 다른{
initialViews = 'timeGridWeek';
}
var CalendarEl = document.getElementById('calendario');
var today = moment().day();
var Calendar = new FullCalendar.Calendar(calendarEl, {
헤더 도구 모음: {
왼쪽: '이전,다음 오늘',
가운데: '제목',
오른쪽: 'dayGridMonth,timeGridWeek,timeGridDay'
},
로캘: "pt-br",
버튼텍스트:{
오늘: '호제',
목록: '리스타'
},
navLinks: 사실,
firstDay: 오늘,
숨겨진일: [ 0 ],
초기 보기: 초기 보기,
편집 가능: 사실,
선택 가능: 사실,
선택 해제자동:true,
eventOverlap: 거짓,
이벤트색상: '#f16621',
슬롯지속시간: '00:15',
allDaySlot : 거짓,
eventStartEditable: 거짓,
eventDurationEditable:false,
longPressDelay: 0,
지금표시기: "true",
SlotMinTime: '10:30',
슬롯MaxTime: '19:00',
콘텐츠 높이: '자동',
선택: 기능(시작, 종료) {
var start1 = moment((start.startStr)).format('HH:mm:ss');
if(시작1 == '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("표시");
}
},
});
Calendar.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>
<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>
<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 Dad-visita">
<i class="metismenu-icon pe-7s-info"></i>
컨설턴트 방문
</a>
<섹션 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" 데이터- bs-keyboard="false">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<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="modal-body">
<form method="POST" class="row g-3 insvisit">
<div class="행">
<div class="col-6">
<="시작" 라벨> <strong>DATA/HORA INICIAL</strong> <span style="color: red;">*</span></label>
<input type="text" name="start" id="start" 필수>
</div>
<div class="col-6">
<label for="end"> <strong>DATA/HORA FINAL</strong> <span style="color: red;">*</span></label>
<input type="text" name="end" id="end" 필수>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary verifyvisit" id="save-event">Gravar</button>
</div>
</양식>
</div>
</div>
</div>
</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
FullCalendar를 사용하면 동일한 달력에 두 개의 서로 다른 최소값과 최대값을 설정할 수 없습니다.
이 문제를 해결하면서도 45분 기간을 적용하고 정오(활동을 생성할 수 없는 경우)에 휴식을 취한다는 목표를 달성하려면 다음을 수행하세요.