How to add the BLUF calendar to your own web page
This is our first attempt at creating a simple widget that you can add to your web page or blog, to include a BLUF calendar, like the examples on this page. The standard calendar is set to show just BLUF events, but it can also be configured to show only title contests, events in a specific city or country, or all events. Details of the options are further down the page. You can see what the calendar looks like in action on someone's site at the excellent Ruffs Stuff blog - it's in the right hand panel.
Quick installation
The quickest way to add the calendar to your web page is to simply copy and paste the next few lines into the code. You should, really, put the first three lines before the </head> tag in your page, and the <div> line elsewhere, whereever on the page you want the calendar to appear. You may be able to simply put all four lines in the same place on the page, where you want the calendar to appear.
<link href="https://bluf.com/api/BLUFcal.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://bluf.com/api/BLUFcal.js"></script> <div id="BLUFcal"></div>
And that's it! Your page should now show a series of events from the BLUF calendar, changing every three seconds. Clicking on a poster will show you all the details on the BLUF website. If you want the calendar to be at the right hand side of the page, as it is here, you could change the DIV line so that it says
<div id="BLUFcal" style="float:right"></div>
That code will load all the files for the BLUF calendar from our server and the jQuery server. See below if you want to install the files on your site (which will ensure, for example, that there aren't any delays loading your web page if, for some reason, the BLUF server is not available). Also, miss out the line mentioning jQuery if your page already has a similar one.
Using WordPress?
It's very easy to add the calendar to your site if you're using WordPress. We've not done extensive testing but we do know that it will work if you use the HTML Javascript Adder plug-in. Here's how:
First, add the plug-in to your WordPress installation; this can usually be done via the control panel, select Plug-Ins, Add new, and type in the name. Activate the plug-in when it's installed, and then go to the Appearance section, and click Widgets. You'll see HTML Javascript Adder listed amongst the widgets, and you can drag it to one of the positions on your page, just like any other widget. Click the arrow to expand, and type in a title, like 'BLUF calendar', then copy and paste the following lines into the content box, to add a calendar of posters for BLUF events:
<link href="https://bluf.com/api/BLUFcal.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://bluf.com/api/BLUFcal.js"></script>
<div id="BLUFcal"></div>
That will load the script from the BLUF server each time, and our settings just show BLUF events by default. If you want a different display, see 'Customising the calendar' below. You can also select one of the other formats mentioned below, by changing the id of the DIV to one of the other options, instead of "BLUFcal".
Using Blogger/Blogspot?
On the control panel for your blog, click Add a Gadget on the Layout tab; find the HTML/JavaScript gadget, and then paste in the same four lines as in the WordPress example above. Note that we've not tested this ourselves, but it should work fine.
Other formats
The script allows three different formats of calendar to be included on your page; you can use them all together, or just choose one. The type of display you get will depend on the id of the DIV you add to your web page. For the posters, use a DIV with the id BLUFcal, as in the example above. For a text-only display, use BLUFcalText, and for a smaller display with just text, use a DIV with the id BLUFcalSmall.
BLUFcalText:
This version of the calendar shows the text of the event listings, up to the first 300 characters; clicking on the event link at the bottom, or the event title, will open the BLUF calendar.
BLUFcalSmall
This version shows the 'sharetext' which is an abbreviated note about the event, used on BLUF's automated twitter feed, for example. Events where this text has not been added will be missed out. Clicking anywhere on the text will open the full calendar.
Customising the calendar
As of 1st December 2013, the script as been changed so that you don't need to edit it, and can simply select which events you want by adding options to the DIV element of your page. If you do not add any options, then the default action will be to display BLUF events only. There are two parameters you can add:
data-cal-action says what calendar action should be taken; the available options are getall, getclass, getcountry, getcity
data-cal-option says what option you want, and is needed if you specify anything except getall. For getclass, it can be bluf, contest, or cultural and will fetch only events with that classification. For getcity, it should be a city name, like chicago (capital letters don't matter). For getcountry it should be either the country name (again, capitals don't matter), or the two letter country code. For example united kingdom, or pl for Poland. Note that you cannot have calendars with different options on the same page. The same options will be applied to all calendars on any one page.
data-cal-delay By default, each event is displayed for three seconds. Use this option to specify the number of seconds before changing to the next event. If omitted, the default value of 3 will be used. If you have downloaded the script to your own server prior to 28th Feb 2015, you will need to fetch a new copy to use this option. If you have just copied and pasted a link to the code on the BLUF site, you will automatically have this option available to you.
Here are some examples for you:
All items in the calendar, with posters
<div id="BLUFcal" data-cal-action="getall"></div>
All items in the calendar, with posters, display for ten seconds each
<div id="BLUFcal" data-cal-action="getall" data-cal-delay="10"></div>
All contests in the calendar, with posters
<div id="BLUFcal" data-cal-action="getclass" data-cal-option="contest"></div>
All events in Germany, small text version
<div id="BLUFcalSmall" data-cal-action="getcountry" data-cal-option="de"></div>
All events in Chicago, text version
<div id="BLUFcalText" data-cal-action="getcity" data-cal-option="chicago"></div>
Installing the files on your own server
You will need the BLUFcal.css and BLUFcal.js files from this page, plus the background image BLUFcalendarBGW.png; we recommend that you download them from the links (right click and choose 'Save' if you have problems), and add them to your server in the same folder as your web page. You will also need jQuery, if don't already have it on your web page.
This Zip file contains the three BLUF files; you can download it and copy the contents into the folder with your web page, rather than downloading the parts individually.
At the top of your page, you need to add the following lines of code before where it says </head>; this will add jQuery to your page. If there's already a line mentioning jQuery, omit the one here!
<link href="BLUFcal.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="BLUFcal.js"></script>
And at the point where you want the calendar to appear on the page, you need to add this code:
<div id="BLUFcal"></div>
NB. If your site uses jQuery already, you may need to just copy the marked part of the BLUFcal.js script into an existing script on the site. You can also try simply copying and pasting the code in the WordPress example below into your page, to load the script from the BLUF server. Feel free to tweak the files to get the effect you want, but please credit BLUF as the source of the calendar information.
For more information about the BLUF calendar service, click here.