Calendar Styling

GuildPortal admin site link to the original post

With the new calendar comes a bunch of new built in CSS classes! YAY! So I put this post together showing you how to modify this new calendar using custom CSS.

Before
After

Because the default calendar styling isn't added in with the rest of the custom CSS, you'll need to add the code to your footer area. So, you have two choices:

1. If you like my choice of colors (ignore the blue and purple event colors, because you set those yourself in the calendar event panel), then just copy this link and add it to your Footer HTML
   
   <link  rel="stylesheet" media="screen" type="text/css" href="http://www.axiomfiles.com/Files/258012/default-calendar.css">


2. If you want to use different colors or background images for your calendar, then either copy the code below (or download my css file) then:

• Modify the colors and images to match your site.
• Upload the file to your guild files
• Copy the <link> from choice #1 above and paste it into your footer HTML (Control Panel > Custom HTML & Script > Footer Area)
• Copy the link to your file (right click and choose "Copy link location") then replace the URL in the <link> (the text in orange).

The CSS

/* Overall Calendar */
#gpFullCal { }

/* Header - Contains Selection buttons and Month & Year */
.fc-header { }
.fc-header-title { font-size: 24px; }

  /* All Header Buttons (default=normal, hover=when hovered over, down=when clicked, active=when selected (m/w/d butons) */
  .fc-header .fc-state-default span { background-color: #444; color: #ddd; border: #777 1px outset; }
  .fc-header .fc-state-hover span { background-color: #777; }
  .fc-header .fc-state-down span { background-color: #333; }
  .fc-header .fc-state-active span { background-color: #555; }

  /* Arrow button */
  .fc-header .fc-button-prev span { }
  .fc-header .fc-button-next span { }

  /* Today button */
  .fc-header .fc-button-today span { }

  /* Month-Week-Day buttons */
  .fc-header .fc-button-month span { }
  .fc-header .fc-button-agendaWeek span { }
  .fc-header .fc-button-agendaDay span { }

/* Calendar Body */

  /* All borders */
  .fc-widget-content, .fc-content .fc-state-default { border-color: #555;}

  /* All Calendar Headers (m/w/d views) */
  .fc-content th.fc-state-default { background: #444; color: #ddd; font-size: 120%; }

  /* Calendar Time (left columns with times in week & day views) */
  .fc-content th.fc-axis  { background: #222; color: #ddd; font-size: 120%; }

  /* Today */
  .fc-today.fc-state-default { background: #002200 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-today-big.gif) top center repeat-x; }

  /* Days current Month */
  .fc-not-today.fc-state-default { background: #111111 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-big.gif) top center repeat-x; }

  /* Days outside of current Month */
  .fc-other-month.fc-state-default { background: #070707 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-out-big.gif) top center repeat-x; }

  /* Events */
  .fc-event { font-size: 16px; }
  .fc-event-time { padding-right: 4px; }
  .fc-event-title { }
  .fc-event-title img { float: right; max-width: 30px !important; max-height: 30px !important; padding:3px;}

  /* Event Header & Footer (week & day views)  */
  .fc-event .ui-resizable-handle.ui-resizable-s { background-color: #555 !important; }
  .fc-event, .fc-agenda .fc-event-time, .fc-event a { background-color: #555; }

Customizing

Some CSS classes are blank { } in the css above. I left them this way so you can more add more generalized CSS (like a background image for the entire calendar) or more specifically target an element (like just the today button in the header.

• Overall Calendar
  
  
  • #gpFullCal is the ID of the wrapper that contains the entire calendar. If you want to add a background image for your calendar, do it here. But then you might want to make the calendar body backgrounds all transparent.
  
  
• Header
  
  
  • .fc-header wraps the entire header - it contains the arrows, today button, calendar title and the month/week/day buttons.
  • .fc-header-title is the css for the calendar title.
  • "All Header Buttons" section in the css is the overall css for the header buttons... there are classes for "default", "hover", "down (or clicked)" and "active (actively being clicked)".
  • "Arrow Buttons" section lets you specifically target the previous and next buttons styles.
  • "Today Button" section lets you target the today button styles.
  • "Month-Week-Day Buttons" section lets you target those buttons separately.
  
  
• Calendar Body
  
  
  • "All Borders" section targets the classes that assign the border color.
  • "All Calendar Headers" section targets the top row of the calendar in the month, week and day views.
  • "Calendar Time" section targets the left column that contains the times in the week and day views.
  • "Today" section targets the today cell of the calendar.
  • "Days current Month" targets all days within the current month.
  • "Days outside of current Month" targets all days outside of the current month.
  
  
• Events
  
  
  • The last section targets the events contained within the calendar body.
  • All this CSS does is enlarge the event font, adds some space between the time and title (padding-right) and then enlarges &moves the image to the upper right corner of the event. The image may become partially hidden if the event is short ( < 1 hour ).
  • Don't change the event colors here as the colors are assigned by category in the calendar event panel
  • Event header and footer CSS added - default header color turned out to be blue and the footer is transparent. 

Edit 12/18/2009: Added Event Header & Footer CSS for week and day views.