'Schedule Selector when creating events

I want to prevent the user from being able to select multiple times when creating the event, but I don't know how to do this, for example, when an event is at 11am, I can only select that time.enter image description here


> $(document).ready(function() {
  
  var date = new Date();
  var yyyy = date.getFullYear().toString();
  var mm = (date.getMonth()+1).toString().length == 1 ? "0"+(date.getMonth()+1).toString() : (date.getMonth()+1).toString();
  var dd  = (date.getDate()).toString().length == 1 ? "0"+(date.getDate()).toString() : (date.getDate()).toString();

  //var dia1 = $('#dias_laborales').attr('data-from-1');
  //var dia2 = $('#dias_laborales').attr('data-from-2');
  //var dia3 = $('#dias_laborales').attr('data-from-3');

    $('#calendar').fullCalendar({
      header: {
            language: 'es',
            left: 'title',
            center: 'month,agendaWeek,agendaDay,list',
            right: 'prev,next,today'
        },
        defaultView: 'agendaWeek',
        defaultDate: yyyy+"-"+mm+"-"+dd,
        editable: false,
        eventLimit: true, // allow "more" link when too many events
        selectable: true,
        selectHelper: false,
        slotEventOverlap: false,
        minTime: '08:00:00',
        maxTime: '19:00:00',
        Boolean, default: true,
        hiddenDays: [0, 3, 5],
        select: (start, end) => {
          var fecha1 = $('#fecha_vac').attr('data-from');
          var fecha2 = $('#fecha_vac').attr('data-to');
          var today = moment().format('YYYY-MM-DD');
          var check = moment(start).format('YYYY-MM-DD');
          var primeraFecha = moment(fecha1).format('YYYY-MM-DD');
          var segundaFecha = moment(fecha2).format('YYYY-MM-DD');
          if(check > segundaFecha)
            { 
            $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD'));
            $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD'));
            $('#ModalAdd').modal('show');
            }
          else if(check >= primeraFecha){
          }
          else if(today > check){
          }
          else{
            $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD'));
            $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD'));
            $('#ModalAdd').modal('show');
          }
        },
        eventRender: function(event, element) {
            element.bind('dblclick', function() {
                $('#ModalEdit #id').val(event.id);
                $('#ModalEdit #title').val(event.title);
                $('#ModalEdit #color').val(event.color);
                $('#ModalEdit #empleado').val(event.empleado);
                $('#ModalEdit').modal('show');
            });
        },
        eventDrop: function(event, delta, revertFunc) { // si changement de position

            edit(event);

        },
        eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

            edit(event);

        },
        events: [
        <?php while($event = mysqli_fetch_array($events)){
        
            $start = explode(" ", $event['start']);
            $end = explode(" ", $event['end']);
            if($start[1] == '00:00:00'){
                $start = $start[0];
            }else{
                $start = $event['start'];
            }
            if($end[1] == '00:00:00'){
                $end = $end[0];
            }else{
                $end = $event['end'];
            }
        ?>
            {
                id: '<?php echo $event['id']; ?>',
                title: '<?php echo $event['title']; ?>',
                start: '<?php echo $start; ?>',
                end: '<?php echo $end; ?>',
                color: '<?php echo $event['color']; ?>'
            },
        <?php } ?>
        ]
    });
    
    function edit(event){
        start = event.start.format('YYYY-MM-DD HH:mm:ss');
        if(event.end){
            end = event.end.format('YYYY-MM-DD HH:mm:ss');
        }else{
            end = start;
        }
        
        id =  event.id;
        
        Event = [];
        Event[0] = id;
        Event[1] = start;
        Event[2] = end;
        
        $.ajax({
         url: 'editEventDate.php',
         type: "POST",
         data: {Event:Event},
         success: function(rep) {
                if(rep == 'OK'){
                    alert('Evento se ha guardado correctamente');
                }else{
                    alert('No se pudo guardar. Inténtalo de nuevo.'); 
                }
            }
        });
    }
    
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source