To use full calendar jquery plugin as google calendar

Question

I am using jQuery fullcalendar plugin. Drag and resize options are given for events.

I like to add events and edit event as same as google calendar.

Any other plugin is there to bring out google calendar functionality in jquery

How to do this?

Updated

....

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 is an object and I am calling an iframe thickbox popup so I cant maintain object.

calEvent in another page.

Answer 1

here is my "add event" part inside of the 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');

                }

            },

Dont' bother the "language" and "CI" stuff..this is just the was to localize strings with codeigniter which was my framework of choice.