Saya mahu mempunyai dua tempoh masa dalam kalendar penuh yang ditakrifkan oleh slotMinTime dan slotMaxTime
P粉617237727
2023-09-04 11:32:30
<p>Saya bercadang untuk menggunakan dua tempoh berbeza dalam kalendar yang sama.Satu-satunya cara yang saya temui setakat ini ialah melakukannya dalam dua kalendar berbeza, seperti ini: </p>
<p>
<pre class="brush:js;toolbar:false;">$(".btn-show").klik(fungsi(e) {
e.preventDefault();
el = $(this).data('elemen');
$(el).tunjukkan();
$("bahagian > 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';
}lain{
initialViews = 'timeGridWeek';
}
var calendarEl = document.getElementById('calendario');
var today = moment().hari();
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
kiri: 'sebelumnya, hari ini seterusnya',
pusat: 'tajuk',
kanan: 'dayGridMonth, timeGridWeek, timeGridDay'
},
tempat: "pt-br",
butangTeks:{
hari ini: 'Hoje',
senarai: 'Lista'
},
navLinks: benar,
hari pertama: hari ini,
hiddenDays: [ 0 ],
initialViews: initialViews,
boleh disunting: benar,
boleh dipilih: benar,
nyahpilihAuto:benar,
pertindihan acara: palsu,
Warna acara: '#f16621',
slotDuration: '00:45',
allDaySlot : palsu,
eventStartEditable: palsu,
eventDurationEditable:false,
longPressDelay: 0,
nowIndicator: "benar",
slotMinMasa: '10:30',
slotMaxTime: '12:00',
contentHeight: 'auto',
});
calendar.render();
});
$(document).on('click', '.dad-visita', function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
initialViews = 'timeGridWeek';
}lain{
initialViews = 'timeGridWeek';
}
var calendarEl = document.getElementById('calendario1');
var today = moment().hari();
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
kiri: 'sebelumnya, hari ini seterusnya',
pusat: 'tajuk',
kanan: 'dayGridMonth, timeGridWeek, timeGridDay'
},
tempat: "pt-br",
butangTeks:{
hari ini: 'Hoje',
senarai: 'Lista'
},
navLinks: benar,
hari pertama: hari ini,
hiddenDays: [ 0 ],
initialViews: initialViews,
boleh disunting: benar,
boleh dipilih: benar,
nyahpilihAuto:benar,
pertindihan acara: palsu,
Warna acara: '#f16621',
slotDuration: '00:45',
allDaySlot : palsu,
eventStartEditable: palsu,
eventDurationEditable:false,
longPressDelay: 0,
nowIndicator: "benar",
slotMinMasa: '14: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=" lembaran gaya">
<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>
<skrip 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>
Lawatan Perunding
</a>
<id bahagian="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>Tetapi kemudian saya perlu mempunyai dua kalendar, yang bukan cara yang betul. Sebab saya perlu melakukan ini ialah saya memerlukan slotDuration menjadi 45 minit dan pada waktu pagi ia akan mengandaikan masa acara dengan betul.</p>
<p>Tetapi aktiviti petang bermula dari 14:30, dan dengan slotDuration ini, jika anda menetapkan slotMinTime kepada 10:30 dan slotMaxTime kepada 19:00, kalendar untuk aktiviti petang akan bermula dari 14:15, seperti Contoh ditunjukkan : </p>
<p>
<pre class="brush:js;toolbar:false;">$(".btn-show").klik(fungsi(e) {
e.preventDefault();
el = $(this).data('elemen');
$(el).tunjukkan();
$("bahagian > 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';
}lain{
initialViews = 'timeGridWeek';
}
var calendarEl = document.getElementById('calendario');
var today = moment().hari();
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
kiri: 'sebelumnya, hari ini seterusnya',
pusat: 'tajuk',
kanan: 'dayGridMonth, timeGridWeek, timeGridDay'
},
tempat: "pt-br",
butangTeks:{
hari ini: 'Hoje',
senarai: 'Lista'
},
navLinks: benar,
hari pertama: hari ini,
hiddenDays: [ 0 ],
initialViews: initialViews,
boleh disunting: benar,
boleh dipilih: benar,
nyahpilihAuto:benar,
pertindihan acara: palsu,
Warna acara: '#f16621',
slotDuration: '00:45',
allDaySlot : palsu,
eventStartEditable: palsu,
eventDurationEditable:false,
longPressDelay: 0,
nowIndicator: "benar",
slotMinMasa: '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=" lembaran gaya">
<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>
<skrip 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>
Lawatan Perunding
</a>
<id bahagian="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>Apabila bermula pada 14:15, ia cepat mengembalikan masa yang saya inginkan untuk semua acara petang yang berbeza. </p>
<p>Saya masih tidak dapat mencari penyelesaian untuk masalah ini.</p>
<p><strong>带有 pilih Benarkan 的代码：</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$(".btn-show").klik(fungsi(e) {
e.preventDefault();
el = $(this).data('elemen');
$(el).tunjukkan();
$("bahagian > 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';
}lain{
initialViews = 'timeGridWeek';
}
var calendarEl = document.getElementById('calendario');
var today = moment().hari();
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
kiri: 'sebelumnya, hari ini seterusnya',
pusat: 'tajuk',
kanan: 'dayGridMonth, timeGridWeek, timeGridDay'
},
tempat: "pt-br",
butangTeks:{
hari ini: 'Hoje',
senarai: 'Lista'
},
navLinks: benar,
hari pertama: hari ini,
hiddenDays: [ 0 ],
initialViews: initialViews,
boleh disunting: benar,
boleh dipilih: benar,
nyahpilihAuto:benar,
pertindihan acara: palsu,
Warna acara: '#f16621',
slotDuration: '00:15',
allDaySlot : palsu,
eventStartEditable: palsu,
eventDurationEditable:false,
longPressDelay: 0,
nowIndicator: "benar",
slotMinMasa: '10:30',
slotMaxTime: '19:00',
contentHeight: 'auto',
pilih: fungsi(mula, tamat) {
var start1 = moment((start.startStr)).format('HH:mm:ss');
jika(mula1 == '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");
}
},
});
calendar.render();
});</pra>
<pre class="brush:html;toolbar:false;"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/ bootstrap.min.css">
<pautan 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>
<skrip 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>
Lawatan Perunding
</a>
<id bahagian="s160">
<div style="display:none;" id="minhaDiv160">
<div class="cal-wrapper"><div id='calendario'></div></div>
</div>
</section>
<div class="modal fade" tabindex="-1" id="ModalAddVisit" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="statik" data- 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="row">
<div class="col-6">
<label untuk="mula"> <strong>DATA/HORA INICIAL</strong> <span style="color: red;">*</span></label>
<input type="text" name="start" id="start" diperlukan>
</div>
<div class="col-6">
<label untuk="end"> <strong>DATA/HORA FINAL</strong> <span style="color: red;">*</span></label>
<input type="text" name="end" id="end" diperlukan>
</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 validatevisit" id="save-event">Gravar</button>
</div>
</form>
</div>
</div>
</div>
</div></pre>
</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
FullCalendar tidak membenarkan anda menetapkan dua nilai minimum dan maksimum berbeza pada kalendar yang sama.
Untuk membetulkan perkara ini tetapi masih mencapai matlamat anda untuk menguatkuasakan tetingkap 45 minit dan berehat pada tengah hari (apabila tiada aktiviti boleh dibuat), anda boleh
$(".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:15', allDaySlot: false, eventStartEditable: false, eventDurationEditable: false, longPressDelay: 0, nowIndicator: "true", slotMinTime: '10:30', slotMaxTime: '19:00', contentHeight: 'auto', selectConstraint: "businessHours", selectAllow: function(info) { var start = moment(info.start); var end = moment(info.end); var diff = end.diff(start, 'minutes'); return (diff == 45); }, businessHours: [ { daysOfWeek: [0, 1, 2, 3, 4, 5, 6], startTime: '10:00', endTime: '12:00' }, { daysOfWeek: [0, 1, 2, 3, 4, 5, 6], startTime: '14:30', endTime: '19:00' } ], select: function(info) { var start1 = moment((info.startStr)).format('HH:mm:ss'); $('#ModalAddVisit #start').val(moment((info.startStr)).format('YYYY-MM-DD' + " " + '14:30:00')); $('#ModalAddVisit #end').val(moment((info.startStr)).format('YYYY-MM-DD' + " " + '15:15:00')); $("#ModalAddVisit").modal("show"); } }); calendar.render(); });<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> Consultar Visitas </a> <section id="s160"> <div style="display:none;" id="minhaDiv160"> <div class="cal-wrapper"> <div id='calendario'></div> </div> </div> </section> <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="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="row"> <div class="col-6"> <label for="start"> <strong>DATA/HORA INICIAL</strong> <span style="color: red;">*</span></label> <input type="text" name="start" id="start" required> </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" required> </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 validatevisit" id="save-event">Gravar</button> </div> </form> </div> </div> </div> </div>