| Issue 210: | Add/Edit/Delete events through icons | |
| 20 people starred this issue and may be notified of changes. | Back to list |
Hello Adam, thanks for providing such an awesome product. I really enjoy it. Right now I'm using the eventClick Trigger to update/remove events and dayClick to add Events. Feature request: It would be nice to have in the general section two more options deleteButton:true/false and editButton:true/false and trigger actions for those buttons (deleteButtonClick and editButtonClick). Delete and edit button would only show up if the event is editable. Maybe there is already something similar done. Would be nice if somebody could show me how to do it. I attached an image as an example.
Nov 29, 2009
Hi I don't really like the dialog box in google's calendar as it takes me two clicks to edit or delete an event. This is why I am using eventMouseover to display a transparent overlay over the event itself which is hidden again by eventMouseout (using jQuery $().show() and $().hide()). This way I can show any icons (like edit, delete, moderate, etc). In my case I am not showing an edit icon but I am using the event's url to edit an event - this way the user can just click on the event to edit it (see attached screenshot for an example of the delete icon). The content of this overlay is stored in an additional variable for each event. For this I am just adding the custom variable "tooltip" when creating the events array. This variable is then added in eventRender in a <span> which is hidden in the beginning. For a fully working example you may have a look at my open source project "kOOL - the church tool" which uses the current version of fullCalendar: www.churchtool.org Demo available at http://demo.kool.kircheonline.ch (login with "admin", "admin").
Dec 4, 2009
Thanks for those replies. My thoughts on inline editing: pros: - it is fast (no clicks or almost) - works like usual calendars (Outlook,etc..) cons: - for long events (over a day) you still need a dialog box or something else... - I think it would be hard to implement and trigger the right events (you need to make sure that only changes are reported to your back-end server) I really like the inline editing but I think it should be optional editoption:inline/dialog). I agree to Renzo's comment about the dialog boxes but you need them if you want to do multiple day/weeks or even months events. The mouseover option is really great but it only works if there is an event for adding events you still need something else. I'm still thinking about it and maybe I will get a better idea. Let me know what you think. -Jakob
Jan 21, 2010
I just did this script to show a transparent div with delete icon only on the mouseovered event. This script requires that all events have a specified ID
Apr 28, 2010
Telerik has a similar component, and the edit/delete works as in this following demo. The delete is an X in the upper right, while the edit is triggered by double-clicking the event. http://demos.telerik.com/aspnet-ajax/scheduler/examples/outlook2007/defaultcs.aspx I would really like this feature too. Thanks.
May 6, 2010
bibendus1983, your "hoverDeleteButton.txt" works great. I just wanted to thank you for that.
Oct 7, 2010
i would prefer to do these actions within a dialogish box (https://code.google.com/p/fullcalendar/issues/detail?id=162) instead of as small overlay icons, but i understand. marking this as possible plugin, b/c this could be implemented completely through the eventRender callback (and thus would be a great candidate as a separate-file plugin)
Status:
MaybePlugin
Jun 14, 2011
Here is a totally different approach that fits in the design. What if you add a trash div that is hidden until the user starts dragging the event. eventDragStart would make the trash div visible and if the user drags the event to that div, it is deleted from the calendar.
Aug 23, 2011
bibendus1983, great job on the hoverDeleteButton it's great. Does anyone know how this would work with events "dragged" in since they have no ID?
Sep 17, 2011
well, I am working with few different plugins right now and one of the way I can bring data manipulation in all of them into more-less same visual interpretation is by using contextmenus. The biggest advantage of using contextmenu is that you can provide a lot of actions without need to break layout or need to add tons of buttons into small dialogs. Another advantages are that it can be used as stand-alone plugin and can be used with any visible dom element, you can use keys to select action from menu and many more. I personally wrote "my" own contextmenu plugin. Its not completely my own as I didnt write it from scratch, there are many plugins for showing custom contextmenu but neither of those do not provide everything I need. So I just looked at source of few of them and took what I need + implemented some of my own features, like class/metadata driven cm behaviour, triggering custom bindable events on selected, navigation with keyboard keys and some more I cant remember right now. I dont have that many cons with this approach yet (i hasnt been under thorough tests), one of them is that many ppl dont use contextmenus and some can get lost if they are not explicitely told they can use them (well, this can be easily fixed with allowing to trigger cm on any given js event, showing it on hover event would solve this issue). I also dont know how it will react if I want to bind it on many components at once (like couple of thousands, I have tried it only with few dozens at max), but since there is one global cm showing for all I think I shouldnt worry about that. Another issue can be convenience, some users want to do as little clicks as possible, and contextmenu means one more click to do (but this can be also fixed as with first issue, by showing cm on onMouseOver event). If you are wondering how it looks, just check attachments, there are some pictures of how it looks in different scenarios.
Oct 29, 2011
This code will add an edit button and a delete button to the event...
Just make your own php files.
eventMouseover: function(event, domEvent) {
var layer = '<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="../../images/editbt.png" title="edit" width="14" id="edbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a><a><img src="../../images/delete.png" title="delete" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>';
$(this).append(layer);
$("#delbut"+event.id).hide();
$("#delbut"+event.id).fadeIn(300);
$("#delbut"+event.id).click(function() {
$.post("your.php", {eventId: event.id});
calendar.fullCalendar('refetchEvents');
});
$("#edbut"+event.id).hide();
$("#edbut"+event.id).fadeIn(300);
$("#edbut"+event.id).click(function() {
var title = prompt('Current Event Title: ' + event.title + '\n\nNew Event Title: ');
if(title){
$.post("your.php", {eventId: event.id, eventTitle: title});
calendar.fullCalendar('refetchEvents');
}
});
},
The CSS is located above
I took the code on this page and modified it to fit my needs, maybe it will be some help to someone.
Apr 2, 2013
I made a dialog box, check it out here: www.paulthedutchman.nl/calendar_standalone and www.paulthedutchman.nl/calendar_standalone2 or go to (also for download) http://www.paulthedutchman.nl/portfolio/?mi=113
Jul 8, 2013
Hi, I add delete and edit icones on the Events but there is something weird. I can't delete the events of the day through the week view... I can't click on my icones (The action is called with the eventMouseover and then I check if the icone was clicked) . When I drag one event of the day in an other day, it's the same problem. But the deleting all other events of the week works good. Any idea about my probleme ? Sorry for my english, I'm french :D Ben.
Jul 22, 2013
Hi, In fact, when I add an event on the week view, I can delete it only on the week view... If I add an event on the day view, also I'll be able to delete it on the day view and not only on the week view ... The icones are added when the event is built ... so where do I have to check ?
Jul 22, 2013
you can better do it my way, on eventclick and on dayclick, so that fullcalendar knows which event_id, internal id etc. it is http://www.paulthedutchman.nl/portfolio/?mi=113
Jul 22, 2013
Hi Paul, THanks for your answer. Your V1 Example looks like what I'm expecting to do. But my delete button (and my edit button) have to be present all the time, not only for the mouseover. I used the DayClickEvent to display the events of the day. But What I don't understand, is Why my deleting doesn't works according to the view where I am ? Ben
Jul 22, 2013
i didn't make the delete button code. In my v2 calendar i don't use them at all. I have a delete button in the edit dialog..
Aug 13, 2013
People are free to implement this through the eventRender callback, but this is not a feature I feel is very UX-friendly for the general usecases of FullCalendar. Icons are really small and hard to click, especially as we move towards more touch-friendly devices. I'd rather have the user click on the event to get a menu or to open a dialog to do these further actions. Since context menus are rather early 2000's I'd refer a dialog box, which is already accounted for in Issue 162 .
Status:
WontFix
Labels: -Type-Enhancement Type-Feature
Aug 15, 2013
Issue 1574 has been merged into this issue.
Feb 9, 2015
(No comment was entered for this change.)
Status:
Accepted
Feb 9, 2015
For those who want to check out my working application with edit dialog box: codecanyon.net/item/fast-easy-calendar-with-app/8498020?ref=wolberspl
Feb 9, 2015
@Paul Do you have a a version with the latest fullcalendar code available?
Feb 10, 2015
No, not yet. A lot of changes will be necessary because fullcalendar now uses moment.js .. But it is on my todo list. Op 10 feb. 2015 07:58 schreef <fullcalendar@googlecode.com>:
Feb 10, 2015
@Paul would be nice if it will run on fullcalendar 2. I know it is hard to upgrade..
Aug 21, 2015
Discussion for this issue has moved to the following URL: https://github.com/fullcalendar/fullcalendar/issues/481 This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event. Happy coding, Adam
Status:
ExportedToGithub
|
|
| ► Sign in to add a comment |
Labels: -Type-Defect -Priority-Medium Type-Enhancement