Полный календарь, активный текущий месяц

Question

Я пытаюсь создать календарь, который показывает все месяцы и имеет функцию выбора месяца и его отображения. Вот мой код для выбора месяца:

<ul id="months-tab">
    <li><a href="#" data-month="0">January </a></li>
    .
    <li><a href="#" data-month="11">December </a></li>
</ul>
<div id='calendar'></div>

А вот код для отображения месяца в соответствии с выбранным месяцем и текущим активным месяцем:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale/th.js"></script>

<script>
     $(document).ready(function() {
        $('#calendar').fullCalendar({
            defaultDate: '2018-03-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                title: 'All Day Event',
                start: '2018-03-01'
                }
            ]
        });

        $('#months-tab a').click(function() {
            var month = $(this).attr('data-month');
            var m = moment([moment().year(), month, 1]);

            $('#calendar').fullCalendar('gotoDate', m );
        });

        $("#months-tab li").click(function(){
            if($(this).attr('data-month') == $(this).attr('data-month')){
                $(this).addClass("active");
            }
        })
    });
</script>

Так как я могу активировать текущий месяц после того, как месяц был выбран?

Моя проблема

1. не активируется первый месяц, чтобы активным нужно было щелкнуть в любой месяц, когда он будет активен
2. однажды активная, затем активная еще один предыдущий месяц все еще остается активированной

Answer 1

Вот демонстрация того, что вам нужно, упрощая удаление тегов гиперссылок - они вам просто не нужны. Проще всего иметь все на <li>, чем иметь два тега. Насколько я вижу, гиперссылка не добавляет ничего полезного.

$(document).ready(function() {
  $('#calendar').fullCalendar({
    defaultDate: '2018-03-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: [{
      title: 'All Day Event',
      start: '2018-03-01'
    }]
  });

  //set current month's tab to active
  var month = $("#calendar").fullCalendar("getDate").month();
  $("#months-tab li[data-month='" + month + "']").addClass("active");

  $('#months-tab li').click(function() {
    var link = $(this);
    var month = link.attr('data-month');
    var m = moment([moment().year(), month, 1]);

    $('#calendar').fullCalendar('gotoDate', m);
    $("#months-tab li").removeClass("active");
    link.addClass("active");
  });


});

ul {
  list-style-type: none;
}

li {
  padding: 5px;
  cursor: pointer;
}

li.active {
  background-color: blue;
  color: white;
  border: solid 1px blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>


<ul id="months-tab">
  <li data-month="0">January</li>
  <li data-month="1">February</li>
  <li data-month="2">March</li>
  <li data-month="3">April</li>
  <li data-month="4">May</li>
  <li data-month="5">June</li>
  <li data-month="6">July</li>
  <li data-month="7">August</li>
  <li data-month="8">September</li>
  <li data-month="9">October</li>
  <li data-month="10">November</li>
  <li data-month="11">December</li>
</ul>
<div id='calendar'></div>