fullcalendar qtip2 eventClick (for edit) - fullcalendar

Question

I was able to create a qtip2 on dayClick (fullcalendar) and it saves data for that event. Now I am trying to click on the event to have qtip2 load up again, but nothing happens. I have set editable to false (otherwise eventClick would never work).
I would like to be able to re-open a qtip2 event so it can be edited....thanks in advance
(NOTE: the DayClick qtip2 works great)
$('#calendar').fullCalendar({
// put your options and callbacks here
aspectRatio: 1.3,
editable: false,
draggable: true,
selectable: true,
selectHelper: true,
unselectAuto: false,
disableResizing:true,
header: {
right: 'today prev,next',
center: 'title',
left: 'agendaDay,agendaWeek,month'
},
events: "json_events.php",
eventClick: function(event, jsEvent, view) {
//alert(event.title);
$(this).qtip({
content: {
title: { text: event.title },
text: "<span class='title'>Start: </span>" + ($.fullCalendar.formatDate(event.start, 'hh:mmtt')) + "<br><span class='title'>Description: </span>" + event.description + "<br /><input type='button' value='Update' class='button' />"
},
position: {
at: 'top center',
// Position the tooltip above the link
my: 'bottom center',
adjust: {
y: -2,
resize: false // We'll handle it manually
},
viewport: calendar,
container: calendar
},
show: {
solo: true
},
style: {
width: 200,
padding: 5,
color: 'black',
textAlign: 'left',
border: {
width: 1,
radius: 3
},
tip: 'bottom-middle',
classes: 'daytooltip ui-tooltip-dark ui-tooltip-shadow',
tip: {
width: 20, height: 8
}
}
}); //element.qtip
},
dayClick: function(date, allDay, jsEvent, view) {
var month=new Array();
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var monthNum=new Array();
monthNum[0]="01";
monthNum[1]="02";
monthNum[2]="03";
monthNum[3]="04";
monthNum[4]="05";
monthNum[5]="06";
monthNum[6]="07";
monthNum[7]="08";
monthNum[8]="09";
monthNum[9]="10";
monthNum[10]="11";
monthNum[11]="12";
var allday = "<label for='allday'><input type='checkbox' id='allday' onClick='enabledisable(this.checked)' /><span>All Day Event</span></label>"
var thisDay = month[date.getMonth()] + '/' + date.getDate() + '/' + date.getFullYear();
var thisDayDBFormat = date.getFullYear() + '-' + monthNum[date.getMonth()] + '-' + date.getDate();
var sHours = "<select id='startTimeHour' name='startTimeHour' class='dropdown-menu-time-qtip' >" +
"<option value='01'>01</option>" +
"<option value='02'>02</option>" +
"<option value='03'>03</option>" +
"<option value='04'>04</option>" +
"<option value='05'>05</option>" +
"<option value='06' selected>06</option>" +
"<option value='07'>07</option>" +
"<option value='08'>08</option>" +
"<option value='09'>09</option>" +
"<option value='10'>10</option>" +
"<option value='11'>11</option>" +
"<option value='12'>12</option>" +
"</select>";
var sMins = "<select id='startTimeMin' name='startTimeMin' class='dropdown-menu-time-qtip' >" +
"<option value='00' selected>00</option>" +
"<option value='15'>15</option>" +
"<option value='30'>30</option>" +
"<option value='45'>45</option>" +
"</select>";
var sAM_PM = "<select id='startTimeAMPM' name='startTimeAMPM' class='dropdown-menu-time-qtip' >" +
"<option value='AM'>AM</option>" +
"<option value='PM' selected>PM</option>" +
"</select>";
var eHours = "<select id='endTimeHour' name='endTimeHour' class='dropdown-menu-time-qtip' >" +
"<option value='01'>01</option>" +
"<option value='02'>02</option>" +
"<option value='03'>03</option>" +
"<option value='04'>04</option>" +
"<option value='05'>05</option>" +
"<option value='06'>06</option>" +
"<option value='07' selected>07</option>" +
"<option value='08'>08</option>" +
"<option value='09'>09</option>" +
"<option value='10'>10</option>" +
"<option value='11'>11</option>" +
"<option value='12'>12</option>" +
"</select>";
var eMins = "<select id='endTimeMin' name='endTimeMin' class='dropdown-menu-time-qtip' >" +
"<option value='00' selected>00</option>" +
"<option value='15'>15</option>" +
"<option value='30'>30</option>" +
"<option value='45'>45</option>" +
"</select>";
var eAM_PM = "<select id='endTimeAMPM' name='endTimeAMPM' class='dropdown-menu-time-qtip' >" +
"<option value='AM'>AM</option>" +
"<option value='PM' selected>PM</option>" +
"</select>";
$(this).qtip({
overwrite: true,
content: {
title: {
text: 'Create Event / Add Menu Item: ', // + month[date.getMonth()] + '/' + date.getDate() + '/' + date.getFullYear(),
button: true
},
//text: $('#fxx').html() // this html was on the form
//text: "<span id='event-create' ><ul><li><input type='checkbox' />All Day</li><li><input type='radio' />input:radio</li><li><select><option>Select</option><option>Foo</option><option>Bar</option></select></li><li></li><li><input type='text' value=" + month[date.getMonth()] + '/' + date.getDate() + '/' + date.getFullYear() + "/></li><li><textarea>textarea</textarea></li></ul><input type='button' class='button' value='Create Event' /></span>"
text: "<div id='event-create'>" +
"<fieldset>" +
"Create a Generic Event OR add a Menu (meal) Event from your Personal Menu!" +
"<br />" +
"<label>When:</label><span>" + thisDay + "</span>" +
"<br />" +
"<form action='.' method='post' name='create_event'>" +
"<input type='hidden' name='action' value='save_event' />" +
"<input type='hidden' name='eventDate' value='" + thisDayDBFormat + "' />" +
"<label for='eventName'>Name:</label><input type='text' name='eventName' value='' title='Letters, numbers, and underscore!' size='30' />" +
"<br />" +
"<label for='eventLocation'>Location:</label><input type='text' name='eventLocation' value='' title='Letters, numbers, and underscore!' size='30' />" +
"<div id='event-create-time'>" +
"<input type='checkbox' name='eventAllDay' onClick='enabledisable(this.checked)' /><span> All Day Event</span><br />" +
"Start: " + sHours + " " + sMins + " " + sAM_PM + "<br />" +
"End: " + eHours + " " + eMins + " " + eAM_PM +
"</div>" +
"<br />" +
"<input type='submit' id='event-button' name='btnSaveGenericEvent' class='button150' value='Create Generic Event' />" +
"<input type='submit' id='event-button' name='btnSaveMenuEvent' class='button150' value='Create Menu Event' />" +
"</form>" +
"</fieldset>" +
"</div>"
//"<a href='#' onclick=" + '"' + "document['my_personal_menu'].submit()" + '"' + " >My Personal Menu >></a>" +
},
position: {
at: 'top center',
// Position the tooltip above the link
my: 'bottom center',
adjust: {
y: -2,
resize: false // We'll handle it manually
},
viewport: calendar,
container: calendar
},
// NOTE: originally, tooltip opened as modal (gray background) and had to close with 'x' button
// Settings were "show: Modal: on: true AND hide: 'false'
//
// To have tooltip popup on each day click AND have any previous tooltip go away (like google calendar)
// Settings "show: modal: on: false AND hide: 'true'"
show: {
ready: true,
event: false,
modal: {
// 'true' = Make it modal (darken the rest of the page)...
on: false,
blur: false // ... but don't close the tooltip when clicked
}
},
// 'false' = does not hide when clicking outside
// 'unfocus' = will hide when clicking outside tooltip IF modal 'on: false' (above)
hide: 'unfocus',
style: {
classes: 'daytooltip ui-tooltip-dark ui-tooltip-shadow ui-tooltip-default width400',
tip: { width: 20, height: 8 }
}
})
.qtip('show');
}

Answer 1

I had the same problem and found a solution from Craig:
Try attaching a qTip with overwrite set to false, and update its content at the end of the call:
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
$(this).qTip({
overwrite: false,
content: 'Loading...',
show: { ready: true }
})
.qtip('option', 'content.text', newContent);
}
});