jquery UI のダイアログ ボックスと組み合わせて fullCalendar を使用しています。私が抱えている問題は、eventClick() メソッドにある「更新」ボタンにあります。alert() を表示することはできません:「更新を押すと警告メッセージが表示されます」。[キャンセル] ボタンをクリックすると、ダイアログ ボックスが閉じます。
アイデア?
$().ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'month,agendaWeek,agendaDay',
center: 'prevYear title nextYear',
right: 'prev,next, today'
},
theme:true,//use JQuery UI theme
selectable: true,
selectHelper: true,
weekMode:'variable',
dayClick:function(){
//alert('a day has been clicked');
},
editable: true,
eventClick:function(calEvent, jsEvent, view){
$("#event").dialog({
modal:true,
title:calEvent.title ,
position:'top',
width:600,
buttons:[
{text:'Update',click:function(){updateEvent();}},
{text:'Cancel',click:function(){$("#event").dialog('close');}}
]
});
$('#title').val(calEvent.title);
$('#location').val(calEvent.location);
$('#start').val($.fullCalendar.formatDate($.fullCalendar.parseDate(calEvent.start),'MM/dd/yyyy'));
if ( calEvent.end != null ) $('#end').val($.fullCalendar.formatDate($.fullCalendar.parseDate(calEvent.end),'MM/dd/yyyy'));
$('#description').val(calEvent.description);
$('#uID').val(calEvent.uID);
},
select: function(start, end, allDay) {
//a new event to be created (1 or more days)
var title = prompt('Add a new event:');
if (title) {
var newEvent = {updateType:1,startString:getDateString(start),endString:getDateString(end),title:title,start:start,end:end,allDay:allDay,description:'This is a desc.',location:'Event is at home'};
sendDataToCalendar(newEvent);
calendar.fullCalendar('renderEvent', newEvent, true);
}
calendar.fullCalendar('unselect');
}
});
calendar.fullCalendar( 'addEventSource', getEventsFromDB() );
//setup date picker
$('#start').datepicker({autoSize:true});
$('#end').datepicker({autoSize:true});
//auto update title of dialog box
$('#title').bind('keyup', function(){
$('#event').dialog('option', 'title', $('#title').val());
});
});
function updateEvent(){
alert('Pressing update should display an alert message');
// var jsonData = $('#event').serialize() + '&' + $.param({updateType:1});
// sendDataToCalendar(jsonData);
// $("#event").dialog('close');
}