Hello,

Is there any way to implement a flyout with a calendar? We're using a large, "scheduler"-like calendar and the users would like to see a summary of events when they mouse over a particular day (if the day has one or more events, of course).
The challenge I'm facing is linking the "Day" cell with the flyout's "For" property.

I can probably explore the RenderHtml route but I would like to avoid that, if possible.

Thanks!

Hi,

If you are considering using Flyout on the Calendar days, first you will need to handle the Calendar's DayRender event and make sure you generates a unique id for each cell. You must do this because the Flyout has to be associated to an "id" (the For property) and by default only the Calendar has an id but the cell does not have any id. The following HTML demonstrates the goal of this step. For example, the default HTML for day "5" can be something like this:



You will need to handle DayRender event to change it something to:



Note the new "id" attribute added here.

Once you complete this step, you will need to programmatically generate a list that includes all the ids you generated in your DayRender event and assign that to your Flyout control. For example, if you want to assign Flyout to all days that has an "event" and you only has three "event days", then your can assign For property to "day5,day7,day11". The key is the IDs you assigned to the For property must match the IDs that you generated in your DayRender event.

Hope this helps. Please feel free to let us know if you still have any questions.

Thanks!