Question

我正在使用arshaw完整日历droppable（http://arshaw.com/js/fullcalendar-2.0.2/demos/external-dragging.html）的示例我希望曾经将元素放入日历中以使用开始日期和结束日期填充2个字段。

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

不幸的是网站上的droppable部分（http://arshaw.com/fullcalendar/docs/dropping/droppable/）没有显示如何实现这个

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功能（从网站下载的功能）。它们存储日期：copiedEventObject.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) );
}

获取arshaw日历中droppable元素的开始和结束日期

2 个答案: