Tech Blog

Add Library Hours from LibCal to Primo Using JQuery

Introduction

At Piedmont Virginia Community College, students have a link directly to Primo through the college portal.  For this reason, I decided it would be helpful to put our library hours on Primo’s homepage. A programmer at our college had already written some JQuery code to pull our hours from LibCal and display them on our library’s homepage. So, rather than reinventing the wheel, I thought it would be easiest to reuse that code.

Not being a programmer myself, I ran into a problem that took awhile to solve. I knew Primo did not include the JQuery library out-of-the-box, and I needed to add it into the header using JavaScript. After that, I could run the library hours code. The problem I ran into was a matter of timing. There is one custom.js file where this code can be included. I put the script to add the JQuery library at the top, followed by the script for the library hours, but it never worked. I knew Primo wasn’t detecting the JQuery library in time when it tried to run the library hours script. And if the JQuery library isn’t there, then the script can’t run.

I tried various timeout solutions, but I still couldn’t get it to work. I posted to the Primo listserv, and Jim Robinson with the Tarrant County College District cracked it! He told me that I needed to store the library hours script externally, let the JQuery library load, and set a timeout on calling the script. What follows is the code I used.

See it in action here: https://vcc-piv-primo.hosted.exlibrisgroup.com/primo-explore/search?vid=PVCC&lang=en_US

Code for the custom.js file

var jq = document.createElement("script");
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(jq);
jq.onload = function() {
  $(document).ready( function() {
    setTimeout( function() {
      $.getScript("INSERT URL WHERE EXTERNAL SCRIPT IS STORED");
    },1000);
  });
};

Code for Primo HTML homepage

<div id="hours-results"></div>
<div class="arrows"><button alt="left arrow" aria-hidden="true" class="glyphicon glyphicon-arrow-left pull-left left-arrow" id="left_arrow" title="View Previous Week's Hours" type="button"><svg class="svg-inline--fa fa-arrow-circle-left fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="arrow-circle-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zm28.9-143.6L209.4 288H392c13.3 0 24-10.7 24-24v-16c0-13.3-10.7-24-24-24H209.4l75.5-72.4c9.7-9.3 9.9-24.8.4-34.3l-11-10.9c-9.4-9.4-24.6-9.4-33.9 0L107.7 239c-9.4 9.4-9.4 24.6 0 33.9l132.7 132.7c9.4 9.4 24.6 9.4 33.9 0l11-10.9c9.5-9.5 9.3-25-.4-34.3z"></path></svg>&nbsp; &nbsp; &nbsp;<button alt="right arrow" aria-hidden="true" class="glyphicon glyphicon-arrow-right pull-right right-arrow" id="right_arrow" title="View Next Week's Hours"><svg class="svg-inline--fa fa-arrow-circle-right fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="arrow-circle-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"></path></svg></button></div>

JQuery Code Stored Externally

Save this code snippet in separate .js file and store it externally – either in your own library website or LibGuides.  You must also generate the URL for the hours data from LibCal. In LibCal, go to the Hours section and click the Widgets tab. Select Weekly Data, and enter the number of weeks to show. The request format is JSON. Enter the URL in the $.getJSON spot below.  (Shoutout to John Baxton at Piedmont Virginia Community College for writing this!)

var output = '';
  var current_week = 0;
  jQuery( document ).ready(function($) {
   if(document.getElementById("hours-results")){
    text = $.getJSON("INSERT LIBCAL URL",
      function(data) {
        $.each(data.locations[0].weeks, function (week, days) {
          hidden = 'hidden';
          if(week == 0)
            hidden = '';
          output += "<div id='week_" + week + "' class = '" + hidden + "'>";
          output += "<ul class='weeks'>"
          $.each(days, function (day, obj) {
            date = new Date(obj.date);
            output += "<li class='day" + is_today(obj.date) +"'>";
            output += "<span class='day_name'>" + day_abbr(obj.date) + ", </span>";
            output += "<span class='hours_date'>" + format_date(obj.date) + "</span>";
            output += "<span class='hours_time'>" + obj.rendered + "</span>";
            output += "</li>";
          });
          output += "</ul></div>";
        });
        //output += "";
        $('#hours-results').html(output);
      });
   }

  function format_date(date)
  {
    date = date.replace(/-/gi, "/");
    date = new Date(date);
    arr = date.toUTCString().split(" ");
    return arr[2] + " " + arr[1];
  }
  function is_today(date)
  {
    date = date.replace(/-/gi, "/");
    if (new Date(date).toDateString() == new Date().toDateString())
      return " today";
    return "";
  }
function day_abbr(date)
  {
    arr = new Date(date).toUTCString().split(" ");
    return arr[0].replace(",","");
  }

  $('#left_arrow').click(function (e)
  {
    $('#week_' + current_week).addClass("hidden");
    if(current_week > 0){
      current_week = current_week - 1;

    }
    $('#week_' + current_week).removeClass("hidden");
  });
  $('#right_arrow').click(function (e)
  {
    $('#week_' + current_week).addClass("hidden");
    if(current_week < 3){
      current_week = current_week + 1;
    }
    $('#week_' + current_week).removeClass("hidden");
  });
});

Code for the custom1.css file

This is the CSS I used to style it, in case that’s helpful to others.

/*Modify the library hours section*/
.hidden {
    display: none;
}

ul.weeks {
  list-style-type:none;
  margin-top:0px;
  padding-left:0px;
}

.hours_time {
    float:right;
}

.today {
    color:#ae2954;
}

/*Modify the library hours buttons*/
.arrows button {
    cursor: pointer;
    -webkit-appearance:button;
    line-height:normal;
    font-size: 100%;
    margin:0;
    vertical-align:baseline;
    font-family:sans-serif;
}

button.pull-left {
    float:left;
}

button.pull-right {
    float:right;
}

.svg-inline--fa {
    display:inline-block;
    font-size:inherit;
    height:1em;
    vertical-align:-.125em;
}

.svg-inline--fa.fa-w-16 {
    width:1em;
}

svg:not(:root).svg-inline--fa {
    overflow:visible;
}

Leave a Reply