Yet another Google Calendar Dashing widget

README.md

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.

google_calendar.coffee

Batman.mixin Batman.Filters,

  startText: (str_start)->
    now = moment.utc()
    start = moment.unix(str_start)
    "#{start.from(now)}"

class Dashing.GoogleCalendar extends Dashing.Widget

google_calendar.html

<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>

google_calendar.rb

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

google_calendar.scss

// ----------------------------------------------------------------------------
// 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;
  }

}

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

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 }

@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.

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.