APIs for Librarians

Helping you to help yourself in helping your patrons. Or something.

Today's Hours


Description

This will pull your library’s hours for the day from your LibCal system and display them. Simple!

There’s a widget inside LibCal that will allow you to do the same thing. Why bother with this then? Because doing it this way will give you more control over styling and placement of the individual parts of the hours. Also, you’re not tied into the library name for the hours that will display with the widget. You can say whatever you want before or after the actual hours.

Screenshot

Note: this screenshot is garish in order to highlight the different regions you’ll now be able to style independently of each other.

Today's Hours screenshot

More details

The API call, which is written in jQuery, will send your institution ID to Springshare and they will return JSON data with the day’s open hours based on what you have setup inside LibCal.

Once that data is returned we pull out the actual hours and get them ready for display. You link up the jQuery and your actual HTML using a specific ID name in your HTML, assigned to a <div>. This code is setup such that when you are done you will have three ID’s in your HTML to let you have more specificty in styling. The entire area, the text, and the actual hours are all individually targetable. This means that you will have more control over styling than if you embedded the widget generated by Springshare.

A few things to know. First, you need to have your hours properly setup inside LibCal. If you need help with that Springshare support is awesome. Secondly, to get the JSON link (that you need for the code) you login to LibCal and go to Admin –> Hours –> Widgets tab. Then under “Today’s Hours” select the dropdown and choose JSON. Important: you have to add &callback=? to the end of the link they provide you.

The Code

HTML

1
2
<div id="todays-hours"></div>
<input type="button" id="btn" value="Click" />

CSS

1
2
3
#todays-hours {background: blue;}
#todays-hours-text {background: yellow;}
#todays-hours-hours {background:orange;}

JavaScript/jQuery

Notes for implementation:
The code itself:
1
2
3
4
5
varapis4librarians_todayshours = function(){$(document).ready(function () {
$.getJSON("https://api3.libcal.com/api_hours_today.php?iid=000&lid=0&format=json&systemTime=0&callback=?", function (json) {
$('#todays-hours').append("<span id='todays-hours-text'>Today's hours:</span> " + "<span id=todays-hours-hours>" + json.locations[0].rendered + "</span");
});
});}();