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

【问题标题】：To use full calendar jquery plugin as google calendar使用完整的日历 jquery 插件作为谷歌日历
【发布时间】：2011-06-04 06:28:18
【问题描述】：

我正在使用 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 厚框弹出窗口，因此我无法维护对象。

calEvent 在另一个页面中。

【问题讨论】：

我不确定您的问题是什么。我最近刚刚完成了相当大的日历项目。我使用了 jquery fullcalendar 插件。我认为这是构建与谷歌日历几乎相同的想法的良好基础。我的建议是坚持使用这个很棒的插件。
如何使用与谷歌日历相同的弹出窗口添加、编辑事件。我无法获取值
我正在使用 jquery 来显示一个“弹出窗口” - 使用表单隐藏显示 div 以将新数据提交到数据库。然后我使用带有 JSON 的 ajax 添加数据。 jquery fullcalendar 的事件是使用 php 获取的 - 请参阅此示例：arshaw.com/js/fullcalendar-1.5.1/demos/json.html 如果您有任何具体问题，请随时提问。
我正在使用厚框来编辑事件。我不能保留对象。我尝试按照您的 ajax 更新值的方式。不使用thickbox。

标签： jquery jquery-plugins fullcalendar

【解决方案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 本地化字符串。

【讨论】：