我使用的是jQuery fullcalendar插件。为事件提供了拖动和调整大小选项。
我喜欢像谷歌日历一样添加事件和编辑事件。
任何其他插件都可以在jquery中提供谷歌日历功能
如何做到这一点?
更新
....
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.id);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
// change the border color just for fun
// $(this).css('border-color', 'red');
tb_show("Edit Event","event_edit.php?event_obj="+calEvent+"&event_title="+calEvent.title+"&keepThis=true&TB_iframe=true&height=250&width=400");
},
.....
calEvent
是一个对象,我正在调用iframe thickbox弹出窗口,所以我无法维护该对象。
另一页中的calEvent
。
这是我在fullcalendar init:中的"添加事件"部分
select: function(start, end, allDay) {
var calendars = getAjaxData('calendar/calendarsJson');
var txt = '<h3>Add event:</h3>n
<div class="clear"></div>n
<p><label>'+CI.lang.language.what+':</label><input type="text" name="title" value="" /></p>n
<p><label>'+CI.lang.language.where+':</label><input type="text" name="location" value="" /></p>n
<p><label>'+CI.lang.language.description+':</label></p>n
<p><textarea name="description"></textarea></p>';
txt += '<p><label>'+CI.lang.language.calendar+':</label>n
<select name="id_calendar">';
for(i=0;i<calendars.length;i++) {
txt += '<option value="'+calendars[i].id_calendar+'">'+calendars[i].title+'</option>';
}
txt += '</select></p>';
txt += '<br />';
var btns = {};
btns[CI.lang.language.create_event] = true
btns[CI.lang.language.cancel] = false;
$.prompt(txt,{
prefix:'event_box',
callback: addeventnow,
buttons: btns
});
function addeventnow(v,m,f){
if(f && v){
var classN = getAjaxData('calendar/getClassJson/'+f.id_calendar);
var nEvent = {
title: f.title,
description: f.description,
location: f.location,
start: start,
end: end,
allDay: allDay,
className: classN,
id_calendar: f.id_calendar
};
if (f.title) {
calendar.fullCalendar('renderEvent',
nEvent,
false // make the event "stick"
);
}
addEvent(nEvent);
calendar.fullCalendar('refetchEvents');
}
calendar.fullCalendar('unselect');
}
},
不要在意"语言"one_answers"CI"之类的东西。。这只是我选择的使用codeigniter本地化字符串的框架。