如何在完整日历 v4 中设置开始时间和结束时间？

Question

您好，我在设置开始时间和结束时间时遇到问题。我希望当用户拖放事件时，时间也会设置，但目前它显示 allDay。假设我有一个事件是从 10:00 到 15:00，而另一个事件是 15:00 到 18:00。这是我的以下代码：-

<div id="external-events">
      <div class="external-event bg-success" data-event="{"start":"10:00", "end":"15:00"}">Lunch</div>
      <div class="external-event bg-warning" data-event="{"start":"15:00", "end":"18:00"}">Go home</div>
</div>
 <div class="card-body p-0">
                            <!-- THE CALENDAR -->
                            <div id="calendar"></div>
                        </div>

Javascript 代码：-

var calevents = <?php print_r(json_encode($calendarEvents)) ?>; 
$(function () {

/* initialize the external events
 -----------------------------------------------------------------*/
function ini_events(ele) {
  ele.each(function () {

    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
      title: $.trim($(this).text()) // use the element's text as the event title
    }

    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject)

    // make the event draggable using jQuery UI
    $(this).draggable({
      zIndex        : 1070,
      revert        : true, // will cause the event to go back to its
      revertDuration: 0  //  original position after the drag
    })

  })
}

ini_events($('#external-events div.external-event'))

/* initialize the calendar
 -----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date()
var d    = date.getDate(),
    m    = date.getMonth(),
    y    = date.getFullYear()

var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;

var containerEl = document.getElementById('external-events');
var checkbox = document.getElementById('drop-remove');
var calendarEl = document.getElementById('calendar');

// initialize the external events
// -----------------------------------------------------------------

new Draggable(containerEl, {
  itemSelector: '.external-event',
  eventData: function(eventEl) {
    console.log(eventEl);
    var dragObject = {
      title: eventEl.innerText,
      backgroundColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
      borderColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
      textColor: window.getComputedStyle( eventEl ,null).getPropertyValue('color'),
    };
    return dragObject;
  }
});

var calendar = new Calendar(calendarEl, {
  plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
  header    : {
    left  : 'prev,next today',
    center: 'title',
    right : 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  'themeSystem': 'bootstrap',
  //Random default events
  events    : calevents,
  editable  : false,
  droppable : true, // this allows things to be dropped onto the calendar !!!
  drop      : function(info) {
    console.log(date.draggedEl.attributes[0]['value']); //here i amd getting the values {"start":"10:00", "end":"15:00"} that i set 

  }, 
});

calendar.render();

Answer 1

您可以使用minTime（最短开始时间）和maxTime（最长结束时间）