New Google Calendar Widget, with custom CSS styling

  • 2
  • Praise
  • Updated 3 years ago
I have yet another revision to Rise's excellent Google Calendar Widget.

This one supports inserting the text for custom CSS styling rules in the settings screen.   This is useful; it lets you apply custom styling to specific parts of your calendar display.  For example, you can say
.wednesday .date {color:darkblue;} 
and get a distinctive color on every Wednesday's date in the calendar. Or you can say
.tomorrow .all {color: red;} 
and show tomorrow's events in red.  Similarly, you can adjust the indentation of the location of each event with a line like this:
.location {  margin-left: 40px; }
The settings page for this version of the widget contains some examples of CSS.  (Thanks to Curtis of FAC Signage for the inspiration to get this done.)

The Widget's URL is here: 

http://plumislandmedia.net.s3.amazonaws.com/styled-calendar-widget/widget.html

The Settings (UI)) URL is here: 

http://plumislandmedia.net.s3.amazonaws.com/styled-calendar-widget/settings.html

My fork of the Google Calendar Widget source code is here:  https://github.com/OllieJones/widget-google-calendar/tree/style

Any remarks or suggestions are welcome.  But, you know, CSS can be a bit of a hairball to troubleshoot. Please be specific about what you're trying to do if you ask me for help.
Photo of Oliver Jones

Oliver Jones

  • 692 Points 500 badge 2x thumb

Posted 4 years ago

  • 2
Photo of Oliver Jones

Oliver Jones

  • 692 Points 500 badge 2x thumb
Coder types may be interested in how I did this. jQuery is pretty slick for doing this kind of thing. There are two parts to it.

First, you can stick extra CSS into a page using this jQuery / Javascript function.
function injectCSS(rule) {
  var $style = "<div><style>" + rule + "</style></div>";
  $($style).appendTo("body");
}
Second, I used jQuery / Javascript calls like these to add custom class names to the days in the display. This allows selectors like ".thursday" and ".tomorrow". 
switch(pos) {
  case 0: $day.addClass("today"); break;
  case 1: $day.addClass("tomorrow"); break;
  case 7: $day.addClass("nextweek"); break;
}
$day.addClass(moment(currentDate).format("dddd").toLowerCase());
Again, the source code is available here:
https://github.com/OllieJones/widget-google-calendar/tree/style
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Thank you for your contributions, Oliver!
Photo of FAC Signage

FAC Signage

  • 732 Points 500 badge 2x thumb
Yes, I will second that motion :-)
Photo of Biologyben

Biologyben

  • 3,558 Points 3k badge 2x thumb
Thank you again!  

I've used this as you indicated with the following code

.event. title, .event .location, .event .description {display:none;}

The Location & Description disappeared (YAY) but the Title did not. I've just set the text to transparent for now. Also, if set to 'play until done', it plays through the entire list, fades out, then jumps back to the start for a moment, and then flashes to the next item. I will assume this is not just with your widget, but with the original as well. Thanks again, this is (mostly) perfect!
(Edited)
Photo of Oliver Jones

Oliver Jones

  • 692 Points 500 badge 2x thumb
Hi, you want 
.event .summary  
as the CSS selector for the event's so-called "title."  The selectors are .date, .summary, .time, .location, and .description. I hope this helps.
Photo of Vincent Mai

Vincent Mai

  • 130 Points 100 badge 2x thumb
Hi Oliver,

Thank you so much for creating this.

I had a question on regards to only showing one event at a time (for my conference room displays since I don't want a whole list on there). I see on the custom widget that I can edit the current and past events for "today's events" but nothing on the next/upcoming event. I would like to either make the text transparent or have it hidden until the current event is finished. 

Is this possible?

Thanks
Photo of Byron

Byron, Keener

  • 9,658 Points 5k badge 2x thumb
+1