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



我使用的是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本地化字符串的框架。

相关内容

  • 没有找到相关文章

最新更新