如何禁用日期控制按钮的 FullCalendar onClick 功能？

Posted 2023-02-25

【中文标题】如何禁用日期控制按钮的 FullCalendar onClick 功能？

【英文标题】：How to disable FullCalendar onClick function for date control buttons?

【发布时间】：2014-01-27 18:23:16

【问题描述】：

我希望有人对此有想法。我正在使用 FullCalendar (http://arshaw.com/fullcalendar/) 插件。我为“上一个”和“下一个”按钮添加了附加功能，以触发其他日历上的事件。用户单击按钮转到上一个或下一个日期后，我希望该按钮禁用 1-2 秒。这是我尝试过的。

“上一个”和“下一个”按钮的源代码如下所示：

<td class="fc-header-left">
<span class="fc-button fc-button-next fc-state-default fc-corner-right" unselectable="on"> 
  <span class="fc-text-arrow">›</span>
</span>
<span class="fc-button fc-button-prev fc-state-default fc-corner-left" unselectable="on">       
  <span class="fc-text-arrow">‹</span>
</span>
</td>

我的代码：

$('.fc-button-prev span').click(function()
    var spinner = createSpinner();
    $('.fc-button-prev').addClass('fc-state-disabled');
    $('.fc-button-next').addClass('fc-state-disabled');
    $('.fc-button-prev span').onclick = null;
    $('.fc-button-next span').onclick = null;
    setTimeout(function() 
      <% @doctors.each do |doctor| %>
          $('#calendar_<%= doctor.id %>').fullCalendar('prev');
      <% end %>
      $('.fc-button-prev').removeClass('fc-state-disabled');
      $('.fc-button-next').removeClass('fc-state-disabled');

      spinner.stop();
    , 2000);

);

这不起作用，每次用户单击按钮时都会出现新的微调器。如果用户在一秒钟内单击按钮 3 次，则会出现三个微调器。另外，超时后，日历会前后跳三天。

感谢您的帮助。

【参考方案1】：

我使用以下代码将其禁用了 2 秒：

 $(function () 
            $('.fc-button-prev').click(disableNextPrev);
            $('.fc-button-next').click(disableNextPrev);
        );

        function disableNextPrev()
        
            $('.fc-button-prev').addClass('fc-state-disabled');
            $('.fc-button-next').addClass('fc-state-disabled');
            myVar = setTimeout(function () 
                // your custom code goes here
                //.... 

                 $('.fc-button-prev').removeClass('fc-state-disabled');
                 $('.fc-button-next').removeClass('fc-state-disabled');
                 clearTimeout(myVar);

             , 2000);