2016-05-06 70 views
0

我正在使用fullcalendar,並且試圖隱藏在我的開始日期之前發生的幾周。 它完美的工作,但我不能再拖動我的事件的問題。 我沒有找到另一種方式來做到這一點,我的代碼中有什麼問題。 這是我嘗試如果我隱藏某些日期,則無法在FullCalendar中拖動事件

$(window).load(function() { 
 
    
 
\t \t var startDate = $('#start_date').val(); 
 

 
\t \t //hide all dates before starting date 
 
\t \t $('#save').click(function(){ 
 
      
 
\t \t \t $(".fc-day").each(function() { \t 
 
\t \t \t \t var startTraining = $('#start_date').val(); 
 
\t \t \t \t var tdDate = new Date ($(this).data('date')); 
 
\t \t \t \t var startDate = new Date (startTraining); 
 
       
 
\t \t \t \t if ((tdDate < startDate) && (($(this).parent().get(0)) !== ($('.fc-day[data-date="' + startTraining + '"]').parent().get(0)))){ 
 
\t \t \t \t \t $(this).closest('.fc-row').addClass('hidden'); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t $(this).closest('.fc-row').removeClass('hidden'); 
 
\t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t }); 
 
      
 
\t \t }); 
 

 

 
\t \t $('#calendar').fullCalendar('gotoDate', startDate); 
 
\t \t var date = new Date(); 
 
\t \t var d = date.getDate(); 
 
\t \t var m = date.getMonth(); 
 
\t \t var y = date.getFullYear(); 
 
\t \t var started; 
 
\t \t var categoryClass; 
 
\t \t var calendar = $('#calendar').fullCalendar({ 
 
\t \t \t header: { 
 
\t \t \t \t left: 'prev,next today', 
 
\t \t \t \t right: 'title' 
 
\t \t \t }, 
 
\t \t \t selectable: true, 
 
\t \t \t selectHelper: true, 
 
\t \t \t select: function (start, end, allDay) { 
 
\t \t \t \t $('#fc_create').click(); 
 
\t \t \t \t started = start; 
 
\t \t \t \t ended = end 
 
\t \t \t \t 
 
\t \t \t \t $(".antosubmit").on("click", function() { 
 
\t \t \t \t \t var title = $("#title").val(); 
 
\t \t \t \t \t if (end) { 
 
\t \t \t \t \t \t ended = end 
 
\t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t \t categoryClass = $("#event_type").val(); 
 
\t \t \t \t \t 
 
\t \t \t \t \t if (title) { 
 
\t \t \t \t \t \t calendar.fullCalendar('renderEvent', { 
 
\t \t \t \t \t \t \t title: title, 
 
\t \t \t \t \t \t \t start: started, 
 
\t \t \t \t \t \t \t end: end, 
 
\t \t \t \t \t \t \t allDay: allDay 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t true // make the event "stick" 
 
\t \t \t \t \t \t); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t \t $('#title').val(''); 
 
\t \t \t \t \t calendar.fullCalendar('unselect'); 
 
\t \t \t \t \t $('.antoclose').click(); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t }); 
 
\t \t \t }, 
 
\t \t \t 
 
\t \t \t eventClick: function (calEvent, jsEvent, view) { 
 
\t \t \t 
 
\t \t \t //alert(calEvent.title, jsEvent, view); 
 
\t \t \t \t $('#fc_edit').click(); 
 
\t \t \t \t $('#title2').val(calEvent.title); 
 
\t \t \t \t categoryClass = $("#event_type").val(); 
 
\t \t \t \t $(".antosubmit2").on("click", function() { 
 
\t \t \t \t \t calEvent.title = $("#title2").val(); 
 
\t \t \t \t \t calendar.fullCalendar('updateEvent', calEvent); 
 
\t \t \t \t \t $('.antoclose2').click(); 
 
\t \t \t \t }); 
 
\t \t \t \t 
 
\t \t \t \t calendar.fullCalendar('unselect'); 
 
\t \t \t }, 
 
\t \t \t 
 
\t \t \t editable: true, 
 
\t \t \t events: [ 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'All Day Event', 
 
\t \t \t \t \t start: new Date(y, m, 1) 
 
\t \t \t \t }, { 
 
\t \t \t \t \t title: 'All Day Event', 
 
\t \t \t \t \t start: new Date(y, m, 8) 
 
\t \t \t \t }, { 
 
\t \t \t \t \t title: 'All Day Event', 
 
\t \t \t \t \t start: new Date(y, m, 15) 
 
\t \t \t \t }, { 
 
\t \t \t \t \t title: 'All Day Event', 
 
\t \t \t \t \t start: new Date(y, m, 22) 
 
\t \t \t \t }, { 
 
\t \t \t \t \t title: 'All Day Event', 
 
\t \t \t \t \t start: new Date(y, m, 29) 
 
\t \t \t \t } 
 
\t \t \t ] 
 
\t \t }); 
 
\t });
<script src="//code.jquery.com/jquery-2.2.3.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.css" rel="stylesheet"/> 
 

 

 
<div class="row"> 
 
\t \t <div class="col-md-6"> 
 
\t \t \t <input type="text" value="" id="start_date" placeholder="yyyy-mm-dd"> 
 
\t \t \t <button type="button" id="save">Save</button> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t <div class="row"> 
 
\t \t <div class="col-md-6"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div id='calendar'></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

回答

0

我已經找到了解決辦法,如果有人需要這個。

$('#save').click(function(){ 

     $(".fc-day").each(function() { 
      var startTraining = $('#start_date').val(); 
      var tdDate = new Date ($(this).data('date')); 
      var startDate = new Date (startTraining); 

      if ((tdDate < startDate) && (($(this).parent().get(0)) !== ($('.fc-day[data-date="' + startTraining + '"]').parent().get(0)))){ 
       $(this).closest('.fc-row').addClass('invisible'); 
      } else { 
       $(this).closest('.fc-row').removeClass('invisible'); 
      } 

     }); 

    }); 

.invisible { 
    visibility: hidden; 
    height:0px !important; 
    min-height:0px !important; 
    line-height:0px !important 
} 
相關問題