获取日历中可拖放元素的开始和结束日期

Question

我使用的例子是arshaw完整日历可掉落(http://arshaw.com/js/fullcalendar-2.0.2/demos/external-dragging.html)我想一次是将元素放入日历中，用开始日期和结束日期填充2个字段。

<input type="text" id="StartDate" />
<input type="text" id="EndDate" />

不幸的是，在网站(http://arshaw.com/fullcalendar/docs/dropping/droppable/)的可dropable部分没有显示如何实现这个

Answer 1

导入你的js和CSS文件，你可以在源页面看到代码

$('#my-draggable').draggable({
    revert: true,      // immediately snap back to original position
    revertDuration: 0  //
});
$('#calendar').fullCalendar({
    droppable: true,
minDate:yourDate,
maxDate:yourMaxDate,
    drop: function(moment, allDay) {
        alert("Dropped on " + moment.format() + " with allDay=" + allDay);
    }
});
<div id='external-events'>
            <h4>Draggable Events</h4>
            <div class='external-event'>My Event 1</div>
            <div class='external-event'>My Event 2</div>
            <div class='external-event'>My Event 3</div>
            <div class='external-event'>My Event 4</div>
            <div class='external-event'>My Event 5</div>
            <p>
                <input type='checkbox' id='drop-remove' />
                <label for='drop-remove'>remove after drop</label>
            </p>
        </div>
        <div id='calendar'></div>

Answer 2

我找到了解决方案:我添加/修改了drop函数(从网站下载的那个)。当它们这样做时，它们会存储日期:Start = date;

//GET THE START DATE AND MAKE IT IN MILISECONDS
var startDateMiliSeconds = Date.parse(date);
//MY MEETING WILL BE 1HOUR LONG
var endDateMiliSeconds = startDateMiliSeconds + 3600000;
// MAKE BOTH DATES DATE FORMAT
var Startdate = new Date(startDateMiliSeconds);
var EndDate = new Date(endDateMiliSeconds);
//THIS IS TO POPULATE THE INPUTS
$('#StartTime').val(Startdate);
$('#EndTime').val(EndDate);

完整代码如下:

drop: function(date){//当某个东西被删除时调用这个函数

// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
var startDateMiliSeconds = Date.parse(date);
var endDateMiliSeconds = startDateMiliSeconds + 3600000;
var Startdate = new Date(startDateMiliSeconds);
var EndDate = new Date(endDateMiliSeconds);
//Startdate.toString("dd-mm-YYYY");
//EndDate.toString("dd-mm-YYYY");               
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
$(this).remove();
$('#StartTime').val(Startdate);
$('#EndTime').val(EndDate);
var edgarFabian = $.type(date); //date is an object
//alert(edgarFabian);
alert(Date.parse(date) );
}