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.
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
<div id="todays-hours"></div>
CSS
1
2
3
#todays-hours {background: blue;}
#todays-hours-text {background: yellow;}
#todays-hours-hours {background:orange;}
JavaScript/jQuery
Notes for implementation:
- Line 2: Your
iid=000will have a different number. - Line 2:
https://api3.libcal.com/api_hours_today.php?iid=000&lid=0&format=json&systemTime=0&callback=?is the link you’ll generate through your LibCal admin area. Note the added&callback=? - Line 3: This picks an ID from your html and appends things. Namely, some text you can change as you see fit and the day’s hours for location 0.
- If you have multiple library hours in LibCal you may need to have 1 or 2 or etc. instead of 0 in:
json.locations[0].rendered
The code itself:
1
2
3
4
5
var apis4librarians_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");
});
});}();