日历视图
Component #1
Front events
| Calendar | Mon | Tue | Wed | Thr | Fri | Sat | Sun |
|---|---|---|---|---|---|---|---|
| 12PM | How great leaders inspire action July 9, 2019 | The power of introverts July 18 - 19, 2019 | The happy secret to better work July 23, 2019 | ||||
| 01PM | UI/UX July 31 - August 1, 2019 | Front best of breed August 8, 2019 | |||||
| 04PM | Why Front? October 20 - 24, 2019 | Dubai Front Meetup October 28 - 31, 2019 | |||||
| 06PM | Box world tour Tokyo November 3 - 7, 2019 | Front in '19 November 12 - 14, 2019 |
| Calendar | Mon | Tue | Wed | Thr | Fri | Sat | Sun |
|---|---|---|---|---|---|---|---|
| 12PM | How great leaders inspire action July 9, 2019 | The power of introverts July 18 - 19, 2019 | The happy secret to better work July 23, 2019 | ||||
| 01PM | UI/UX July 31 - August 1, 2019 | Front best of breed August 8, 2019 | |||||
| 04PM | Why Front? October 20 - 24, 2019 | Dubai Front Meetup October 28 - 31, 2019 | |||||
| 06PM | Box world tour Tokyo November 3 - 7, 2019 | Front in '19 November 12 - 14, 2019 |
| Calendar | Sep 6th | Sep 13th | Sep 19th | Sep 21th | Sep 25th | Sep 29th | Sep 30th |
|---|---|---|---|---|---|---|---|
| 12PM | How great leaders inspire action July 9, 2019 | The power of introverts July 18 - 19, 2019 | The happy secret to better work July 23, 2019 | ||||
| 01PM | UI/UX July 31 - August 1, 2019 | Front best of breed August 8, 2019 | |||||
| 04PM | Why Front? October 20 - 24, 2019 | Dubai Front Meetup October 28 - 31, 2019 | |||||
| 06PM | Box world tour Tokyo November 3 - 7, 2019 | Front in '19 November 12 - 14, 2019 |
<!-- Events -->
<div id="eventsSection" class="bg-light">
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-lg-75 text-center text-white mx-auto mb-5 mb-sm-7">
<h2 class="h1">Front events</h2>
</div>
<!-- End Heading -->
<div class="text-center mb-7">
<!-- Nav -->
<ul class="nav nav-segment nav-pills" id="eventCalendarTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" href="#eventCalendarOne" id="eventCalendarOne-tab" data-bs-toggle="tab" data-bs-target="#eventCalendarOne" role="tab" aria-controls="eventCalendarOne" aria-selected="true">This week</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#eventCalendarTwo" id="eventCalendarTwo-tab" data-bs-toggle="tab" data-bs-target="#eventCalendarTwo" role="tab" aria-controls="eventCalendarTwo" aria-selected="false">This month</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#eventCalendarThree" id="eventCalendarThree-tab" data-bs-toggle="tab" data-bs-target="#eventCalendarThree" role="tab" aria-controls="eventCalendarThree" aria-selected="false">Next month</a>
</li>
</ul>
<!-- End Nav -->
</div>
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="eventCalendarOne" role="tabpanel" aria-labelledby="eventCalendarOne-tab">
<!-- Card -->
<div class="card">
<!-- Table -->
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Calendar</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Thr</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
<th scope="col">Sun</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">12PM</th>
<td>
<span class="d-block fw-semi-bold">How great leaders inspire action</span>
<span class="d-block">July 9, 2019</span>
</td>
<td></td>
<td>
<span class="d-block fw-semi-bold">The power of introverts</span>
<span class="d-block">July 18 - 19, 2019</span>
</td>
<td></td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">The happy secret to better work</span>
<span class="d-block">July 23, 2019</span>
</td>
</tr>
<tr>
<th scope="row">01PM</th>
<td></td>
<td>
<span class="d-block fw-semi-bold">UI/UX</span>
<span class="d-block">July 31 - August 1, 2019</span>
</td>
<td></td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Front best of breed</span>
<span class="d-block">August 8, 2019</span>
</td>
<td></td>
</tr>
<tr>
<th scope="row">04PM</th>
<td></td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Why Front?</span>
<span class="d-block">October 20 - 24, 2019</span>
</td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Dubai Front Meetup</span>
<span class="d-block">October 28 - 31, 2019</span>
</td>
<td></td>
</tr>
<tr>
<th scope="row">06PM</th>
<td></td>
<td>
<span class="d-block fw-semi-bold">Box world tour Tokyo</span>
<span class="d-block">November 3 - 7, 2019</span>
</td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Front in '19</span>
<span class="d-block">November 12 - 14, 2019</span>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
</div>
<div class="tab-pane fade" id="eventCalendarTwo" role="tabpanel" aria-labelledby="eventCalendarTwo-tab">
<!-- Card -->
<div class="card">
<!-- Table -->
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Calendar</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Thr</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
<th scope="col">Sun</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">12PM</th>
<td>
<span class="d-block fw-semi-bold">How great leaders inspire action</span>
<span class="d-block">July 9, 2019</span>
</td>
<td></td>
<td>
<span class="d-block fw-semi-bold">The power of introverts</span>
<span class="d-block">July 18 - 19, 2019</span>
</td>
<td></td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">The happy secret to better work</span>
<span class="d-block">July 23, 2019</span>
</td>
</tr>
<tr>
<th scope="row">01PM</th>
<td></td>
<td>
<span class="d-block fw-semi-bold">UI/UX</span>
<span class="d-block">July 31 - August 1, 2019</span>
</td>
<td></td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Front best of breed</span>
<span class="d-block">August 8, 2019</span>
</td>
<td></td>
</tr>
<tr>
<th scope="row">04PM</th>
<td></td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Why Front?</span>
<span class="d-block">October 20 - 24, 2019</span>
</td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Dubai Front Meetup</span>
<span class="d-block">October 28 - 31, 2019</span>
</td>
<td></td>
</tr>
<tr>
<th scope="row">06PM</th>
<td></td>
<td>
<span class="d-block fw-semi-bold">Box world tour Tokyo</span>
<span class="d-block">November 3 - 7, 2019</span>
</td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Front in '19</span>
<span class="d-block">November 12 - 14, 2019</span>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
</div>
<div class="tab-pane fade" id="eventCalendarThree" role="tabpanel" aria-labelledby="eventCalendarThree-tab">
<!-- Card -->
<div class="card">
<!-- Table -->
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Calendar</th>
<th scope="col">Sep 6th</th>
<th scope="col">Sep 13th</th>
<th scope="col">Sep 19th</th>
<th scope="col">Sep 21th</th>
<th scope="col">Sep 25th</th>
<th scope="col">Sep 29th</th>
<th scope="col">Sep 30th</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">12PM</th>
<td>
<span class="d-block fw-semi-bold">How great leaders inspire action</span>
<span class="d-block">July 9, 2019</span>
</td>
<td></td>
<td>
<span class="d-block fw-semi-bold">The power of introverts</span>
<span class="d-block">July 18 - 19, 2019</span>
</td>
<td></td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">The happy secret to better work</span>
<span class="d-block">July 23, 2019</span>
</td>
</tr>
<tr>
<th scope="row">01PM</th>
<td></td>
<td>
<span class="d-block fw-semi-bold">UI/UX</span>
<span class="d-block">July 31 - August 1, 2019</span>
</td>
<td></td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Front best of breed</span>
<span class="d-block">August 8, 2019</span>
</td>
<td></td>
</tr>
<tr>
<th scope="row">04PM</th>
<td></td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Why Front?</span>
<span class="d-block">October 20 - 24, 2019</span>
</td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Dubai Front Meetup</span>
<span class="d-block">October 28 - 31, 2019</span>
</td>
<td></td>
</tr>
<tr>
<th scope="row">06PM</th>
<td></td>
<td>
<span class="d-block fw-semi-bold">Box world tour Tokyo</span>
<span class="d-block">November 3 - 7, 2019</span>
</td>
<td></td>
<td></td>
<td>
<span class="d-block fw-semi-bold">Front in '19</span>
<span class="d-block">November 12 - 14, 2019</span>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
</div>
</div>
<!-- End Tab Content -->
</div>
</div>
<!-- End Events -->