Pull events from the Action Network API and display them in a calendar with filters for date and location.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
action-network
public_html
README.md
screenshot-mobile.png
screenshot.png
update_events

README.md

Every Day of Action

This tool was built in collaboration with NoDAPL organizers as part of an effort to organize actions every day across the world. These events were submitted through Action Network, but it did not have a calendar view so this was meant to fill that gap. This pulls events from the Action Network API and allows you to filter by date and/or by state.

The website is no longer live but I've abstracted some of the code here so it can be used on other campaigns. Be warned that this was built quickly, over the span of a few weeknights, so it's fairly scrappy.

Here's a mashup of screenshots

mobile screenshot

Setting up the Calendar

Note: All fields that need replacing to customize the calendar to a different campaign have the word placeholder

You'll need the Action Network API key, saved to an environmental variable called ACTION_NETWORK_API_KEY, for the account that created the campaign.

Event Campaign URI

Once you have your API key, you'll need to figure out the campaign's URI by querying the API's event_campaign endpoint. Please forgive me for not building a way to programmatically look that up. More about how to do it here: https://actionnetwork.org/docs/v2/event_campaigns

The calendar needs a path that looks something like this: https://actionnetwork.org/api/v2/event_campaigns/d91b4b2e-ae0e-4cd3-9ed7-d0ec501b0bc3/events

Add this to the events.php file.

Getting data from the API

Next you'll need to use the events.php scrip to generate the json file of data. You can do this by running the events.php script from the command line to test it out.

To get the calendar to update itself automatically you'll need to set up a cron job. You can use the bash script update_events. You may need to modify this bash script to match your server/directory structure. Currently this script also backs up the JSON for up to 7 days. You'll need a cron job for this in order to stay under the API's rate-limits and reduce strain on the server.

Ultimately this JSON file needs to live in the same directory as the HTML page.

Viewing the calendar

Once the JSON file has all your data, ensure that it is in the same directory as index.html and open the html file in your browser. You'll need to customize the meta-data, title, description, and "add event" url. Search for the word placeholder to find all the places that need customizing.

About the files

/action-network/ - contains the scripts that fetch the data from the API

/public_html/ - the front-end

  • index.html - the webpage with the calendar
  • style.css - the CSS for the general index.html page
  • cal.css - the CSS for the calendar plugin
  • clndr.js - js plugin for the calendar
  • calendar2.js - where you read the data from events-all.json and initial the calendar
  • events-all.json - where all the event data lives (generated using /action-network/events.php)

update_events - the bash script for the cronjob