My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 267: resize events on mouseover to ease reading
1 person starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  Apr 2010


Sign in to add a comment
 
Reported by ra...@bhatia.at, Dec 31, 2009
i have an agendaWeek view with 3-4 concurrent events.

i now would like to create an onmouseover event to scale the calEvent to
e.g. 150px/300%/$columnWidth.

this is my first time that i'm experimenting with jquery and i do not know
how to adapt http://docs.jquery.com/UI/Effects/Scale to the fullcalendar
events.

can any1 shed a light on this?

cheers,
raoul
ps. i do not know where else to post, please remove if inappropriate!
Dec 31, 2009
#1 ra...@bhatia.at
my current solution is to patch agenda.js to give an id to each element
(e.g. raoul+event.id) (see patch) and then use some animate magic:

            eventMouseover: function(calEvent,jsEvent) {
                var e = $("#raoul"+ calEvent.id);
                calEvent.width = e.css('width');
                e.animate({ width: "150px" }, 200 );
            },

            eventMouseout: function(calEvent,jsEvent) {
                $("#raoul"+ calEvent.id).animate({ width: calEvent.width, }, 50 );
            },
        });

the only thing missing would be how to bring the element to the front :).



i think that this patch would be a nice addition to fullcalendar.
what do you think?

cheers,
raoul
agenda.js.patch
615 bytes   View   Download
Jan 18, 2010
Project Member #2 adamrs...@gmail.com
hi raoul,
i would use eventRender
(http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/) to attach the
effect to the event. not sure if there will be any conflicts though, hope not.
adam
Jan 18, 2010
Project Member #3 adamrs...@gmail.com
sorry raoul, didnt read your last comment. your solution w/
eventMouseover/eventMouseout looks good. however, there is an easier way to get the
current element, just access `$(this)`.....

            eventMouseover: function(calEvent,jsEvent) {
                var e = $(this);
                calEvent.width = e.css('width');
                e.animate({ width: "150px" }, 200 );
            },

this could be a good addition to fullcalendar, though i think it would be best as a
plugin. there will be a plugin architecture in 1.5

good luck,
adam

Status: Done
Feb 23, 2010
#4 sowji...@gmail.com
The following code is not working. I am using Fullcalendar 1.4.5

eventMouseover: function(calEvent, jsEvent) {
	    calEvent.width = $(this).css('width');
	    $(this).animate({ width: "150px" }, 200);
	},
	
	 eventMouseout: function(calEvent,jsEvent) {
                $(this).animate({ width: calEvent.width, }, 50 );
            },
Feb 23, 2010
Project Member #5 adamrs...@gmail.com
can you be more specific about what happens (error being thrown, etc...)

i will take a look at it...
Status: New
Apr 26, 2010
Project Member #6 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Done
Sign in to add a comment

Powered by Google Project Hosting