1
dayClick (fullcalendar)에서 qtip2를 만들 수 있었고 해당 이벤트에 대한 데이터를 저장합니다. 이제 이벤트를 클릭하여 qtip2를 다시로드하려고 시도하지만 아무 일도 일어나지 않습니다. editable을 false로 설정했습니다 (그렇지 않으면 eventClick이 작동하지 않습니다).fullcalendar qtip2 eventClick (편집 용)
내가 다시 열려면 qtip2 이벤트가 편집 할 수 있도록 수 있도록하고 싶습니다.... 미리 감사
(참고 : DayClick 좋은 작품 qtip2)
$('#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');
}
아하, 내가 한 일을 잘 모르겠지만이 일을 할 수있었습니다 !! 나는 약간의 세팅과와 라를 바꿨다 .... – bill
당신은 당신의 작업 솔루션을 게시 했습니까? – nitecoder
해결책을 게시하십시오! –