JQuery FullCalendar：动画视图更改/切换

Question

我在我的应用程序中使用FullCalendar。我删除了用于更改插件提供的视图的默认按钮，并将其放置在我自己的点击中，我正在使用changeView属性在agendaWeek和agendaDay视图之间切换。

但是这种变化是相当突然的。所以我想知道是否有任何可以帮助我使用JQuery来应用一些转换动画。

谢谢。

Answer 1

在你旁边，以前和现在的点击功能，你可以申请的jQuery的slideToggle动画压延：

 nextButtonClick: function() { 
      viewModel.animateCalendar(); 
      $('#calendar').fullCalendar('next'); 
     }, 
     previousButtonClick: function() { 
      viewModel.animateCalendar(); 
      $('#calendar').fullCalendar('prev');     
     }, 
     todayButtonClick: function() { 
      viewModel.animateCalendar(); 
      $('#calendar').fullCalendar('today');     
     }, 
     animateCalendar: function() { 
      // try and animate transition 
      $('#calendar').slideToggle(); 
      $('#calendar').slideToggle(); 
     }, 

默认情况下，这将向上滑动，然后再次回落，但你可以添加参数来改变方向，速度等http://api.jquery.com/slideToggle/

希望这会有所帮助。

Answer 2

您可以使用fadeOut和完整的功能再次显示日历，并更改视图。

代码：

$('#mycalendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title' 
    }, 
    editable: true, 
    events: [{ 
     title: 'event1', 
     start: '2014-05-02' 
    }, { 
     title: 'event2', 
     start: '2014-05-10' 
    }] 
}); 

$("#change").click(function() { 
    $('#mycalendar').fadeOut("slow", function() { 
     $('#mycalendar').show(); 
     $('#mycalendar').fullCalendar('changeView', 'basicWeek') 
    }); 
}); 

演示：http://jsfiddle.net/IrvinDominin/A7Vc6/