Website with calendar of events from a Google Spreadsheet
JavaScript CSS
Switch branches/tags
Nothing to show
Latest commit 954d4a8 Feb 13, 2015 @muan muan Sort dates before processing
Permalink
Failed to load latest commit information.
css Remove fixed width wow Jul 17, 2014
js Sort dates before processing Feb 13, 2015
.gitignore add gitignore for temp files May 11, 2014
.nojekyll is github trolling me? Mar 19, 2014
LICENSE Initial commit Mar 3, 2014
README.md fix broken link in README May 7, 2014
calendar-css.png edit readme Mar 20, 2014
data.json basics Mar 15, 2014
index.html dont know why Aug 3, 2014
map-doc.md update map docs Mar 23, 2014
publish.png fix imgs, edit txt Mar 17, 2014
ss-cal.png edit readme Mar 20, 2014
with-map.png add map doc Mar 21, 2014

README.md

Sheetsee Calendar

A fork-n-go Sheetsee.js calendar project! Made by me and @muan, we finally worked on something together! 🎉

ss-cal

Sheetsee.js Calendar

Sheetsee.js is a library that makes it easy to visualze data from a Google Spreadsheet. This repository expands on that by building a calendar based on events in a spreadsheet.

Fork-n-go

This repository contains webfiles on a branch named gh-pages, which means GitHub hosts them for free at: jlord.github.io/sheetsee-calendar. When you fork the project to your account, you too can have a hosted site -- easy peasy!

Set Up

Here's how to get going with your version:

1. Create spreadsheet

Create a new spreadsheet for your data on Google Docs. It should contain these headers (case and order of columns do not mattter, spelling does):

Start Date | End Date |  Name | Location | Tickets | Contact

Dates

Your dates should be in the mm/dd/yyyy format. If your day is multiple days, use both the Start and End Date columns, if it's just one day, leave End Date blank.

2. Publish spreadsheet

In order to fetch your spreadsheet's data you'll need to click File > Publish to the Web > Start Publishing. This just means when asked for the data in the spreadsheet, Google returns it.

publish

3. Fork this repository

From this page, click the "Fork" button at the top right. Bam!

4. Add your spreadsheet key

  • From your fork's page on GitHub, click to view the index.html file.
  • When it opens, click "Edit"

You'll see code near the bottom that looks like this:

document.addEventListener('DOMContentLoaded', function() {
  var URL = "0AuOjlXjUrSbAdE1XRFJkeEJZQ1NSelhILUR0NXdBWUE"
  Tabletop.init( { key: URL, callback: generateCalendar, simpleSheet: true } )
})

The variable URL is your spreadsheet's key, which is the long set of letters and numbers in the middle of your spreadsheet's url.

  • Copy and paste your spreadsheet's key in place of the existing one.
  • Click "Commit changes" at the bottom of the page.

Ta Da!

In a few minutes you'll be able to visit your site at: yourgithubname.github.io/sheetsee-calendar.

Pro-tip You can click "Settings" on your fork's page and rename it to a more appropriate-to-you name than sheetsee-calendar :)

Styling

Included in this repository is a stylesheet for the calendar. You can keep the style as is or make it your own! Classes are like so:

css

Map

Include a Map Map Documentation
map If you want to include a map, you can do so! There is a map version on the with-map branch. Read map-doc.md for instructions.

Use cases

  1. http://calendar.codebar.io/
  2. http://findyourfitwichita.com/bike