全日历，当前有效月份

Question

I am trying to create a calendar which shows all months and has a functionality to select a month and display it. Here is my code for the month selection:

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

And here is the code for showing a month according to the selected month and the currently active month:

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

So how can I activate the current month after a month has been selected?

My issue is

1. it doesn't activate first month to active have to click any month they it will active
2. once active then active another one previous month still remain activate

Answer 1

Here's a demo of what you need, making it simpler by removing the hyperlink tags - you simply don't need them. It's easier just to have everything on the <li> rather than having two tags. The hyperlink doesn't really add anything useful as far as I can see.

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