I am wanting to display my calendar events in a non-traditional way in my homepage design.
The homepage will display the 10 most recent dates in a line. E.g.:
MAY 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | …etc.
First, I need those dates to continually update, when it is the next day, all the numbers need to move one space, and when a new month is coming it needs to appear also.
In addition to the numbers for the date, when you hold your mouse over the number of the date, I would like to have a hidden div that will appear, that display the calendar events for the day. (Such as how in the Matrix backend there are hidden divs with info for assets)
Simple things such as:
May 8 - Breakfast 8am
Lunch 12 noon
Dinner 6pm
When your mouse moves away the div will hide again, and when you move to the next date it will appear for that set of calendar events.
Now, I am unsure how to accomplish all this. I have been thinking about it, and I am sure I need asset listings, paint layouts, etc. But to set it all up, I am racking my brain and am unsure what to do to keep it all dynamic and working correctly.
Here is a sample of what I would like to achieve:
[attachment=196:attachment]
Just a note, I know how to do the HTML and CSS for this, I am only needing help with knowing how to have Matrix make it all dynamic.
example.jpg (9.38 KB)
I have a start on this. Here is what I have so far:
http://websrv.puc.edu/news_events/calendar/
The calendar starts out in week view, so it only displays the dates for this week. Then when you click on the date it will display that days events. BUT, it goes to a new “day” layout page, which I do not want. Could I embbed this using a paint layout in the the current calendar page?
This is what I used in the Single Event type format:
%event_start_datetime_j% |
It seems to work well as you can see, it then lists that appropriate days events, but I need to figure out how to embed those listing in the original calendar page so that you do not have to skip to another page. Also, it is a problem with more than one event per day (which will always happen) because the it lists that date multiple times.
You can use a javascript tooltip (popup), there are some examples online, a simple one is available at http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm.
You can then define the onmouseover and onmouseout event action of the <a> tag. Basically pull the raw content of a single day event and pass it to the display tooltip function.
I have not tried this before, so I don’t know if there is a library out there to allow you to pass a URL (such as http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm to the tooltip display function. Let us know how you go.
Ryan,
That is only part of the problem.
Another part is getting only the current weeks dates to show up, and be able to customize the format of those, while having them rotate each week.
Take a look at the calendar page. If I could only customize those day header links to the date format I want and hide their child elements (then show when mouse over) I would be good to go. Is there any way to customize those and remove the <h3> around those that are making them block elements, so that they can line up as inline dropdowns or sorts? There has to be some way to customize this…
Rolling calendar page will be what you need here. It's in v3.10 onwards. Its description is "Rolling Calendar Page, displays events for a specified interval relative to the current day".
Thanks for this tip. This is what did it. So, I finally got it working, and it was easier than I thought. Thanks for all the help from everyone on this, take a look at my finished proof of concept that I will later build into our final design.
http://websrv.puc.edu/news_events/calendar/frontpage_events
Tom, the only problem with this is that when you have an Calendar Event that is more than 1 day in duration it shows up multiple times (each day for the duration). This may be the expected behavior by Matrix, but it looks like an error when users are viewing it on the front end. I think this greatly inhibits the usefulness of the Rolling Calendar.