Example events list which displays event time period. From bootstrap-calendar (tmpls): https://github.com/Serhioromano/bootstrap-calendar

events-list.html

<span class="hide" id="cal-slide-tick"></span>
<div id="cal-slide-content">
        <ul class="unstyled">
                <% _.each(events, function(event){ %>
                        <li>
                                <span class="pull-left event <%= $(event).data('event-class') %>"></span>&nbsp;
                                <a href="<%= $(event).attr('href') %>" target="_blank"
                                        data-event-id="<%= $(event).data('event-id') %>"
                                        data-event-class="<%= $(event).data('event-class') %>" 
                                        class="event-item">
                                        <%= $(event).data('event-start') %> ~ <%= $(event).data('event-end') %>
                                        |
                                        <%= $(event).data('original-title') %></a>
                        </li>
                <% }) %>
        </ul>
</div>

month-day.html

<div class="cal-month-day <%= cls %>">
        <span class="pull-right" data-cal-date="<%=  data_day %>"  data-cal-view="day" rel="tooltip" data-original-title="<%= tooltip %>"><%= day %></span>
        <% if (events.length > 0) {%>
                <div class="events-list">
                        <% _.each(events, function(event){ %>
                        <a href="<%= event.url %>" 
                        target="_blank"
                        data-event-id="<%= event.id %>" data-event-class="<%= event.class %>"
                                data-event-start="<%= new Date(event.start).toFormat('H:MI PP') %>" 
                                data-event-end="<%= new Date(event.end).toFormat('H:MI PP') %>"
                           class="pull-left event <%= event.class %> event<%= event.id %>" rel="tooltip"
                           data-original-title="<%= event.title %>"></a>
                        <% }); %>
                </div>
        <% } %>
</div>

week-days.html

<% _.each(events, function(event){ %>
<div class="cal-row-fluid">
        <div class="cal-tooltip cal-span<%= event.days%> cal-offset<%= event.start_day %> day-highlight dh-<%= event.class %>" data-event-class="<%= event.class %>"
        data-trigger="hover" 
        data-placement="top"
        data-toggle="tooltip"
        title="<%= new Date(event.start).toFormat('H:MI PP') %> ~ <%= new Date(event.end).toFormat('H:MI PP') %> | <%= event.title %>">
                <small><a target="_blank" 
                href="<%= event.url %>" 
                data-event-id="<%= event.id %>" 
                class="cal-event-week event<%= event.id %>">
                
                        <%= new Date(event.start).toFormat('H:MI PP') %>
                        ~
                        <%= new Date(event.end).toFormat('H:MI PP') %>
                        |
                        <%= event.title %>
                </a></small>
        </div>
</div>
<% }); %>

year-month.html

<span class="pull-right" data-cal-date="<%= data_day %>" data-cal-view="month"><%= month_name %></span>
<% if (events.length > 0) {%>
        <small class="cal-events-num badge badge-important pull-left"><%= events.length %></small>
        <div class="hide events-list">
                <% _.each(events, function(event){ %>
                        <a href="<%= event.url %>" data-event-id="<%= event.id %>" data-event-class="<%= event.class %>"
                           target="_blank" 
                           data-event-start="<%= new Date(event.start).toFormat('H:MI PP') %>" 
                                data-event-end="<%= new Date(event.end).toFormat('H:MI PP') %>"
                           class="pull-left event <%= event.class %> event<%= event.id %>" rel="tooltip"
                           data-original-title="<%= event.title %>"></a>
                <% }); %>
        </div>
<% } %>