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

您好，我在设置开始时间和结束时间时遇到问题。我想当用户拖放事件的时间也将设置，但目前它显示全天。假设我有一个事件是从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();

var calevents=；
$（函数（）{
/*初始化外部事件
-----------------------------------------------------------------*/
函数ini_事件（ele）{
元素每个（函数（）{
//创建一个事件对象(http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
//它不需要有开始或结束
var eventObject={
title:$.trim（$（this）.text（））//使用元素的文本作为事件标题
}
//将事件对象存储在DOM元素中，以便我们以后可以访问它
$（this）.data（'eventObject'，eventObject）
//使用jQuery UI使事件可拖动
$（此）。可拖动({
zIndex:1070，
revert:true，//将导致事件返回其初始状态
revertDuration:0//拖动后的原始位置
})
})
}
ini_事件（$（'#外部事件div.external-event'））
/*初始化日历
-----------------------------------------------------------------*/
//日历事件的日期（虚拟数据）
变量日期=新日期（）
var d=date.getDate（），
m=date.getMonth（），
y=日期。getFullYear（）
var Calendar=FullCalendar.Calendar；
var Draggable=FullCalendarInteraction.Draggable；
var containerell=document.getElementById（'external-events'）；
var checkbox=document.getElementById（'drop-remove'）；
var calendarEl=document.getElementById（'calendar'）；
//初始化外部事件
// -----------------------------------------------------------------
新拖船（集装箱船{
itemSelector:“.external event”，
eventData:函数（eventEl）{
console.log（eventEl）；
变量dragObject={
标题：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'），
};
回排水；
}
});
var calendar=新日历（calendarEl{
插件：['bootstrap'，'interaction'，'dayGrid'，'timeGrid']，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay”
},
“themeSystem”：“bootstrap”，
//随机默认事件
活动：calevents，
可编辑：false，
可拖放：true，//这允许将内容拖放到日历上！！！
删除：功能（信息）{
console.log（date.draggedEl.attributes[0]['value']）；//这里我得到了我设置的值{“start”：“10:00”，“end”：“15:00”}
}, 
});
calendar.render（）；

---

您可以使用（用于最小开始时间）和（用于最大结束时间）

这没有任何意义。事件的时间将是用户放置事件的时间。如果您想预先设置事件必须打开的时间和日期，则不允许拖放…因为根据定义，该过程是给用户选择