I had planned to introduce my demo page featuring the EUSP Fall workshop calendar, but Mark Miller beat me to it. You can read his comments, and/or explore the page by yourself to try and discover all the featured customizations.
I’ll share more details in future posts. For now, here is the flat list of customizations, all added through the SharePoint UI (no SharePoint Designer, no server side change):
- Calendar displaying three months, not just the current month.
- Sundays have been removed (but we are open on SharePoint Saturdays!).
- The calendar height has been adjusted to fit in the page.
- Easy Tabs, that automatically generate the tabbed interface for the calendar months.
- Content types: workshops have a colored background, while a flag is displayed next to US holidays. Conferences have the standard SharePoint look.
- color coding based on the trainer’s name, for both the calendar views and the list views.
- Beauty Tips (jQuery plugin): there are many jQuery tooltip plugins around. I have selected this one for its ability to pull data from another page (in this case the display form) , and auto-position the popup in the largest available area – very useful in cases like mine where the popup has a significant size. Also, I love all the customization options. A great plugin!
- HoverIntent (jQuery plugin): another very useful plugin that analyzes your mouse movements. It waits until the user’s mouse slows down enough before triggering the tooltip.
- “learn more” button in the events list.
These customizations will of course be presented in detail in the upcoming workshops:
- Easy Tabs Interface, on September 23rd.
- Calendar solutions, on October 16th.
- Color coding and animations workshops, in November/December.
5 comments
Comments feed for this article
September 11, 2009 at 3:45 am
Rose
I just saw your Calendar displaying three months, not just the current month on your other site. I’ve spent the last 4 hours trying to do that on my site… no luck of course but I’ll eagerly await your explanations. I love your site and have used so many of your tricks, passing it along to lots and lots of other co-workers. Thank you Christophe for all that you give to us… and know that lots of us want to be Christophe’s BFF.
September 22, 2009 at 3:59 pm
Mike
Went to the demo page:
http://www.pathtosharepoint.com/Calendars/Pages/Workshops.aspx
I am running IE7. On page load, no problems. On mouseover, DispForm.aspx is rendered via BeautyTips as is the expected behavior, but I get that annoying JavaScript error in the lower left hand corner of my browser.
September 23, 2009 at 7:53 am
Christophe
Mike – same for me, and I haven’t found the time to investigate it further. This POC goes through many layers, as Internet Explorer doesn’t support canvas natively.
December 1, 2009 at 4:01 pm
illnino
I am sorry I tried in different browsers(IE6,IE8,FF3.5.4,Chrome Dev), I couldnt see the Hover effect.
May I know why?
December 8, 2009 at 7:03 am
Christophe
Sorry, the page has evolved in 3 months and doesn’t match the description of this post anymore.
The Beauty Tips effect is really cool, I’ll try to include it in my Gantt demo this week.