CSS for Google Calendar Event Date & Time Elements

custom google calendar widgetWe have just introduced new classes for the Google Calendar widget date & time components. These allow you to customize the date and time with CSS and achieve any styling you want. You can match your website style and make your Calendar Event date/time more prominent in the feed. This article focuses on the CSS used for the date/time components of your custom Google Calendar widget. You can find out more about how to use CSS to style the remaining widget components in our in-depth article on Google Calendar CSS.

Custom Google Calendar Widget CSS Classes

These are the relevant classes for Google Calendar event date/time:

‘Clock icon’ class

This class is for the clock icon which appears alongside the date/time by default. .fa.fa-clock-o Note – If you wish to hide this icon you can use: .fa.fa-clock-o {display:none!important;}

‘Time’ class

The ‘Time’ class styles the time element of the date/time. .fw-gc-feed-item-time-only

‘Date’ class

The ‘Date’ class styles the date element of the date/time. .fw-gc-feed-item-date-only

‘Date & Time’ class

This class styles both date and time components. Useful for adding a border around the whole date+time element, or to reposition the whole date+time element using margins. .fw-gc-feed-item-date
Using these CSS classes you can create a widget such as the example below. You can find the full CSS used for this custom Gcal widget here.
If you need any assistance with customizing your Google Calendar widget, please contact us and we’ll be happy to help!

Increase widget load speed

Your widget loading (and page loading speed) can be negatively affected by a number of factors, but there are also ways to increase widget load speed. We aim to provide the fastest RSS widget available, but there are limiting circumstances which are out of our control. We do apply caching of your widget and refresh your widget cache every 15 minutes. Some of the parameters used in the FeedWind setup screen can affect widget/page-loading performance and are detailed below.

Number of feed items

The more feed items you specify in your widget setup, the longer it will take to load the widget as our server has to make more calls to the source feed server in order to obtain your content. The default setting is 15 feed items but you can increase this up to 99; please note however, that there is a proportional increase in load time for widget content as the number of items increases.

Text/Thumb/HTML Styles

The fastest load performance is achieved using the Text-only widget style. The Thumbnail option is next-fastest, with the HTML style loading slowest. Obviously the more media within the content, the slower a widget will load too.

Number of Characters in the Titles & Content

The greater number of characters allowed in the content, the slower your widget performance will be as more data must be transferred. However, this is a minor influence on the widget load speed.

Feed URLs

The more feed URLs you aggregate the slower your widget will load. To increase widget load speed, please limit the number of URLs you use in a widget.  Our system limits the number of feed URLs to 15 at present. When choosing feeds from third parties, it is important to choose those from sources whose servers can offer the same approximate response times. If you have a single feed in your multiple feeds list whose server is slow to respond, your widget will also be slow to refresh.

Custom CSS

Loading a custom CSS requires an external server call to wherever the CSS file is stored. This means that he widget cannot load until the server hosting the CSS responds and delivers the requested CSS data. This means that storing the CSS on the same server (preferably within the same directory structure of your site files). Caching the CSS file is also recommended.

Page Caching (plugins & extensions)

These can vastly improve widget loading times as HTML, CSS and .js all of which are used with the FeedWind RSS widget. You must be careful not to set the cache refresh to more than 15 minutes however, otherwise users may not get the widget content refreshed during the FeedWind 15 minute refresh cycle.
 

Using Dropbox to host CSS files

How to host css stylesheets on Dropbox

It’s easy to host CSS stylesheets on Dropbox where you can store a CSS file for a custom Feedwind widget without having to store a CSS file on your own server. This is particularly useful where you are using an online platform such as Wix or Weebly to build your site. Platforms like these do not have the facility for storing CSS files, so Dropbox is a great solution. First you need to create your custom CSS file. Depending on what sort of widget you a building (RSS widget, Facebook page widget or Google Calendar widget). You can use any code editor or plain text editor to create your CSS as explained in the relevant support documents for CSS. Once you have created your stylesheet and saved it as a .css file, you can then upload it to Dropbox for later use.

Get the URL for your .css file

On an Apple Mac

On an Apple Mac, Open your dropbox, and locate your .css file. Right-click on the file and select “Copy Public Link.” This will copy the publicly available URL for your .css file to your clipboard. host css with dropbox

In a windows-based browser

In a windows browser, Dropbox display things a little differently from the Apple Mac version or the Dropbox app. Below are example screenshots for the Windows browser:

dropbox can host css files

Grab the custom .css file link for use in Feedwind by clicking on the “Share” button alongside your .css file in the Dropbox file list. The following modal will appear: use dropbox for css

The URL will look something like this:

https://www.dropbox.com/s/j0vdhe8owoolgh5/custom98.css?dl=0 To use this URL in FeedWind you will need to make a small adjustment to the URL by changing the www. In the URL to dl. e.g. www.dropbox.com/../ becomes https://dl.dropbox.com/../ When you have your new URL e.g. https://dl.dropbox.com/s/j0vdhe8owoolgh5/custom98.css?dl=0 You can then use this .css URL in your RSS, Google Calendar or Facebook page widget setup screens
 

What is FeedWind used for?

FeedWind is an extremely versatile RSS widget. With support for so many platforms and implementations, Feedwind is the ideal solution for anyone who needs to display RSS feeds using a customizable widget. Here are some examples of how Feedwind can be used:

Tickertape

A traditional format consisting of a single line of horizontally scrolling text. These are commonly used to display exchange rates, news headlines

Custom colors and fonts

Match the color design of any website and match the fonts. Choose to do this from the FeedWind setup screen, or by using a custom CSS to define your own fonts or use webfonts.

Custom shapes

Feedwind is so versatile, you can use a custom CSS to create any type of styling effect – need a circular widget – easy!  

Slideshow

Feedwind can be used to feed images into a horizontal scrolling slideshow. Ideal for a website banner which displays the latest news or other images.

News widget

Many web designers consider RSS feeds only as a source of news content. This is where FeedWind was born – our original widget was aimed at doing just that and we continue to provide the best RSS news widget available.

Blog summary

Blogs like this one you are reading are great places for users to get insight into the topics you want to share. For a user to find an article of interest, they may be required to scroll through your blog or perform a search. Even with a summary, users can still have difficulty finding what they want. A FeedWind scrolling feed widget allows users to see a blog summary (as text only/thumbnail/full HTML) which auto-scrolls so they can find what they want with more ease.