Include our sample stylesheet, in the <head>
of your page:
<link rel="stylesheet" href="//www.radiojar.com/wrappers/api-plugins/v1/css/schedule.css">
Or download it and tweak it to your liking.
Include the follwing code where you want to display your station's schedule (the script tag defines the template for the schedule items, i.e. the shows):
<div id="rj-schedule">
<div id="rj-tabs">
<ul class="rj-nav rj-nav-tabs" id="radio_schedule">
<li class="active"><a href="#monday" data-toggle="tab">Monday</a></li>
<li><a href="#tuesday" data-toggle="tab">Tuesday</a></li>
<li><a href="#wednesday" data-toggle="tab">Wednesday</a></li>
<li><a href="#thursday" data-toggle="tab">Thursday</a></li>
<li><a href="#friday" data-toggle="tab">Friday</a></li>
<li><a href="#saturday" data-toggle="tab">Saturday</a></li>
<li><a href="#sunday" data-toggle="tab">Sunday</a></li>
</ul>
<div class="rj-tab-content">
<div class="tab-pane active" id="monday">
<ul class="itemlist schedule"></ul>
</div>
<div class="tab-pane" id="tuesday">
<ul class="itemlist schedule"></ul>
</div>
<div class="tab-pane" id="wednesday">
<ul class="itemlist schedule"></ul>
</div>
<div class="tab-pane" id="thursday">
<ul class="itemlist schedule"></ul>
</div>
<div class="tab-pane" id="friday">
<ul class="itemlist schedule"></ul>
</div>
<div class="tab-pane" id="saturday">
<ul class="itemlist schedule"></ul>
</div>
<div class="tab-pane" id="sunday">
<ul class="itemlist schedule"></ul>
</div>
</div>
</div>
<script id="schedule_list_item" type="text/html">
<li class="item item-show item-small" data-id="<%= sch.utc_from %>" style="background-image: url(//www.radiojar.com<%= sch.show_photo %>?resize=cover_small)">
<div class="item-hostdjs">
<span></span>
<a href="<%= sch.dj_url %>" class="item-dj" title="<%= sch.dj_nickname %>">
<% if (sch.dj_photo.indexOf('image')!=-1) { %>
<div class="content">
<img class="item-thumb" src="<%= sch.dj_photo %>" />
</div>
<% } %>
</a>
</div>
<div class="overlay">
<div class="content">
<div class="item-showinfo">
<a href="<%= sch.show_url %>">
<h4 class="item-name"><%= sch.show_title %></h4>
<h5 class="item-tagline"><%= sch.show_tagline %></h5>
</a>
</div>
<div class="item-schedule">
<i class="icon-time"></i>
<span class="localize-time" data-date='<%= sch.utc_from %>'></span> - <span class='localize-time' data-date='<%= sch.utc_to %>'></span>
</div>
</div>
</li>
</script>
</div>
Include the following code just before the closing body tag. Instead of "u0510s7hb", use your station's stream name. You can find your station's stream name (streamName) in the management area of your station, select Tools and then Widgets (check out the screenshot to the right for the exact location).
<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
<script>
rjq('#rj-schedule').radiojar('schedule', {
streamName: "u0510s7hb"
});
</script>