My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 263: Method to retrieve all visible elements for a given event
6 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 neves.jhenrique@gmail.com, Dec 29, 2009
I have a lot of events on my calendar and I can really distinguish events,
I am tying to make a hover state but I can only hover the even on the same
line, if the even is goes to the next line it won't hover ;(

i was checking the code and it seems that they dont hover both because they
are separated divs.

Please look at the screen shoot, I point the cursor on the event and it
only hovers the event on the line, it doesnt work on the other line.

calendar hover.JPG
28.3 KB   View   Download
calendar hover codigo.JPG
97.4 KB   View   Download
Dec 30, 2009
Project Member #1 adamrs...@gmail.com
yeah, i see. they are separate divs my design, its just the way fullcalendar works.
it would be impossible to make is a single div, the only solution i can think of is
to wrap both elements within a wrapper div. this would make the fullcalendar code
significantly more complex, so i'll wait till i hear more requests like this before
changing the codebase. thanks
Summary: related pieces of an event contained in a single DIV
Dec 31, 2009
#2 neves.jhenrique@gmail.com
is there any way possible to change the color of the event that the mouse is pointing
at ?, because when the calendar has a lot of events its hard to distiguish them.
Jan 13, 2010
#3 neves.jhenrique@gmail.com
Someone ?, please help. I really need it.
Jan 18, 2010
Project Member #4 adamrs...@gmail.com
hi neves. this is actually pretty hard and would require some hacking around. here
are the general steps i would take, but i can't walk you through it in much more
depth than this:

1. attach a className of "event-#" to each event (where # is the id of your event).
either do this with `eventRender` of by the className Event Object property (look at
docs)

2. in the `eventMouseover` callback, search for all the events that have the class
"event-#", and change their color

3. use the `eventMouseout` callback to change their color back
Feb 6, 2010
Project Member #5 adamrs...@gmail.com
neves,
i am planning on introducing a method that will make this easier.. a method to 
retrieve all <div>'s for an event. you should be able to pass an ID, or the Event 
Object itself, and you will get back an array of <div>'s. You can use this in your 
eventMouseover/eventMouseout handler and it will be a lot easier.
Summary: Method to retrieve all visible elements for a given event
Status: Accepted
Labels: -Type-Defect Type-Enhancement
Jul 30, 2010
#6 mkha...@gmail.com
@neves.jhenrique

If i understand correctly, you want to change the color of the event the mouse is hovering. Here is how i did it:


eventMouseover: function(event, element, view) {
	if (event.className == 'on_demand') {
		$(this).css({
			"background-color": "green",
			"border-color": "green",
			"opacity": "0.8",
			"filter": "alpha(opacity=80)", /* for IE */
		});
	} else if (event.className == 'scheduled') {
		$(this).css({
			"background-color": "#36c",
			"border-color": "#36c",
			"opacity": "0.8",
			"filter": "alpha(opacity=80)", /* for IE */
		});
	}
},

eventMouseout: function(event, element, view) {
	if (event.className == 'on_demand') {
		$(this).css({
			"background-color": "green",
			"border-color": "green",
			"opacity": "1",
			"filter": "alpha(opacity=100)", /* for IE */
		});
	} else if (event.className == 'scheduled') {
		$(this).css({
			"background-color": "#36c",
			"border-color": "#36c",
			"opacity": "1",
			"filter": "alpha(opacity=100)", /* for IE */
		});
	}
}

In my case, 'on_demand' and 'scheduled' are classNames that i use to distinguish 2 types of events. You may have your own names and if-conditions accordingly.
Aug 25, 2010
Project Member #7 adamrs...@gmail.com
 Issue 594  has been merged into this issue.
Aug 26, 2010
#8 laudesm...@gmail.com
Sorry, already posted on  issue 594 :
I might do something wrong but I use the eventRender event to do so:

$('#calendar').fullCalendar({
...
    eventRender: function(event, element) {
        event.div=element;
    }
});

And then I can use in any Fullcalendar method like a loop through all clientEvents the event.div to do nice things such as jquery or jquery UI effects:

$(event.div).effect("pulsate");

By the way, very very nice work Adam!

Laurent
Oct 7, 2010
Project Member #9 adamrs...@gmail.com
 Issue 628  has been merged into this issue.
Sep 18, 2012
#10 Omie...@gmail.com
Hi Adam,
I would love to have this method you described.
I'm just commenting to let you know, in hopes it would raise the priority of this feature being created :)
Thanks!
Aug 13, 2013
Project Member #11 adamrs...@gmail.com
(No comment was entered for this change.)
Labels: -Type-Enhancement Type-Feature
Aug 21, 2015
Project Member #12 adamrs...@gmail.com
Discussion for this issue has moved to the following URL:
https://github.com/fullcalendar/fullcalendar/issues/534

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