How to set Open/Close Hours on the Koha OPAC

by Lucas Gass on Aug 23, 2019

Recently I have received a lot of questions asking about an open/close widget for Koha OPACs. I’ve seen some rather complex ways of doing this with JavaScript. I wanted to try and simplify the code and make it easy for librarians to edit their opening and closing times. First the code:

This will need to be added to the OPACUserJS:

/*HOURS javascript*/

$(document).ready(function () {

const schedule = {

sunday:[[8, 30], [17, 00], "12:00am - 5:00pm"],

monday:[[8, 30], [20, 00], "8:00am - 8:00pm"],

tuesday:[[8, 00], [20, 00], "8:00am - 8:00pm"],

wednesday:[[8, 00], [20, 00], "8:00am - 8:00pm"],

thursday:[[8, 00], [20, 00], "8:00am - 8:00pm"],

friday:[[11, 24], [17, 30], "11:24am - 5:00pm"],

saturday:[[8, 00], [17, 00], "8:00am - 5:00pm"],

};

let d = new Date();

let day = d.getDay();

let hour = d.getHours();

let minute = d.getMinutes();

let weekArr = Object.keys(schedule);

let thisDay = weekArr[day];

let openHour = schedule[thisDay][0][0];

let closeHour = schedule[thisDay][1][0];

let openMinute = schedule[thisDay][0][1];

let closeMinute = schedule[thisDay][1][1];

let message = schedule[thisDay][2];

if (hour >= openHour && hour <= closeHour) {

if ((hour == openHour && minute < openMinute) || (hour == closeHour && minute > closeMinute)) {

$('#hourMessage').text("Currently Closed");

$('#openClose').children().addClass('close');

} else {

$('#hourMessage').text("Currently Open: " + message);

$('#openClose').children().addClass('open');

}

} else {

$('#hourMessage').text("Currently Closed");

$('#openClose').children().addClass('close');

}

});

Most of this code can be ignored. To edit your open/close times you will want to focus on one part, the schedule object:

const schedule = {

sunday:[[8, 30], [17, 00], "12:00am - 5:00pm"],

monday:[[8, 30], [20, 00], "8:00am - 8:00pm"],

tuesday:[[8, 00], [20, 00], "8:00am - 8:00pm"],

wednesday:[[8, 00], [20, 00], "8:00am - 8:00pm"],

thursday:[[8, 00], [20, 00], "8:00am - 8:00pm"],

friday:[[11, 24], [17, 30], "11:24am - 5:00pm"],

saturday:[[8, 00], [17, 00], "8:00am - 5:00pm"],

};

Each line constitutes a day of the week. There are three parts to each day, let’s break them down:

sunday:[[openingHour, openingMinute], [closingHour, closingMinute], "A Message which displays if the library is open"],

Keep in mind that the openingHour and the closingHour must be calculated in military time. (5:00pm = 17).

Once you have added the JavaScript and updated your hours accordingly, you’ll have to add some HTML somewhere in the OPAC where you would like the hours to display. This can be any area that allows for HTML like OPACHeader or OPACMainUserBlock. OPACHeader has typically been the preferred area. Add the following:

<div id="hoursContainer">

<div id="openClose">

<i class="fa fa-clock-o"></i>

<span id="hourMessage"></span>

</div>

</div>

Now, if you refresh your OPAC the hours should appear. If everything is configured properly you should see either an open message, if the library is currently open, or a closed message.

Lastly, we can add some basic styling to the HTML. I like some green to indicate open and red to indicate closed. Add this to your OPACUserCSS:

.open {

color: #34763c;

}

.close {

color: #eb3223;

}

Enjoy your new dynamic hours widget!