Question

我正在使用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 popup，因此我无法维护对象。

calEvent在另一页。

Answer 1

这是我在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');

                }

            },

不要打扰“语言”和“CI”的东西......这只是使用codeigniter本地化字符串，这是我选择的框架。

使用完整的日历jquery插件作为谷歌日历

1 个答案: