In This Article

Hours: Creating widgets

The Hours module provides you with different types of widgets, so you no longer have to manually update hours on multiple webpages ever again. Once you update the hours in LibCal, all of the widgets will update automatically. Available widgets include: Today's Hours, Daily Hours, Weekly Grid, Monthly Calendar, and Combined Weekly/Monthly

Outside of the pre-built widgets you can retrieve weekly hours data in JSON or XML format, and retrieve hours data suitable for JSON-LD.

As a reminder, your LibCal site has a public hours page--giving you an easy way to link to your library hours, whether it's in an email, on a handout, or in a LibGuide or website. To access the public page for your site, simply add /hours/ after your LibCal URL. For example: http://springylib.libcal.com/hours/.

Note: to conserve server resources, all widget requests are cached. As a result, you may not immediately see changes made to your hours until the cache has cleared, which occurs every 1 hour.

Getting there

To create hours widgets, go to Admin > Hours and click on the Widgets tab.

Navigating to the Hours Widgets page


Today's Hours

The Today's Hours widget allows you to display a simple table containing the current date's hours -- either for all locations, or just a single library and its departments.

Example of a Today's Hours widget

  1. Click on the Today's Hours tab.
  2. From the Library dropdown, choose whether to display hours for all locations or a single library.
  3. From the Request Format dropdown, choose the type of embed code you need.
    • HTML‚Äč: best for use in web scripts or iframes.
    • Javascript: best for embedding directly into a LibGuide or webpage.
    • JSON: best for processing via a script.
    • XML: best for processing via a script.
    • RSS: best for subscribing in an RSS feed reader. When using this format and displaying "All Locations", you can add &display=1 to the end of the feed's URL to exclude department hours from the feed.
  4. By default, the widget uses a short time format. To instead use the system time format from your System Settings, select the Use System Time Format checkbox.
  5. Click on the Generate Code/Preview button.
    1. The preview area will update to display a sample of your widget.
  6. Click on the Embed Code to highlight it and copy it by either:
    • Pressing CTRL + C on your keyboard
    • Right-clicking on it and selecting "Copy"

Example of creating a Today's Hours widget

Want to customize the appearance of these widgets?

You can include some CSS rules along with your embed code. Below are some examples -- just place them between <style></style> tags right after your widget's embed code.

/* Add padding to table cells */
.hours-today td { padding: 5px; }

/* Add space between each location and its hours */
.hours-col-loc { padding-right: 20px; }

