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

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

您好，我在设置开始时间和结束时间时遇到问题。我希望当用户拖放事件时，时间也会设置，但当前显示为 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,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();

解决方法

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