Add appointment on JQuery FullCalendar with double click

Question

I'm fiddling around with JQuery Full Calendar and what I'd like to figure out with your help is adding an event to the calendar by Double Clicking. I wired up the double click event in the JQuery, however I am not exactly sure what to do with it. When I double click the calendar, it does display a popup window which is fine. I know how to send an event's details to the code behind. I guess my big issue is when the person double clicks, how do I bring up a form for them to fill out? I only have four fields and the all-day option to pass into Exchange via EWS. That side works just fine. So I need help figuring out how to do two things.

1. When they double click, bring up a form for them to add details

2. Send the information to the code behind - re-use the ajax call? Create a new one?

     $(document).ready(function () { initThemeChooser({ init: function (themeSystem) { $('#calendar').fullCalendar({ themeSystem: themeSystem, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay,listMonth' }, selectable: true, selectHelper: true, weekNumbers: true, navLinks: true, editable: true, eventLimit: true, events: <% =JsonEvent %>, eventDrop: function (event, delta, revertFunc) { if (!confirm("Are you sure about this change?")) { revertFunc(); } else { UpdateEvent(event); $(this).fullCalendar( 'refetchEvents' ); } }, eventResize: function(event, delta, revertFunc) { alert(event.title + " changed end is now " + event.end.format()); if (!confirm("is this okay?")) { revertFunc(); } else { UpdateEvent(event); $(this).fullCalendar( 'refetchEvents' ); } }, eventClick: function(calEvent, jsEvent, view) { alert('Event: ' + calEvent.title + '\\nDate: ' + moment(calEvent.Start).format("MM-DD-YYYY") + '\\nStart: ' + moment(calEvent.start).format("hh:mm:ss A") + '\\nEnd: ' + moment(calEvent.end).format("hh:mm:ss A")); $(this).fullCalendar( 'refetchEvents' ); // change the border color just for fun $(this).css('border-color', 'red'); }, eventDoubleClick: function(calEvent, jsEvent, view) { alert('Event: ' + calEvent.title); alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); alert('View: ' + view.name); // change the border color just for fun $(this).css('border-color', 'red'); } }); function UpdateEvent(event) { var data = {}; data.id = event.id; data.starts = event.start; data.ends = event.end; data.subject = event.title; $.ajax({ url: 'Calendar.aspx/UpdateEvent', method: 'POST', dataType: 'JSON', contentType: 'application/json; charset=utf-8', data: JSON.stringify(data), success: function (response, type, xhr) { var retVal = JSON.stringify(response); }, error: function (xhr) { window.alert('error: ' + xhr.statusText); } }); } }, change: function (themeSystem) { $('#calendar').fullCalendar('option', 'themeSystem', themeSystem); } }); }); 

Answer 1

Here's the approach you should take:

1) instead of the alerts, display a new div (maybe using CSS styling etc to make it effectively a modal dialog) containing your form.

2) I assume that Create needs to behave slightly differently to Update so I guess you'd need a slightly different ajax call as well.