My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 210: Add/Edit/Delete events through icons
20 people starred this issue and may be notified of changes. Back to list
Status:  ExportedToGithub
Owner:  ----
Closed:  Aug 2015


Sign in to add a comment
 
Reported by Jakob.Ackermann84@gmail.com, Nov 25, 2009
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.
event.jpg
5.3 KB   View   Download
Nov 27, 2009
Project Member #1 adamrs...@gmail.com
hi jakob,
i agree this would be very useful and would bring fullcalendar closer to an
all-in-one calendar solution.

i'm thinking this could be achieved through dialog-like boxes, like the way google
calendar and icalendar do it. just accepted this related issue:
https://code.google.com/p/fullcalendar/issues/detail?id=162

i feel like the dialog solution might be better, b/c it works in both month and
agenda views (via a click... there doesn't need to be room on the event itself for
icons). like the way google calendar and icalendar do it. let me know how you feel.

thanks for the suggestion,
adam
Summary: Add/Edit/Delete events through icons
Labels: -Type-Defect -Priority-Medium Type-Enhancement
Nov 29, 2009
#2 renzo.la...@gmail.com
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").
fullCalendar_edit.jpg
19.7 KB   View   Download
Dec 4, 2009
#3 Jakob.Ackermann84@gmail.com
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
#10 bibendus...@gmail.com
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

hoverDeleteButton.txt
873 bytes   View   Download
Apr 28, 2010
#11 brian....@gmail.com
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
#12 sunniyeow
bibendus1983, your "hoverDeleteButton.txt" works great. I just wanted to thank you
for that.
Oct 7, 2010
Project Member #13 adamrs...@gmail.com
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
#14 davsh...@gmail.com
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
#15 cfprogra...@gmail.com
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
#16 jan.tova...@gmail.com
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.
fullcalendar-contextmenu1.jpg
91.0 KB   View   Download
fullcalendar-contextmenu2.jpg
84.6 KB   View   Download
datatables-contextmenu.jpg
75.8 KB   View   Download
jstree-contextmenu.jpg
21.7 KB   View   Download
fileInfo-contextmenu.jpg
46.7 KB   View   Download
Oct 29, 2011
#17 weightlo...@gmail.com
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
#18 paul.wol...@gmail.com
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
#19 benjamin...@gmail.com
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
#21 benjamin...@gmail.com
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
#22 paul.wol...@gmail.com
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
#23 benjamin...@gmail.com
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
#24 paul.wol...@gmail.com
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
Project Member #25 adamrs...@gmail.com
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
Project Member #26 adamrs...@gmail.com
 Issue 1574  has been merged into this issue.
Feb 9, 2015
Project Member #27 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Accepted
Feb 9, 2015
#28 paul.wol...@gmail.com
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
#29 allon.mo...@gmail.com
@Paul Do you have a a version with the latest fullcalendar code available?
Feb 10, 2015
#30 paul.wol...@gmail.com
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
#31 allon.mo...@gmail.com
@Paul would be nice if it will run on fullcalendar 2. I know it is hard to upgrade..
Aug 21, 2015
Project Member #32 adamrs...@gmail.com
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

Powered by Google Project Hosting