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):
- Scroll: Off
GENERAL > ADVANCED SETTINGS
- Corner: Square
- Border: Off
- 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.)
/*Main Calendar Title*/
/*Description in a Feed Item*/
4.2 Styling for each individual calendar item
/*Each individual calendar event item*/
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.
4.4 Location Styling
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)
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.