Прокручиваемые даты и клик по дате показывают конкретный контент

Question

Я работаю над приложением расписания.Вот мой код.

Мой код

    $('.mytabs').scrollingTabs({
        enableSwiping: true,
        bootstrapVersion: 4,
        cssClassLeftArrow: 'fa fa-chevron-left',
        cssClassRightArrow: 'fa fa-chevron-right'
    });

Я хочу показать недельную дату в верхней части прокрутки.На конкретную дату нажмите, я хочу показать задачи на эту дату.Прямо сейчас я использую вкладки начальной загрузки и вкладки прокрутки.При загрузке страницы даты текущей недели будут отображаться при прокрутке на следующей неделе и наоборот.Что мне для этого сделать?

$('.mytabs').scrollingTabs({
  enableSwiping: true,
  bootstrapVersion: 4,
  cssClassLeftArrow: 'fa fa-chevron-left',
  cssClassRightArrow: 'fa fa-chevron-right'
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-bootstrap-scrolling-tabs@2.5.0/dist/jquery.scrolling-tabs.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-bootstrap-scrolling-tabs@2.5.0/dist/jquery.scrolling-tabs.js"></script>

<div class="col-12 border-bottom pb-3 pt-1">
  <ul class="nav nav-tabs mytabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" data-target="#dec1">
        <span>01 Dec</span>
        <span>2018</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec2">
        <span>02 Dec</span>
        <span>2018</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec3">
        <span>03 Dec</span>
        <span>2018</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec4">
        <span>04 </span>
        <span>Dec</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec5">
        <span>05 </span>
        <span>Dec</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec6">
        <span>06 </span>
        <span>Dec</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec7">
        <span>07 </span>
        <span>Dec</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec8">
        <span>08 </span>
        <span>Dec</span>
      </a>
    </li>
  </ul>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="dec1">
    <ul class="task-list">
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
    </ul>
  </div>
  <div class="tab-pane  fade" id="dec2">
    <ul class="task-list">
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec3">
    <ul class="task-list">
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
    </ul>
  </div>
  <div class="tab-pane fade" id="dec4">
    <ul class="task-list">
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec5">
    <ul class="task-list">
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec6">
    <ul class="task-list">
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec7">
    <ul class="task-list">
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec8">
    <ul class="task-list">
      <li>
        Task Name
      </li>
    </ul>
  </div>

</div>