# Calendar View

## Component #1

- Preview
- HTML

## Front events

- This week
- This month
- Next month

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 -->