我将数据从 JSON 文件加载到我的 Fullcalendar 中没有问题，但是我希望所有数据仅出现在可拖动/可放置事件的外部列表上，然后用户将决定将事件拖动到何处 ( example )
我确实实现了将数据加载到外部列表div。它显示正确，但是当我将事件拖到日历中时，标题消失了。如何避免丢失数据？
这是代码:
<script>
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').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: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prevYear,nextYear prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'json/example.json',
eventRender: function (event, element) {element.find('.fc-event-title').html(event.id);},
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// 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;
copiedEventObject.allDay = allDay;
// 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);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
正文中的div:
<div id='wrap'>
<div id='external-events' style="display: none;">
<h4>Draggable Events</h4>
<div class='external-event' id="mec1"></div>
<div class='external-event' id="mec2"></div>
<div class='external-event'>My Event 3</div>
<div class='external-event'>My Event 4</div>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
您可以看到我还尝试使用外部 JavaScript 将 JSON 数据加载到 div id“mec1”和 div id“mec2”。这是成功的但同样的情况。拖放后标题消失。
如果我将它们拖动到 div id='calendar' 标题将不再显示。
我的 JSON 文件仅包含以下内容:
[
{
"title" : "Blue Monday",
"allDay" : false
},
{
"title" : "John de John",
"allDay" : false
},
{
"title" : "Pumukli Pista",
"allDay" : false
}
]
我希望我提供了足够的信息。预先感谢您对此提供的任何帮助。
我对 fullcalendar 非常陌生，并且对 jQuery、js 有很强的基础知识。 我尝试解决这个问题from here
最佳答案
确实可以，如果您对最近的浏览器执行此操作，则可以使用浏览器中的 JSON 库。这意味着您可以从 JSON 对象进行访问，您可以看到 here解析来自服务器的 JSON 对象后。
所以你可以这样做:
var eventObjectFromDB = JSON.Parse(yourobject);
var eventToExternalEvents = {"title":eventObjectFromDB.title,
"id":eventObjectFromDB.id,
"start":eventObjectFromDB.start,
"end":eventObjectFromDB.end,
"allDay":eventObjectFromDB.allDay};
之后使用第二个变量并将其添加到外部事件的数组/列表中...
这就是你的要求吗？
关于javascript - 如何从加载的 JSON 文件构建外部事件列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20422980/