/* Display a gray border under each row */
.hours-row { border-bottom: 1px solid #ccc; }

/* Display library names in bold */
.hours-library .hours-col-loc { font-weight: bold; }

/* Indent departments under each library */
.hours-depart .hours-col-loc { padding-left: 20px; }

[Return to top]


Daily Hours

Unlike the Today's Hours widget, which provides the current day's hours in multiple formats, the Daily Hours widget allows you to create a formatted view of a single day's hours. Users can scroll to future dates, as well, allowing them to see your upcoming hours.

Example of a Daily Hours widget

  1. Click on the Daily Hours tab.
  2. From the Library dropdown, choose whether to display hours for all locations or a single library.
  3. If (and only if) you will be embedding this widget in a page that does not already include jQuery, enable the Include jQuery Library checkbox.
    DO NOT include jQuery if you will be embedding this inside of LibGuides or any other Springy product. jQuery is already loaded in all of our apps, so including it a second time will cause jQuery-powered elements (such as page menus) to stop working.
  4. Click the Generate/Update Code button.
    1. A working preview widget will appear -- feel free to give it a try! (Note: the preview will not allow you to browse weeks.)
  5. Click on the Embed Code to highlight it and copy it by either:
    • Pressing CTRL + C on your keyboard
    • Right-clicking on it and selecting "Copy"

The embed code includes customizable styles -- just look for the CSS rules between the <style></style> tags. 

Creating a Daily Hours widget

[Return to top]


Weekly Grid View

The Weekly Grid View widget allows you to display hours week-by-week for all locations, or just a single library and its departments.

Example of a Weekly Grid View widget

  1. Click on the Weekly Grid View tab.
  2. From the Library dropdown, choose whether to display hours for all locations or a single library.
  3. If (and only if) you will be embedding this widget in a page that does not already include jQuery, enable the Include jQuery Library checkbox.
DO NOT include jQuery if you will be embedding this inside of LibGuides or any other Springy product. jQuery is already loaded in all of our apps, so including it a second time will cause jQuery-powered elements (such as page menus) to stop working.
  1. If you would prefer to display hours using the system time format (rather than the short time format), select the Use System Time Format checkbox. These can be customized in your system's Date & Time settings.
  2. Click the Generate/Update Code button.
    1. A working preview widget will appear -- feel free to give it a try! (Note: the preview will not allow you to browse weeks.)
  3. Click on the Embed Code to highlight it and copy it by either:
    • Pressing CTRL + C on your keyboard
    • Right-clicking on it and selecting "Copy"

The embed code includes customizable styles -- just look for the CSS rules between the <style></style> tags. 

Example of creating a Weekly Grid View widget

[Return to top]


Monthly Calendar View

The Monthly Calendar View widget allows you to display hours in a traditional monthly calendar for all locations, or just a single library and its departments.

Example of a Monthly Calendar View widget

  1. Click on the Monthly Calendar View tab.
  2. From the Library dropdown, choose whether to display hours for all locations or a single library.
  3. In the # Months to Show field, enter how many months users will be able to browse. You can enter any value between 1 and 12.
  4. If (and only if) you will be embedding this widget in a page that does not already include jQuery, enable the Include jQuery Library checkbox.
    DO NOT include jQuery if you will be embedding this inside of LibGuides or any other Springy product. jQuery is already loaded in all of our apps, so including it a second time will cause jQuery-powered elements (such as page menus) to stop working.
  5. Click the Generate/Update Code button.
    1. A working preview widget will appear -- feel free to give it a try! (Note: the preview will not allow you to browse months.)
  6. Click on the Embed Code to highlight it and copy it by either:
    • Pressing CTRL + C on your keyboard
    • Right-clicking on it and selecting "Copy"

The embed code includes customizable styles -- just look for the CSS rules between the <style></style> tags. 

Example of creating a monthly calendar widget

Want to display past hours?

To show your past hours, add the show_past: 1 property to your widget's code. In the sample below, scroll to the right to see an example highlighted in yellow:

<script src="//api3.libcal.com/js/hours_month.js?002"></script> 
<div id="s-lc-mhw2"></div> 
<script>
$(function(){ 
var slcmhw2 = new $.LibCalHoursCal( $("#s-lc-mhw2"), { iid: 2, lid: 0, months: 3, show_past: 1 }); 
});
</script> 

[Return to top]


Combined Weekly/Monthly View

Torn between the Weekly Grid View and Monthly Calendar View? Why not use both! The Combined Weekly/Monthly View widget allows users to toggle between weekly or monthly hours for all of your libraries. As an added bonus, this widget includes a tab that allows users to view the location and directions for your libraries, as well.

Example of a Combination Weekly/Monthly View widget

  1. Click on the Combined Weekly/Monthly View tab.
  2. In the # Months to Show field, enter how many months users will be able to browse. You can enter any value between 1 and 12.
  3. If (and only if) you will be embedding this widget in a page that does not already include jQuery, enable the Include jQuery & jQuery UI Libraries checkbox.
    DO NOT include jQuery if you will be embedding this inside of LibGuides or any other Springy product. jQuery is already loaded in all of our apps, so including it a second time will cause jQuery-powered elements (such as page menus) to stop working.
  4. If you will be embedding this widget in a page that does not already include Bootstrap 3, enable the Include Bootstrap Library checkbox. Leave this unchecked if you plan on embedding this widget in a Springy tool, such as LibGuides or LibAnswers.
  5. Click the Generate/Update Code button.
    1. A working preview widget will appear -- feel free to give it a try! (Note: the preview will not allow you to browse months.)
  6. Click on the Embed Code to highlight it and copy it by either:
    • Pressing CTRL + C on your keyboard
    • Right-clicking on it and selecting "Copy"

The embed code includes customizable styles -- just look for the CSS rules between the <style></style> tags. 

Example of creating a combined weekly/monthly widget

Want to customize the tabs?

To rename the tab labels, add the tabHours and tabInfo properties to your widget's code. In the sample below, see an example highlighted in yellow. The text in quotation marks is the customized label for each tab.

<script src="//api3.libcal.com/js/hours_month.js?002"></script> 
<div id="s-lc-mhw2"></div> 
<script>
$(function(){ 
var slcmhw2 = new $.LibCalHoursCal( $("#s-lc-mhw2"), 
{ iid: 2, months: 3, tabHours: "Library Hours", tabInfo: "Directions" }); 
});
</script> 

To hide the "Location & Direction Info..." tab altogether, use the tabShowInfo: false property. In the sample below, see an example highlighted in yellow:

<script src="//api3.libcal.com/js/hours_month.js?002"></script> 
<div id="s-lc-mhw2"></div> 
<script>
$(function(){ 
var slcmhw2 = new $.LibCalHoursCal( $("#s-lc-mhw2"), { iid: 2, months: 3, tabShowInfo: false }); 
});
</script> 

[Return to top]

Related Articles