Styling CalendarApps
This document explains how to integrate style sheets with CalendarApps. It is assumed that the reader is familiar with style sheets and CalendarApps.
The CalendarApps provide special selectors which allow you to enhance the appearance of the calendars. Below is a diagram which illustrates style sheet selectors with their corresponding table elements:
Below is the style sheet that was used for the example above. Feel free to copy and modify it.
div.entire_calendar { padding: 5px; margin: 20%; border: 1px solid teal; width: 280px; } div.entire_year { padding: 5px; margin: 5px; border: 1px solid black; } div.all_dates { padding: 5px; margin: 5px; border: 1px solid fuchsia; } div.entire_day { padding: 5px; margin: 5px; border: 1px solid yellow; } div.year { font-size: large; font-weight: bold; border: 1px solid blue; margin: 2px; } div.date { font-weight: bold; padding: 5px; margin: 3px; border: 1px solid red; } div.date_entries { padding: 5px; margin-left: 5ex; border: 1px solid green; } div.event_entry { margin: 2px; border: 1px solid purple; } span.time { width: 10ex; background-color: #FCC; } A.entry_link { background-color: #8FF; }
Please post questions regarding style sheets and CalendarApps on the CalendarApp Forum.