jmb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Description

Dashing widget to display the next and some subsequent Google Calendar events using the Google Calendar API v3.
I use this widget to display my shift calendar - see the screenshot below
Set up

This widget works with API v3 and requires a service account to be set up via the Google Developer's Console. Once a project is set up, enable the Calendar API. On the Credentials page create a new OpenID and download the p12 key file - set up the path to this file in the job file and grant the email address access to the relevant calendar.
The job file defines how many events to get from the calendar and when to start the search. My version gets the next 6 events.
Add to Gemfile:
gem 'google-api-client', '>= 0.8'

Run
bundle install

Download the Moment javascript library and add to your javascript assets. Add #= require moment.js to the application.coffee script. You can also use moment.min.js if you've downloaded that.

  
## google_calendar.coffee
class Dashing.GoogleCalendar extends Dashing.Widget

  onData: (data) =>
    event = rest = null
    getEvents = (first, others...) ->
      event = first
      rest = others

    getEvents data.events.items...

    start = moment(event.start.dateTime)
    end = moment(event.end.dateTime)

    @set('event',event)
    @set('event_date', start.format('dddd Do MMMM'))
    @set('event_times', start.format('HH:mm') + " - " + end.format('HH:mm'))

    next_events = []
    for next_event in rest
      start = moment(next_event.start.dateTime)
      start_date = start.format('ddd Do MMM')
      start_time = start.format('HH:mm')

      next_events.push { summary: next_event.summary, start_date: start_date, start_time: start_time }
    @set('next_events', next_events)

## google_calendar.html
<h1 class="subtitle" >Next event:</h1>
<h3 class="times" data-bind="event_date"></h3>
<h2 class="title" data-bind="event.summary"></h2>
<h3 class="times" data-bind="event_times"></h3>
<h4 data-bind="next_count"></h4>

<table class="next">
  <tr data-foreach-e='next_events'>
    <td data-bind="e.start_date"></td>
    <td data-bind="e.start_time"></td>
    <td data-bind="e.summary"></td>
  </tr>
</table>

<div class="updated-at" data-bind="updatedAtMessage"></div>

## google_calendar.rb
# encoding: UTF-8

require 'google/api_client'
require 'date'
require 'time'
require 'digest/md5'
require 'active_support'
require 'active_support/all'
require 'json'

# Update these to match your own apps credentials
service_account_email = '...@developer.gserviceaccount.com' # Email of service account
key_file = '/Path/to/keyfile.p12' # File containing your private key
key_secret = 'notasecret' # Password to unlock private key
calendarID = '...@group.calendar.google.com' # Calendar ID.

# Get the Google API client
client = Google::APIClient.new(:application_name => 'Dashing Calendar Widget',
  :application_version => '0.0.1')

# Load your credentials for the service account
if not key_file.nil? and File.exists? key_file
  key = Google::APIClient::KeyUtils.load_from_pkcs12(key_file, key_secret)
else
  key = OpenSSL::PKey::RSA.new ENV['GOOGLE_SERVICE_PK'], key_secret
end

client.authorization = Signet::OAuth2::Client.new(
  :token_credential_uri => 'https://accounts.google.com/o/oauth2/token',
  :audience => 'https://accounts.google.com/o/oauth2/token',
  :scope => 'https://www.googleapis.com/auth/calendar.readonly',
  :issuer => service_account_email,
  :signing_key => key)

# Start the scheduler
SCHEDULER.every '15m', :first_in => 4 do |job|

  # Request a token for our service account
  client.authorization.fetch_access_token!

  # Get the calendar API
  service = client.discovered_api('calendar','v3')

  # Start and end dates
  now = DateTime.now

  result = client.execute(:api_method => service.events.list,
                          :parameters => {'calendarId' => calendarID,
                                          'timeMin' => now.rfc3339,
                                          'orderBy' => 'startTime',
                                          'singleEvents' => 'true',
                                          'maxResults' => 6})  # How many calendar items to get

  send_event('google_calendar', { events: result.data })

end

## google_calendar.scss
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #47bbb3; //#ec663c;

$title-color:       rgba(255, 255, 255, 1);
$subtitle-color:    rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-calendar styles
// ----------------------------------------------------------------------------
.widget-google-calendar {

  background-color: $background-color;
  .subtitle {
  color: $subtitle-color;
  font-size: 0.75em;
  margin: 15px 0;
  }
  .title {
    color: $title-color;
    font-size: 1.4em;
  }

  .times {
    font-size: 0.9em;
  }

  .next {
    font-size: 0.75em;
    margin-top: 30px;
    .tr {
      border-bottom: 1px solid $subtitle-color;
      .td {
        text-align: left;
      }
    }
  }
  .more-info {
    color: $moreinfo-color;
  }

  .updated-at {
    color: $subtitle-color;
    bottom: 5px;
    right: 5px;
    left: auto;
    font-size: 0.5em;
  }


  &.large h3 {
    font-size: 65px;
  }
}

