我正在使用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
}