Skip to content

Instantly share code, notes, and snippets.

@melekes
Created August 30, 2013 08:51
Show Gist options
  • Save melekes/6387762 to your computer and use it in GitHub Desktop.
Save melekes/6387762 to your computer and use it in GitHub Desktop.
Yet another Google Calendar Dashing widget

Yet another Google Calendar Dashing widget

Yet another Google Calendar Dashing widget

Description

Dashing widget to display first two coming-up Google Calendar events.

Basically, you do not need more than two events on your dashboard, but it can be easily extended to the neighboring cells and show, say, 4 events instead of 2.

This is an alternative to existing widget, designed by @designoid, that allows you to display an event (1 event per widget). In contrast, this widget shows all the events in one place (1 calendar per widget).

For each calendar, Dashing job fetches the events of it using provided uri, orders events to match starting time and sends the data to the dashboard.

In our company, we use it to track internal events (e.g. meetings and presentations).

Installation

You'll need icalendar for handling ics data. Go ahead and add gem 'icalendar' to your Gemfile. Then run bundle install.

Download MomentJS and put moment.min.js in your /assets/javascripts directory. It gets included automatically.

The files google_calendar.coffee, google_calendar.html and google_calendar.scss go in the /widget/google_calendar directory.

The google_calendar.rb goes in the /jobs directory.

Open it and add calendars you want to track. You'll have to give a name and uri for each of them. Notice that uri should return data in RFC-2445 format (see icalendar readme for details). You might also change how often job is called to suit your needs.

Finally, add the following block to your dashingboard.erb file for each calendar:

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
  <div data-id="google_calendar_<calendar_name>" data-view="GoogleCalendar" style="background-color:#4183C5;"></div>
  <i class="icon-calendar icon-background"></i>
</li>

Replace <calendar_name> with the calendar's name.

Batman.mixin Batman.Filters,
startText: (str_start)->
now = moment.utc()
start = moment.unix(str_start)
"#{start.from(now)}"
class Dashing.GoogleCalendar extends Dashing.Widget
<div data-foreach-event="events">
<div class="event-container">
<div class="start" data-bind="event.start | startText"></div>
<h1>
<span data-bind='event.title' class="title"></span>
</h1>
</div>
</div>
require 'net/http'
require 'icalendar'
require 'open-uri'
# List of calendars
#
# Format:
# <name> => <uri>
# Example:
# hangouts: "https://www.google.com/calendar/ical/<hash>.calendar.google.com/private-<hash>/hangouts.ics"
calendars = {}
SCHEDULER.every '5m', :first_in => 0 do |job|
calendars.each do |cal_name, cal_uri|
ics = open(cal_uri) { |f| f.read }
cal = Icalendar.parse(ics).first
events = cal.events
# select only current and upcoming events
now = Time.now.utc
events = events.select{ |e| e.dtend.to_time.utc > now }
# sort by start time
events = events.sort{ |a, b| a.dtstart.to_time.utc <=> b.dtstart.to_time.utc }[0..1]
events = events.map do |e|
{
title: e.summary,
start: e.dtstart.to_time.to_i,
end: e.dtend.to_time.to_i
}
end
send_event("google_calendar_#{cal_name}", {events: events})
end
end
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #4183C5;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-comment styles
// ----------------------------------------------------------------------------
.widget-google-calendar {
background-color: $background-color;
.event-container {
//display: none;
overflow: hidden;
}
.title {
color: white;
font-size: 46px;
width: 100%;
overflow: hidden;
text-overflow: elipsis;
white-space: nowrap;
font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.start {
color: #ccccff;
font-size: 32px;
text-align: left;
padding-left: 30px;
}
}
@mmh
Copy link

mmh commented Dec 10, 2014

Thanks, great widget.
Has anyone figured out a way to get recurring events to work with this?

@specialcircumstances
Copy link

I had problems with some events having dtend as a NilClass, anyway, here's a quick and dirty "pre-filter"

# select only current and upcoming events
now = Time.now.utc
# Get rid of any nasty NilClass entries
# This should probably be a bit stricter but it's a fix for now
events = events.select{ |e| e.dtend.class != NilClass }
# End of JSFix
events = events.select{ |e| e.dtend.to_time.utc > now }

@estiens
Copy link

estiens commented Feb 21, 2015

@mmh recurring events do not work for me either. I also had to add a check for events with a nil dtend like @specialcircumstances did. I think we might be better off using the Google v3 API.

@freecellwiz
Copy link

Thanks for this. Of the various calendar widgets, I found this one the quickest to get started with for my simple case (public Google calendar, no recurring items). I did edit mine a bit to have a title, smaller fonts and to show the next four items instead of two.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment