2016-05-06 6 views
0

Ich benutze Vollkalender und ich versuche, die Wochen zu verstecken, die vor meinem Anfangsdatum kommen. es funktioniert perfekt und aber das Problem, dass ich meine Ereignisse nicht mehr ziehen kann. Ich finde keinen anderen Weg, um das zu tun, und was ist das Problem in meinem Code. dies ist mein Versuchkann nicht Ereignisse in FullCalendar ziehen, wenn ich einige Daten verberge

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

Antwort

0

ich die Lösung gefunden zu haben, wenn jemand diese benötigen.

$('#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 
}