Je souhaite avoir deux périodes dans le calendrier complet définies par slotMinTime et slotMaxTime

Question

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 :

$(".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>

Answer 1

FullCalendar ne vous permet pas de définir deux valeurs minimales et maximales différentes sur le même calendrier.

Pour résoudre ce problème tout en atteignant votre objectif de respecter une fenêtre de 45 minutes et de faire une pause à midi (quand aucune activité ne peut être créée), vous pouvez

• Réduisez la slotDuration à 15 minutes et
• Utilisez selectAllow pour limiter la durée de la période que l'utilisateur peut réellement sélectionner, et
• Utilisez businessHours pour marquer les périodes indisponibles et utilisez selectConstraint pour garantir que les utilisateurs ne peuvent pas ajouter d'événements pendant cette période.

$(".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>