Google Cal Blues

This is a demo on how I used FeedWind's (very handy!) widget-maker to apply custom styling to a Google Calendar. Pro Tip: You can use this on any public Google Calendar-- you don’t have to be the owner.

To customize the styling of a Google Calendar with FeedWind, you can either use their controls, inject a custom stylesheet, or both. In this tutorial, I do both. Before continuing, note that you can only use this tool for a calendar to appear in list (or “agenda) view, so if your heart is set on a gridded (monthly) embed, this won’t work-- at least, not without extensive additional custom code.

This is a step-by-step explanation of how I went

01 Configure Google Cal

  • Make sure the google calendar you want to manipulate is public
  • Go to CALENDAR SETTINGS for that calendar
  • Locate CALENDAR ADDRESS and copy everything after Calendar ID

02 Configure FeedWind Widget

  • Sign in/sign up (free!)
  • Create a new Google Calendar widget
  • Paste Google Calendar ID copied in step 1 in the SETTINGS panel

03 Adjust Widget Settings

  • Use FeedWind’s settings panel to get your calendar resembling the end goal as much as possible; you can always make changes later
  • If you’re following along, here are the widget settings used in this demo (naming only those that have been changed from the default):

GENERAL

  • Scroll: Off

GENERAL > ADVANCED SETTINGS

  • Corner: Square
  • Border: Off

CALENDAR TITLE

  • Calendar TItle: Off

CALENDAR EVENT > COLORS

  • Event Title: #ffffff
  • Where: #9b9b9b
  • Background: #282c32

WHEN > ADVANCED SETTINGS

  • Timezone: Pacific Time

Note: I set this primarily for my own purposes of working with the calendar, since the person entering dates (the client) is in a different timezone than I am.

  • Display: 7 Feed Items

Note: I set this last as 7 turned out to be the number of events that looked good on my published site

  • Sort Order: Oldest
  • Separation Line: Off

04 Build Stylesheet

You can view the HTML structure and supported CSS elements here

  • Create new .css file in your preferred text editor (I like Sublime Text)
  • The next sub-steps here take you through my CSS styling for this demo. Not following the demo? Skip to step 5. You can also view the stylesheet for this project here.

In writing this CSS, the biggest challenge for me was repositioning the item elements so that they appeared in the order that I wanted to see them in. I also needed my own CSS to make each calendar event appear in its own individual “box”-- this is native, but the FeedWind widget stylers don’t allow you to recolor or space them out from the provided controls.

So, here’s what I did:

4.1 Hide Elements You Don’t Want

In this case I’ve hidden

  • main calendar title (which I already hid in the widget settings, but just in case)
  • description field-- which won’t appear if blank but since it is the client and not the designer who is entering into this calendar, it was important to minimize the potential to disrupt the design
  • clock that appears next to the date and time (just a design decision.)

CSS:

/*Main Calendar Title*/
.fw-gc-feed-title {
display: none;
}

/*Description in a Feed Item*/
.fw-gc-feed-item-description {
display: none;
}

/*Clock icon*/
.fa.fa-clock-o {
display: none!important;
}

4.2 Styling for each individual calendar item

CSS:

/*Each individual calendar event item*/
.fw-gc-feed-item {
display: block;
background-color: #49505a;
position: relative;
height: 75px;
margin-bottom: 25px;
}

4.3 Styling for Date and Time

The date element and time element are nested in a date-and-time container, this is the one that is styled here. While it’s possible to apply custom styling to each element in your stylesheet, they can’t be parsed for positioning without some more complex code.

CSS:

/*Item Date*/
.fw-gc-feed-item-date {
color: #c0e46f;
font-weight: bold;
font-size: 19px;
line-height: 25px;
position: absolute;
left: 15px;
top: 25px;
}

4.4 Location Styling

CSS:

/*Item Location*/
.fw-gc-feed-item-location {
position: absolute;
top: 65px;
left: 15px;
font-size: 14px;
color: #eeeeee;
}

05 Upload Stylesheet to Dropbox and Get URL

I used dropbox because that’s what FeedWind recommends; you can use a different file-sharing platform if desired.

  • Once uploaded in dropbox, go to SHARE → GET LINK → COPY LINK

06 Inject Stylesheet

  • In you FeedWind widget, go to GENERAL → ADVANCED SETTINGS → CUSTOM CSS LINK (paste link copied in step 5)
  • Replace the www in the URL to dl
  • Click stylesheet REFRESH icon...you should see your styling loaded

07 Embed Calendar

  • In FeedWind, click SAVE AND GET CODE (button at the top left)
  • Copy code
  • Embed (I did this as an embedded element; no parent page coding necessary)

08 Adjustments

You won’t be able to edit your custom stylesheet directly in Dropbox. Instead, you’ll have to make your changes to the local document in your text editor, and then drop again into Dropbox. However, Dropbox does support version history, so as long as your file has the same name (and extension, obviously), you don’t have to worry about updating the link in FeedWind.

In the same vein, you don’t have to refresh FeedWind every time you upload a new version of your .css file. Refreshing directly on your site will do the trick. Of course, if you want to make changes to any of the settings you made in FeedWind, you will have to refresh.

Published
October 31, 2017
Previous Post

3 Cures for Designer's Block

Next Post

10 Gifts for the Tech Person in your Life

Next Post

10 Gifts for the Tech Person in your Life

Previous Post

3 Cures for Designer's Block