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>

那么选择一个月后如何激活当前月份？

我的问题是

它没有激活第一个月才能激活，必须单击它们将激活的任何月份
一次活跃然后又一个月活跃一次仍然保持激活

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>

全日历，当前有效月份

1 个答案: