获取 arshaw 日历中可放置元素的开始和结束日期答案

【问题标题】：get the start and end date of the droppable element in arshaw calendar获取 arshaw 日历中可放置元素的开始和结束日期
【发布时间】：2014-07-25 06:25:47
【问题描述】：

我正在使用 arshaw full calendar 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/) 没有显示如何实现这一点

【问题讨论】：

标签： javascript jquery fullcalendar

【解决方案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>

【讨论】：

我想你错过了理解我的问题，我问的是一次 drop 我怎么能得到开始和结束日期，我没有问如何创建一个 droppable！

【解决方案2】：

我找到了解决方案：我添加/修改了 drop 功能（从网站下载的那个）。他们存储日期：copyedEventObject.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) );
}

【讨论】：