Branding the date picker calendar

I havent been posting lately bc I have been knee deep in theme hell. It is coming along… I spent over 3 hours the other day trying to skin the damn date picker calendar pop up, all to no avail. I finally found a way to do it. I created an alt style sheet, saved it to my style library, and copied all the date picker styles that i wrote to it and applied the alt stylesheet via the master page alt style sheet field (site/_Layouts/ChangeSiteMasterPage.aspx). It works 🙂 One caveat: you only get one date picker style for your site collection-if you apply a different theme to a subsite, the date picker will still pick up the style from the alt stylesheet.

Hooray! Branded datepicker!!!

Hooray! Branded datepicker!!!

Advertisements

9 thoughts on “Branding the date picker calendar

  1. Pingback: novolocus.com » The lunacy of the SharePoint DatePicker control

  2. Oo – good idea. The only option I found was altering the file in the _layouts directory (just like you’re not supposed to…).

    Hey, actually, I suspect that you’ve mentioned this on my blog, now that I check my own one!

    http://www.novolocus.com/2007/11/02/the-lunacy-of-the-sharepoint-datepicker-control/

    Regarding the caveat – all the ChangeSiteMasterPage does is recurse over the site and subsites setting the AlternateCSSUrl property of the SPWeb object. If you’re not afraid of a little c# code, you could programmatically set the AlternateCSSUrl on a site-by-site basis.

    Recently I’ve been looking at using a feature receiver to programmatically apply a combination of theme and master pages (for both normal sites or meeting workspaces), though it does have to be activated site-by-site. You could build setting the alternate date-picker CSS into something like that.

    Actually, I might blog about both these things shortly!

  3. Hey Andy, your idea sounds cool, the only issue for me, and I suspect a lot of folks who are designers by trade and not programmers, is we wouldn’t have a clue how to do what you suggested. I post the actual how-to’s that I have figured out for my intranet, and sometimes I really have to push my comfort level with the more technical stuff. And I suspect many designers tasked with dealing with SharePoint probably have admins that would have a coronary if we tried some more prgrammatic approaches, if we could even figure out how to do them 😉

  4. Pingback: novolocus.com » Style the DatePicker using an Alternate CSS

  5. hi
    i have problem with using datepicker ,
    i want to have new kind of date , and i wrote the program with java script
    but i dont know how to use it in iframe.aspx or anywhere else which should i load it
    u know , i mean i have new datepicker instead of share point date picker , but i want to use it in share point , what should i do ?
    tnx in advanced

  6. Hello,

    I have been reading and searching all over the place on how to brand the pop up date picker. This is the best source so far but, I can see to get this straight. I am working with 2010 Foundation. I have a custom css file called “mycustom.css” that I reference in a custom v4 master called “mycustomv4.master” using the following line in the :

    I was able to customize everything so far except any of the dynamic pop up windows. Especially the Date Picker. I copied the datepickerv4.css from the styles folder and tried editing bits and pieces to see if I get any reaction or change, but I get nothing. What am I missing here? Any advice would be great and helpful!

    • I think the issue is that the date picker renders inside of an iframe, so your css overrides for the main site are not being picked up by the page within the iframe. The only way I have been able to alter the date picker in 2010 is with a theme.

      • Yea. That is the only way I have been able to as well but, if I change the theme then the master page that I love is altered. Not fair…..

        I appreciate your help. Again, your blog is awesome!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s