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

1. icalendar gem
2. 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

I get this error, repeating.
**** DEPRECATION WARNING ****
Icalendar.parse will be removed. Please switch to Icalendar::Calendar.parse.

@manifolded:
Just edit file google_calendar.rb and replace line (if you are using Icalendar version 2.0 and above):

calendars = Icalendar.parse(result)

WITH

calendars = Icalendar::Calendar.parse(result)

Hello there,
Is there a way to get the data of multiple icals?
I think this widget does it, but I could not get it to work with this one here.
Is anyone able to help me? :)

Hi There
Could somebody please help me with that? When I try to load this widget I get:
69970458660820 rufus-scheduler intercepted an error:
69970458660820 job:
69970458660820 Rufus::Scheduler::EveryJob "15s" {:first_in=>4}
69970458660820 error:
69970458660820 69970458660820
69970458660820 ArgumentError
69970458660820 comparison of Time with DateTime failed
69970458660820 /usr/lib/ruby/2.5.0/delegate.rb:83:in >' 69970458660820 /usr/lib/ruby/2.5.0/delegate.rb:83:in method_missing'
69970458660820 /root/sweet_dashboard_project/jobs/google_calendar.rb:17:in block (2 levels) in <top (required)>' 69970458660820 /root/sweet_dashboard_project/jobs/google_calendar.rb:17:in select'
69970458660820 /root/sweet_dashboard_project/jobs/google_calendar.rb:17:in `block in <top (required)>'
69970458660820 ...........

@Dr-Bone: Add

require 'date'

at top of the google_calendar.rb

I had the same issue. Managed to hack around it by casting the event date to a string, then converting to a DateTime. In google_calendar.rb:
replace
end.select { |event| event[:start] > DateTime.now }
with
end.select { |event| DateTime.parse(event[:start].to_s) > DateTime.now }