Displaying content in tabs on Onsen UI page - onsen-ui

Question

I am building a single page app on onsen UI with various pages defined. One of the pages shows schedule for a two day event and so it's only logical to have tabs with dates and respective daily content.
How would you do this in onsen ui considering all tutorials I've seen on tabs assume your main website navigation will use tabs which is not usually the case.
Here's code I'd been tinkering with
<ons-template id="schedule.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Schedule</div>
</ons-toolbar>
<div style="text-align: center">
<ons-tabbar position="top">
<ons-tab page="dayone.html">
<p>Day One</p>
</ons-tab>
<ons-tab page="daytwo.html">
<p>Day Two</p>
</ons-tab>
</ons-tabbar>
<ons-tab active="true" page="dayone.html">
<ul class="list">
<li class="list__item">Registration and viewing of exhibition stands</br>8.30 – 9.00AM</li>
<li class="list__item">Welcome and Introductions<br/>9.00 – 9.10AM</li>
</ul>
</ons-tab>
<ons-tab page="daytwo.html">
<ul class="list">
<li class="list__item">Registration and viewing of exhibition stands</br>9.30 – 9.00AM</li>
<li class="list__item">Welcome and Introductions<br/>9.00 – 9.10AM</li>
</ul>
</ons-tab>
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>

Answer 1

The usage of tabbar is explained here: http://onsen.io/reference/ons-tabbar.html#usage
Your pages "dayone.html" and "daytwo.html" should be templates or different pages. Something like this:
<ons-page>
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">Main page</div>
</ons-toolbar>
<ons-button onclick="myNavigator.pushPage('schedules.html');">Go to schedules</ons-button>
</ons-navigator>
</ons-page>
<ons-template id="schedules.html">
<ons-page>
<ons-tabbar>
<ons-tab page="day1.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Day 1</span>
</ons-tab>
<ons-tab page="day2.html">
<ons-icon icon="ion-star"></ons-icon>
<span style="font-size: 14px">Day 2</span>
</ons-tab>
</ons-tabbar>
</ons-page>
</ons-template>
<ons-template id="day1.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Day 1 schedule</div>
</ons-toolbar>
<p>Day 1 activities here...</p>
</ons-page>
</ons-template>
<ons-template id="day2.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Day 2 schedule</div>
</ons-toolbar>
<p>Day 2 activities here...</p>
</ons-page>
</ons-template>
Working example here: http://codepen.io/frankdiox/pen/bNZMPg
Hope it helps!