可以'如果我隐藏某些日期,则不要在FullCalendar中拖动事件

can't drag events in FullCalendar if I hide some dates

本文关键字:FullCalendar 事件 拖动 日期 如果 隐藏 可以      更新时间:2023-09-26

我正在使用fullcalendar,并试图隐藏开始日期前的几周。它运行得很好,但问题是我不能再拖我的活动了。我找不到其他方法来做到这一点,我的代码中有什么问题。这是我的尝试

$(window).load(function () {
  
		var startDate = $('#start_date').val();
		//hide all dates before starting date
		$('#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('hidden');
				} else {
					$(this).closest('.fc-row').removeClass('hidden');
				}
					
			});
          
		});
		$('#calendar').fullCalendar('gotoDate', startDate);
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		var started;
		var categoryClass;
		var calendar = $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				right: 'title'
			},
			selectable: true,
			selectHelper: true,
			select: function (start, end, allDay) {
				$('#fc_create').click();
				started = start;
				ended = end
				
				$(".antosubmit").on("click", function () {
					var title = $("#title").val();
					if (end) {
						ended = end
					}
					
					categoryClass = $("#event_type").val();
					
					if (title) {
						calendar.fullCalendar('renderEvent', {
							title: title,
							start: started,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
						);
					}
					
					$('#title').val('');
					calendar.fullCalendar('unselect');
					$('.antoclose').click();
					return false;
				});
			},
			
			eventClick: function (calEvent, jsEvent, view) {
			
			//alert(calEvent.title, jsEvent, view);
				$('#fc_edit').click();
				$('#title2').val(calEvent.title);
				categoryClass = $("#event_type").val();
				$(".antosubmit2").on("click", function () {
					calEvent.title = $("#title2").val();
					calendar.fullCalendar('updateEvent', calEvent);
					$('.antoclose2').click();
				});
				
				calendar.fullCalendar('unselect');
			},
			
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				}, {
					title: 'All Day Event',
					start: new Date(y, m, 8)
				}, {
					title: 'All Day Event',
					start: new Date(y, m, 15)
				}, {
					title: 'All Day Event',
					start: new Date(y, m, 22)
				}, {
					title: 'All Day Event',
					start: new Date(y, m, 29)
				}
			]
		});
	});
<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">
		<div class="col-md-6">
			<input type="text" value="" id="start_date" placeholder="yyyy-mm-dd">
			<button type="button" id="save">Save</button>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-6">
			<div class="container">
				<div id='calendar'></div>
			</div>
		</div>
	</div>

如果有人需要,我已经找到了解决方案。

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