| Issue 267: | resize events on mouseover to ease reading | |
| 1 person starred this issue and may be notified of changes. | Back to list |
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!
Jan 18, 2010
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
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
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
can you be more specific about what happens (error being thrown, etc...) i will take a look at it...
Status:
New
Apr 26, 2010
(No comment was entered for this change.)
Status:
Done
|
|
| ► Sign in to add a comment |
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, raoul615 bytes View Download