jsyeo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Description

This is a fork of jmb's awesome widget that grabs the events with a private address instead of going through the tiresome process of Google's OAuth authentication.
Dashing widget to display the next and some subsequent Google Calendar events using the Google Calendar's private urls.
See the screenshot below
Installation

dashing install 39d3fde3afbffdd31093

Set up

Grab the private address of your calendar by going to your calendar's settings and look for the ICal button.
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.
Install Dependencies


icalendar gem
Moment.js

Stick gem 'icalendar' into your Gemfile and run bundle install.
Download the Moment javascript library and add to your javascript assets. Then lastly, make sure you have this at the top of assets/javascripts/application.coffee.
#= require moment.js`

Credits

Thanks @jmb!

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

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

    getEvents data.events...

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

    @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)
      start_date = start.format('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
require 'icalendar'

ical_url = 'https://www.google.com/calendar/ical/xxxxxxxx%40group.calendar.google.com/private-xxxxx/basic.ics'
uri = URI ical_url

SCHEDULER.every '15s', :first_in => 4 do |job|
  result = Net::HTTP.get uri
  calendars = Icalendar.parse(result)
  calendar = calendars.first

  events = calendar.events.map do |event|
    {
      start: event.dtstart,
      end: event.dtend,
      summary: event.summary
    }
  end.select { |event| event[:start] > DateTime.now }

  events = events.sort { |a, b| a[:start] <=> b[:start] }

  events = events[0..5]

  send_event('google_calendar', { events: events })
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...

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

	@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)
	start_date = start.format('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>
	require 'icalendar'

	ical_url = 'https://www.google.com/calendar/ical/xxxxxxxx%40group.calendar.google.com/private-xxxxx/basic.ics'
	uri = URI ical_url

	SCHEDULER.every '15s', :first_in => 4 do \|job\|
	result = Net::HTTP.get uri
	calendars = Icalendar.parse(result)
	calendar = calendars.first

	events = calendar.events.map do \|event\|
	{
	start: event.dtstart,
	end: event.dtend,
	summary: event.summary
	}
	end.select { \|event\| event[:start] > DateTime.now }

	events = events.sort { \|a, b\| a[:start] <=> b[:start] }

	events = events[0..5]

	send_event('google_calendar', { events: events })
	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;
	}
	}