## google_calendar_widget.png

      
    Raw
  

              google_calendar_widget.png
	class Dashing.GoogleCalendar extends Dashing.Widget

	onData: (data) =>
	event = rest = null
	getEvents = (first, others...) ->
	event = first
	rest = others

	getEvents data.events.items...

	start = moment(event.start.dateTime)
	end = moment(event.end.dateTime)

	@set('event',event)
	@set('event_date', start.format('dddd Do MMMM'))
	@set('event_times', start.format('HH:mm') + " - " + end.format('HH:mm'))

	next_events = []
	for next_event in rest
	start = moment(next_event.start.dateTime)
	start_date = start.format('ddd Do MMM')
	start_time = start.format('HH:mm')

	next_events.push { summary: next_event.summary, start_date: start_date, start_time: start_time }
	@set('next_events', next_events)
	<h1 class="subtitle" >Next event:</h1>
	<h3 class="times" data-bind="event_date"></h3>
	<h2 class="title" data-bind="event.summary"></h2>
	<h3 class="times" data-bind="event_times"></h3>
	<h4 data-bind="next_count"></h4>

	<table class="next">
	<tr data-foreach-e='next_events'>
	<td data-bind="e.start_date"></td>
	<td data-bind="e.start_time"></td>
	<td data-bind="e.summary"></td>
	</tr>
	</table>

	<div class="updated-at" data-bind="updatedAtMessage"></div>
	# encoding: UTF-8

	require 'google/api_client'
	require 'date'
	require 'time'
	require 'digest/md5'
	require 'active_support'
	require 'active_support/all'
	require 'json'

	# Update these to match your own apps credentials
	service_account_email = '...@developer.gserviceaccount.com' # Email of service account
	key_file = '/Path/to/keyfile.p12' # File containing your private key
	key_secret = 'notasecret' # Password to unlock private key
	calendarID = '...@group.calendar.google.com' # Calendar ID.

	# Get the Google API client
	client = Google::APIClient.new(:application_name => 'Dashing Calendar Widget',
	:application_version => '0.0.1')

	# Load your credentials for the service account
	if not key_file.nil? and File.exists? key_file
	key = Google::APIClient::KeyUtils.load_from_pkcs12(key_file, key_secret)
	else
	key = OpenSSL::PKey::RSA.new ENV['GOOGLE_SERVICE_PK'], key_secret
	end

	client.authorization = Signet::OAuth2::Client.new(
	:token_credential_uri => 'https://accounts.google.com/o/oauth2/token',
	:audience => 'https://accounts.google.com/o/oauth2/token',
	:scope => 'https://www.googleapis.com/auth/calendar.readonly',
	:issuer => service_account_email,
	:signing_key => key)

	# Start the scheduler
	SCHEDULER.every '15m', :first_in => 4 do \|job\|

	# Request a token for our service account
	client.authorization.fetch_access_token!

	# Get the calendar API
	service = client.discovered_api('calendar','v3')

	# Start and end dates
	now = DateTime.now

	result = client.execute(:api_method => service.events.list,
	:parameters => {'calendarId' => calendarID,
	'timeMin' => now.rfc3339,
	'orderBy' => 'startTime',
	'singleEvents' => 'true',
	'maxResults' => 6}) # How many calendar items to get

	send_event('google_calendar', { events: result.data })

	end
	// ----------------------------------------------------------------------------
	// Sass declarations
	// ----------------------------------------------------------------------------
	$background-color: #47bbb3; //#ec663c;

	$title-color: rgba(255, 255, 255, 1);
	$subtitle-color: rgba(255, 255, 255, 0.7);
	$moreinfo-color: rgba(255, 255, 255, 0.7);

	// ----------------------------------------------------------------------------
	// Widget-calendar styles
	// ----------------------------------------------------------------------------
	.widget-google-calendar {

	background-color: $background-color;
	.subtitle {
	color: $subtitle-color;
	font-size: 0.75em;
	margin: 15px 0;
	}
	.title {
	color: $title-color;
	font-size: 1.4em;
	}

	.times {
	font-size: 0.9em;
	}

	.next {
	font-size: 0.75em;
	margin-top: 30px;
	.tr {
	border-bottom: 1px solid $subtitle-color;
	.td {
	text-align: left;
	}
	}
	}
	.more-info {
	color: $moreinfo-color;
	}

	.updated-at {
	color: $subtitle-color;
	bottom: 5px;
	right: 5px;
	left: auto;
	font-size: 0.5em;
	}


	&.large h3 {
	font-size: 65px;
	}
	}