Accessible Event Calendar

Accessible Event Calendar

This standalone event calendar can be used to display events that do not reside on the main NYC.gov events calendar. It is simple to update and is accessible for screen readers and keyboard users. The events are entered and stored in a simple comma-separated values (CSV) file that can be edited in a spreadsheet or text editor application. This calendar was created by Tim Keane and was modified to be used on Nyc.gov agency websites.

Features

• Accessible date picker.
• Search for events by name.
• Three different viewing options:
  • Month view
  • Week view
  • Day view
• Allow visitors to add event to their own calendar.
• Provide directions to event location by utilizing Google maps.

Calendar Setup

Only one calendar can reside on the page. To add the calendar to a page, include the style sheet to the page meta data. The javascript library files can be added to the page meta data or in the page text Data Content Records (DCR).

<link href="/assets/home/css/pages/agencies/CsvEventCalendar.css" rel="stylesheet" type="text/css">

    <script src="/assets/home/js/libs/papaparse.min.js"></script>
    <script src="/assets/home/js/libs/jquery-3.4.1.min.js"></script>
    <script src="/assets/home/js/pages/agencies/CsvEventCalendar.js"></script>

Add the following into the page text Data Content Records (DCR):

      <script>
      $(document).ready(function () {
		      var calendar1 = new CsvEventCalendar({
		      target: $('#calendar'),
		      url: '/assets/process/data/calendar.csv',
 	     });
     	 window.calendar1=calendar1;

      });

  </script>
<div id="calendar"></div>  
    
    

The target variable attribute needs to reference the HTML element ID that the calendar will render. It is recommended to contain the calendar in a <div> with the target ID. The url variable is where the calendar csv file will reside.

CSV Format Requirements

• Event date
  • Recommended column name date
  • Required format: mm-dd-yyyy
• Event name
  • Recommended column name name
• Event start time
  • Recommended column name start
  • 12 hr format
• Event end time
  • Recommended column name end
  • 12 hr format

File may contain optional column names for the following event properties:

• Event location
  • Recommended column name location
• Event description
  • Recommended column name about

Example CSV

Download a sample CSV for the above calendar