Editing an Event is external to web2cal. For Example: This is how I would do it.
1. Provide a onPreview callback method.
2. the onPreview Method provides you the event object
3. On click of Edit Event [in preview window], show a form with input elements pre populated with event details (from the event object obtained in step 2 or you can fetch updated event object from db before showing the information.)
4. on click of save, persist the information in DB. after persisting, provide the updated event to web2cal by invoking ical.updateEvent(event).
This way, you can control what attributes can be edited. Unlike many other calendars, web2cal does not limit you to a few set of attributes for an event. Any number of properties can describe an event.
It would be easier and better to hook it into the newEvent form and the default plugin, testing for the existence of eventId. Is there a way to trigger showNewEventForm?
Thanks,
-jim
Although it may look easier, some people do not want that behavior. So web2cal allows you to customize it. You can still show the edit event in the same new event form following the approach described above.
Currently, there is no such feature to invoke new event form.
Ok. I'll have to disagree with those users. I'm a big believer in using the same form for create and edit.
I was actually able to invoke the form - something like this strategy:
var activeEvent;
var activeEventDiv;
var w2cGroups;
function onPreview(evt, dataObj, html)
{
activeEvent=dataObj;
activeEventDiv=evt;
w2cGroups=this._dataStore.getGroups();
ical.showPreview(evt, html);
}
/**
* Click on Edit Button in preview window
*/
function rzEditEvent(event)
{
var obj = { eventName: event.eventName, startTime:event.startTime, endTime:event.endTime, eventId: event.eventId };
ical.hidePreview();
Web2Cal.showNewEventForm(jQuery("#defaultNewEventTemplate"), {
activeElement : activeEventDiv, asPopup: false,
container: jQuery("#calendarContainer"), heightOffset: 0,
perspective : "left", relative: true, removeBodyScroll: true }
);
editEvent(obj, w2cGroups, event.allDay);
}
/* edit event same as defaultPlugin.onNewEvent
add this line:
*/
jQuery("#eventId").val(obj.eventId); // in createDEfaultNewEvent add a hidden eventId
/* rzAddEvent same as in example except check for eventId and updateEvent or addEvent
*/
var eventId=newEventContainer.find("#eventId").val();
var isEdit = (eventId != "");
if(!isEdit) {
Web2CalAjax.createEvent(newev,function(newEv){
ical.addEvent(newEv);
});
} else {
newev.eventId=eventId;
Web2CalAjax.updateEvent(newev,function(ev){
ical.closeAddEvent();
ical.updateEvent(ev);
});
}
I am new to PHP type programming, having done much of my programming in the corporate world. So forgive me if my question shows my ignorance.
I am trying to implement the code you showed. But it's not working. My guess is that I haven't copied the line specified to the correct location. In your code you have the following:
/* edit event same as defaultPlugin.onNewEvent
add this line:
*/
jQuery("#eventId").val(obj.eventId); // in createDEfaultNewEvent add
My assumption is that I need to copy this line to some other function. however, I can't find a function by that name. I am sure it's something obvious, but I am lost.
And with your code in place, nothing happens when I click on edit.
Also, you have a call to editEvent(obj, w2cGroups, event.allDay) - but again, I can't find any sourc for this.
Regarding edit, We have not provided an example since we consider it out of the calendaring engine. Calendar supports any kind of edit.
Here is a suggestion.
<li> <a href="javascript:rzEditEvent(${eventId});" name="edit" class="websbutton"> Edit event </a> </li>
<div id="myEditForm" style="display:none; z-index:25; background-color:#fff; width:300px; height:200px; position:absolute; top:20px; margin:0px auto;">
Event Name: <input type="text" id="eventName"/> <br/>
Event Description: <input type="text" id="eventDesc"/> <br/>
<input type="button" value="UPDATE" onclick="updateEventToDB()"/>
</div>
<script>
function rzEditEvent(eventID)
{
var eventObj=ical.getEventById(eventID);
jQuery("#eventName").val(eventObj.name);
jQuery("#eventName").val(eventObj.description);
jQuery("#myEditForm").show();
}
function updateEventToDB()
{
// Create an event object from the fields above in the edit form.
//UPDATE EVENT in DB
//Once update is done,
//Show the updated event in calendar
ical.updateEvent(eventObj);
}
</script>
Hope this helps!
Above code is NOT TESTED. Just to give you an idea. There are more ways of doing this. If you notice our facebook app, we show the edit event form as a part of the preview.
Thanks for the code. I will see what I can do with it.
RE: no edit option in samples.
Do you realize how silly you comment sounds?
You say that "We have not provided an example since we consider it out of the calendaring engine."
Ok, but you provide a way for me to Add a calendar item. This too is out outside of the range of the calendaring engine. Even the sample code you provide has code to generate static events. But yet you still have an "add event" screen.
If you are going to provide sample code, provide it, without excuses. No, it doesn't need to get data from a server, that's my job. But if your demo will allow me to add an event, allow me to edit and delete it as well.
You gave me some quick code you slapped together to do this. Why can't that be part of the sample?
Make it so my focus is on how to get the data I get from the server into the calendar system, not how to demo it to my boss to see if we will use it or not.... Especially since I need to evaluate a number of other options before we settle on one or anoher....
But I guess it's your choice.... Sorry for droning on like this.
After many requests for edit event support, Web2Cal has finally introduced the feature in Premium 1.3.7.
A New function is provided showEditEventTemplate
Provide your div element and event ID to display the form in place of preview.
Also few more useful functions have been introduced.
Namely: getAllEvents - get a array of JSON Objects of all the events being displayed in calendar. Should be very useful to analyze the data and debug. getAllGroups - get a array of JSON Objects of all the Groups getEventForDay - get a array of JSON Objects of events for a day (provide day in "yyyy/mm/dd" format).
