Styling the dates

I received a question about whether the plugin could style dates in the way the little purple date is shown in the header image of the website and the plugins wordpress page.

a real life example
a real life example

 

The calendars shown in the header are taken from real live examples of the plugin being used in various sites.  The sites will in many cases have added custom css to style the events lists to match their themes.

With a combination of the date and time formats in the settings for each list and some css, almost anything is possible.

The key is that one can add extra characters into the php date format string.  If the characters are the same as a date format character, one can ‘escape’ them with a preceding backslash.

Sooo…. one could for example add some html to isolate part of the date for css styling purposes.   The image below shows the date and time format settings for a event list.   Note the format string for the day.   It surrounds the month with a span.

\<\s\p\a\n\>M\<\/\s\p\a\n\>j
adding html to the date format
Date format settings for a event listtype

Then one can spice it up with some custom css.  To prove this, I have used the power of the firebug browser add-on to add some element css to show you what could be done.  I’d put the text-align: center at a higher level actually – no need to repeat it.

You of course would add the css for the event date class and the span within it to your theme or to a custom calendar css file.

Example styling of a month and day (prof of concept facilitated by firebug browser add-on)
Example styling of a month and day (prof of concept facilitated by firebug browser add-on)