Ready to Learn?Ex Libris products all provide open APIs

Tech Blog


Alma Hours API Widget

Mike Flakus on November 4th, 2015

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: