Je souhaite avoir deux périodes dans le calendrier complet définies par slotMinTime et slotMaxTime
<p>Je prévois d'utiliser deux périodes différentes dans le même calendrier.La seule façon que j'ai trouvée jusqu'à présent est de le faire dans deux calendriers différents, comme ceci : </p>
<p>
<pre class="brush:js;toolbar:false;">$(".btn-show").click(function(e) {
e.preventDefault();
el = $(this).data('élément');
$(el).show();
$("section > div").not(el).hide();
});
$(document).on('clic', '.dad-visita', function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
initialViews = 'timeGridWeek';
}autre{
initialViews = 'timeGridWeek';
}
var calendrierEl = document.getElementById('calendario');
var aujourd'hui = moment().day();
var calendrier = nouveau FullCalendar.Calendar(calendarEl, {
barre d'outils d'en-tête : {
à gauche : 'précédent, suivant aujourd'hui',
centre : 'titre',
à droite : 'dayGridMonth,timeGridWeek,timeGridDay'
},
paramètres régionaux : "pt-br",
Texte du bouton : {
aujourd'hui : 'Hoje',
liste : 'Liste'
},
navLinks : vrai,
premierJour : aujourd'hui,
Jours cachés : [ 0 ],
initialView : initialViews,
modifiable : vrai,
sélectionnable : vrai,
désélectionnerAuto : vrai,
eventOverlap : faux,
couleur de l'événement : '#f16621',
durée du créneau : '00:45',
allDaySlot : faux,
eventStartEditable : faux,
eventDurationEditable : false,
longPressDelay : 0,
maintenantIndicateur : "vrai",
slotMinTime : '10h30',
slotMaxTime : '12h00',
contentHeight: 'auto',
});
calendrier.render();
});
$(document).on('clic', '.dad-visita', function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
initialViews = 'timeGridWeek';
}autre{
initialViews = 'timeGridWeek';
}
var calendrierEl = document.getElementById('calendario1');
var aujourd'hui = moment().day();
var calendrier = nouveau FullCalendar.Calendar(calendarEl, {
barre d'outils d'en-tête : {
à gauche : 'précédent, suivant aujourd'hui',
centre : 'titre',
à droite : 'dayGridMonth,timeGridWeek,timeGridDay'
},
paramètres régionaux : "pt-br",
Texte du bouton : {
aujourd'hui : 'Hoje',
liste : 'Liste'
},
navLinks : vrai,
premierJour : aujourd'hui,
Jours cachés : [ 0 ],
initialView : initialViews,
modifiable : vrai,
sélectionnable : vrai,
désélectionnerAuto : vrai,
eventOverlap : faux,
couleur de l'événement : '#f16621',
durée du créneau : '00:45',
allDaySlot : faux,
eventStartEditable : faux,
eventDurationEditable : false,
longPressDelay : 0,
maintenantIndicateur : "vrai",
slotMinTime : '14h30',
slotMaxTime : '19h00',
contentHeight: 'auto',
});
calendrier.render();
});</pré>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel=" feuille de style">
<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 papa-visita">
<i class="metismenu-icon pe-7s-info"></i>
Visites Consultaires
≪/a>
<identifiant de section="s160">
<div style="affichage:aucun;" id="minhaDiv160">
<div class="cal-wrapper"><div id='calendario'></div></div>
<div class="cal-wrapper"><div id='calendario1'></div></div>
</div>
</section></pré>
</p>
<p>Mais je dois alors avoir deux calendriers, ce qui n'est pas la bonne solution. La raison pour laquelle je dois faire cela est que j'ai besoin que la slotDuration soit de 45 minutes et que le matin, elle assumera correctement l'heure de l'événement.</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',
});
calendrier.render();
});</pré>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel=" feuille de style">
<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 papa-visita">
<i class="metismenu-icon pe-7s-info"></i>
Visites Consultaires
≪/a>
<identifiant de section="s160">
<div style="affichage:aucun;" id="minhaDiv160">
<div class="cal-wrapper"><div id='calendario'></div></div>
<div class="cal-wrapper"><div id='calendario1'></div></div>
</div>
</section></pré>
</p>
<p>Au démarrage à 14h15, il renvoie rapidement les heures souhaitées pour tous les différents événements de l'après-midi. </p>
<p>Je ne trouve toujours pas de solution à ce problème.</p>
<p><strong>带有 selectAllow 的代码：</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$(".btn-show").click(function(e) {
e.preventDefault();
el = $(this).data('élément');
$(el).show();
$("section > div").not(el).hide();
});
$(document).on('clic', '.dad-visita', function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
initialViews = 'timeGridWeek';
}autre{
initialViews = 'timeGridWeek';
}
var calendrierEl = document.getElementById('calendario');
var aujourd'hui = moment().day();
var calendrier = nouveau FullCalendar.Calendar(calendarEl, {
barre d'outils d'en-tête : {
à gauche : 'précédent, suivant aujourd'hui',
centre : 'titre',
à droite : 'dayGridMonth,timeGridWeek,timeGridDay'
},
paramètres régionaux : "pt-br",
Texte du bouton : {
aujourd'hui : 'Hoje',
liste : 'Liste'
},
navLinks : vrai,
premierJour : aujourd'hui,
Jours cachés : [ 0 ],
initialView : initialViews,
modifiable : vrai,
sélectionnable : vrai,
désélectionnerAuto : vrai,
eventOverlap : faux,
couleur de l'événement : '#f16621',
durée du créneau : '00:15',
allDaySlot : faux,
eventStartEditable : faux,
eventDurationEditable : false,
longPressDelay : 0,
maintenantIndicateur : "vrai",
slotMinTime : '10h30',
slotMaxTime : '19h00',
contentHeight: 'auto',
select : fonction (début, fin) {
var start1 = moment((start.startStr)).format('HH:mm:ss');
si(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");
}
},
});
calendrier.render();
});</pré>
<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 papa-visita">
<i class="metismenu-icon pe-7s-info"></i>
Visites Consultaires
≪/a>
<identifiant de section="s160">
<div style="affichage:aucun;" 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="bouton" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
<form method="POST" class="row g-3 insvisit">
<div class="ligne">
<div class="col-6">
<étiquette pour="début"> <strong>DONNÉES/HORA INICIAL</strong> <span style="couleur : rouge;">*</span></label>
<input type="text" name="start" id="start" requis>
</div>
<div class="col-6">
<étiquette pour="fin"> <strong>DONNÉES/HORA FINAL</strong> <span style="couleur : rouge;">*</span></label>
<input type="text" name="end" id="end" requis>
</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>
</formulaire>
</div>
</div>
</div>
</div></pre>
</p>
