Dashing widget to display a bunch of current and coming-up Google Calendar events.
The widget shows only one event and is based on the text-widget which is default in the Dashing installation. The time is displayed as human-readable time string with the help of MomentJS.
A Dashing job fetches the events of a given public or private calendar url, orders events to match starting time and sends the data to the dashboard. A certain event offset can be set for each calendar widget so that it will show the first (data-pre="0"
), the second (data-pre="1"
) or any other following event based on the offset. For each calendar you'll have to define a name which enables you to assign custom background colors for events of each calendar.
While the main job is called in larger intervals, there is a second job to be run every minute or so, which kicks out already finished events. In that way processing load on the client (dashboard) side is minimized as only little data is transfered.
##Usage
You'll need nokogiri
for processing XML so add gem 'nokogiri'
to your Gemfile
and run bundle install
from terminal.
Download MomentJS and put moment.min.js
in your /assets/javascripts
directory. It gets included automatically.
The files calendar.coffee
, calendar.html
and calendar.scss
go in the /widget/calendar
directory.
The calendar.rb
goes into the /jobs
directory.
Put the following in your dashingboard.erb file to make the current and following event show up in your dashboard:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="calendar_events" data-pre="0" data-view="Calendar"></div>
</li>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="calendar_events" data-pre="1" data-view="Calendar"></div>
</li>
##Settings (calendar.rb
)
Set your calendar urls in the calendars
variable and give each one an appropriate name. You can obtain your personal calendar urls from the settings page for a certain Google Calendar you have access to. You might also change how often both jobs are called to suit your needs. To change calendar colors simply add a class .calendar-name-YOURCALENDARNAME
with appropriate background-color
to calendar.scss
.