Tech Blog

Alma Hours API Widget

The Portland State University Library has created an open source application that can be used to create a dynamic HTML widget of Library Hours to be displayed on your library’s website. The widget queries the Alma Hours API to get your library’s open/close hours, parses the API output and creates an upcoming Library Hours Widget that looks similar to the following:

To create an hours widget, you only have to add the JavaScript and CSS include files to your webpage and add a single line of HTML where you want the widget to be displayed:

<div class="alma_hours_widget" data-library="MILLAR" data-title="Library Hours"></div>

Full Usage Example

<!-- Alma Hours Widget CSS -->
<link rel="stylesheet" href="alma_hours_widget.css" />

<!-- jQuery Library -->
<script src="//"></script>

<!-- Alma Hours Widget JS -->
<script src="alma_hours_widget.js"></script>

<!-- Alma Hours Widget (next 7 days) -->
<div class="alma_hours_widget" data-library="MILLAR" data-title="Library Hours"></div>

Optional HTML5 Attributes

  • data-start-date – Used to set the start date for the widget
  • data-end-date – Used to set the end date for the widget
  • data-date-format – PHP standard date format options (e.g. “m/d/Y”, “m/d/y”, “m-d-y”, etc…)
  • data-time-format – PHP standard time format options (e.g. “g:ia”, “H:i:s”, etc…)

Custom Time/Date Formats:

<div class="alma_hours_widget" data-library="MILLAR" data-title="Custom Date/Time Format" data-date-format="m-d-y" data-time-format="H:i:s"></div>

Custom Date Range

<div class="alma_hours_widget" data-library="MILLAR" data-title="Custom Date Range" data-start-date="2015-11-24" data-end-date="2015-12-05"></div>

More Information

More details and complete source code and configuration instructions can be found on GitHub at:

Leave a Reply