Patrons  Staff 

  • Search Catalog
BCCLS

77 Public Libraries in NJ's Bergen, Essex, Hudson, and Passaic Counties

 

Mouse over any of the options above to learn more.

Mouse over any of the options above to learn more.

Join the Conversation

Cobalt
News from the BCCLS office

BCCLS Adults
Everything relevant to adult services

BCCLS Events
Learn about events in BCCLS libraries

BCCLS Shelf
Discuss collection development

BCCLS Youth
Everything relevant to youth services

cHQ Chat
Discuss collectionHQ tips, tricks, etc.

Circ Desks
Everything relevant to circulation

Giveaways
Find a home for giveaway items.

Job Share
Job opportunities to share with the public.

Polaris Share
Discuss Polaris tips, tricks, etc.

Surveys
Share your questions with BCCLS

Technical Services
Discuss SkyRiver submissions, linking, processing, etc.

SignUp (Evanced/Demco Software) Calendar:
TinyCal Widget

You can include a small version of the Evanced calendar on your library's web site, as shown below:

To get started, click here to download the files you will need. This download includes an example HTML page (example.html) that shows the code for a functioning version of the TinyCal widget (this example does NOT highlight for a particular library).

To place a search form on your library's web site, you will need to include a link to JQuery in the <head> of your web page if you have not already done so (version 1.9.0 is recommended). If you are not currently linking to JQuery, include the following in the <head> of the web page that will include the search form:


<script type="text/javascript" src="http://www.bccls.org/js/jquery-1.9.0.min.js"></script>


Then, include the following script in the <head> of your web page (make sure that this script is included AFTER the link for JQuery):


<script type="text/javascript" src="http://www.bccls.org/js/jquery-ui-1.9.2.js"></script>


You will also need to link to the tinyCal.css stylesheet (this file is included in the download linked above) in the <head> of your web page. For example:


<link rel="stylesheet" type="text/css" href="TinyCalAssets/tinyCal.css" media="screen" />


Make sure that you place the TinyCalAssets folder (which includes the tinyCal.css stylesheet, as well as some javascript files needed to make the TinyCal widget function correctly) in your site's directory.

Please note that you can modify tinyCal.css so that the style of the TinyCal widget matches your library's branding.

Next, you will need to include the following code within the body of your web page:


<div id="divTinyCal"></div>


Next, include the following code between the </body> and </html> tags:


<script type="text/javascript">
var selDate = new Date();
selDate.setHours(0,0,0,0);
var endDate = new Date();
endDate.setMonth(endDate.getMonth() + 1);

var urlPrefix = 'http://bccls.evanced.info/signup/';

//Add URL Parameters to the end of the filename here!!
var fullUrl = urlPrefix + 'tinycal.aspx?ds=2014/03/01&de=2095/01/01&lib='

//check for IE
if (navigator.appVersion.indexOf("MSIE")!=-1) {
//Use Microsoft XDR
var xmlhttp = new XDomainRequest();

xmlhttp.onload = function() {
$('#divTinyCal').html(xmlhttp.responseText);
}

xmlhttp.open("GET", fullUrl, true);
xmlhttp.send();

} else {
$(document).ready(function () {
$('#divTinyCal').load(fullUrl);
});
}

</script>


If you would like the LibCal widget to only show your library's events, add your library's CTX # immediately after the lib= within this code. (Find your library's CTX #)

As an example, this final section of code for Allendale would look like this:


<script type="text/javascript">
var selDate = new Date();
selDate.setHours(0,0,0,0);
var endDate = new Date();
endDate.setMonth(endDate.getMonth() + 1);

var urlPrefix = 'http://bccls.evanced.info/signup/';

//Add URL Parameters to the end of the filename here!!
var fullUrl = urlPrefix + 'tinycal.aspx?ds=2014/03/01&de=2095/01/01&lib=5'

//check for IE
if (navigator.appVersion.indexOf("MSIE")!=-1) {
//Use Microsoft XDR
var xmlhttp = new XDomainRequest();

xmlhttp.onload = function() {
$('#divTinyCal').html(xmlhttp.responseText);
}

xmlhttp.open("GET", fullUrl, true);
xmlhttp.send();

} else {
$(document).ready(function () {
$('#divTinyCal').load(fullUrl);
});
}

</script>


If you wish, you can also add other parameters following the lib= to further limit the events displayed within the TinyCal widget. For example, you could limit the events listed in the calendar by age group, event type, etc. Click here for a full list of available parameters.

If you do choose to add additional parameters, they should be added in the format of:

&parameter=value

As an example, if Allendale chose to only show events with an Age Group of "Adults" and an Event Type of "Book Club", that final piece of code would look like this:


//Add URL Parameters to the end of the filename here!!
var fullUrl = urlPrefix + 'tinycal.aspx?ds=2014/03/01&de=2095/01/01&lib=5&ag=3&et=6'


If you have any questions about adding a TinyCal widget to your library's web site, please email Laurie for assistance.