I am following this article to create draggable items and drop it on jquery full calendar. http://fullcalendar.io/js/fullcalendar-2.6.1/demos/external-dragging.html
I have a draggable div originally whose text is "Select to Create Call" I had to customize it to create titles by selecting what user selects in two dropdowns and then forming a title out of it. It definitely shows the title on the div, but when I drag and drop it it shows the original text i.e. Select to Create Call I am assuming the reason is that it drops a clone on the jquery full calendar. Please find below the code:
<script type='text/javascript'>
$(document).ready(function () {
var calendar = $('#calendar');
// eventSources: [getCalData()],
$('#calendar').fullCalendar({
// calendar.fullCalendar({
header: {
left: 'prev,next ',
center: 'title',
right: 'month'
}, editable: true, droppable: true,
// eventSources: [
// {
events: function (start, end, timezone, callback) {
$.ajax({
url: '@Url.Action("GetEvents", "Calendar")',
// dataType: 'json',
data: {
month: $("#calendar").fullCalendar('getDate').month(),
year: $("#calendar").fullCalendar('getDate').year()
},
success: function (doc) {
var events = [];
$.each(doc, function (index, event) {
$('#calendar').fullCalendar('renderEvent', event);
});
}
});
},
eventDrop: function (event, delta, revertFunc) {
$.ajax({
url: '@Url.Action("ChangeEvents", "Calendar")',
data: {
eventsJson: JSON.stringify(event)
}
});
},
drop: function(event,allDay) {
//drop functionality goes here
/* var originalEventObject = $(this).data('eventObject');
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.start = event.date;
copiedEventObject.allDay = allDay;
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);*/
$.ajax({
url: '@Url.Action("AddEvents", "Calendar")',
data: {
eventsJson: JSON.stringify(event),
//datePicked: date,
title: $('#total-title').text(),
ddlAttending: $('#ddlAttending').val(),
ddlCallType: $('#ddlCallType').val()
},
/* success: function (data) {
$('#external-events .fc-event').each(function () {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// 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
});
});
}*/
});
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
}
});
function saveEvent(event, dayDelta) {
$.ajax({
url: '@Url.Action("ChangeEvents", "Calendar")',
data: {
id: event.id,
daysMoved: dayDelta
},
type: "POST"
});
}
$('.fc-next-button').click(function () {
var date = $("#calendar").fullCalendar('getDate');
//alert('next is clicked, do something');
events: '@Url.Action("GetEvents", "Calendar")'
});
$('.fc-prev-button').click(function () {
//alert('prev is clicked, do something');
events:'@Url.Action("GetEvents", "Calendar")'
});
$.ajax({
contentType: "application/json; charset=utf-8",
success: function (data) {
$('#external-events .fc-event').each(function () {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// 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
});
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
alert(textStatus);
}
});
});
function createNewEvent()
{
// $("#drop2").val( $("#drop").val() + ' ' + $("#drop1").val());
$('#total-title').text($("#ddlAttending :selected").text() + ' ' + $("#ddlCallType :selected").text());
//alert($('#total-title').text())
// $('#total-title').text($("#drop2").val());
}
</script>
The body contains the following divs:
<div>
<div id="calendar" style="width:85%"></div>
<div id='external-events' style="width:15%;margin-top:40px;margin-left:13px">
<h4>
Create Draggable Events
</h4>
@Html.DropDownList("ddlAttending", (SelectList)ViewBag.PersonelID, "-Select Attending-", new { @style = "margin:5px;" })
@Html.DropDownList("ddlCallType", (SelectList)ViewBag.OnCallType, "-Select CallType-", new { @style = "margin:5px;", onchange = "createNewEvent();" })
<span class='fc-event' contenteditable="true" id="total-title" style="width: 155px; margin: 5px;">Select to create call</span>
</div>
</div>
I am using asp.net mvc5 framework to fetch events and save events on the page. As the picture shows that the div has the updated text after selecting from drodpowns but dragging onto calendar still shows "Select to Create Call"
// store data so the calendar knows to render an event upon dropthere you are saving the data with the initial text. I think you need to make changes here – Rajshekar Reddy