我的网页中嵌入了FullCalendar，并且会在日历上拖放外部事件，但只允许在当月的星期六放弃。 droppable：true在整个日历上启用droppable。如何在本月的星期六启用drop？
**如果单击星期六并突出显示（黄色），那么它也不会被删除
的CSS：
.blink{
animation: blinker 2s linear infinite;
background-color: red !important;
}
@keyframes blinker {
50% { opacity: 0; }
}
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#datepicker {
max-width: 750px;
margin: 0 auto;
}
#wrap {
width: 1500px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
#external-events .fc-event {
margin: 10px 0;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
使用Javascript：
var holidays=[];
var saturdays=[];
var calEventStatus = [];
$(document).ready(function(){
// Manage status of dragging event and calendar
/* Required functions */
var isEventOverDiv = function(x, y) {
var external_events = $( '#external-events' );
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left
&& y >= offset.top
&& x <= offset.right
&& y <= offset .bottom) { return true; }
return false;
}
function makeEventsDraggable () {
$('.fc-draggable').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
// Dirty fix to remove highlighted blue background
$("td").removeClass("fc-highlight");
});
}
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0, // original position after the drag
stop: function( event, ui ) {
dragStop();
}
});
});
$('#datepicker').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
dragRevertDuration: 0,
eventLimit: true, // allow "more" link when too many events
drop: function(date, jsEvent, ui) {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
// if event dropped from another calendar, remove from that calendar
if (typeof calEventStatus['calendar'] != 'undefined') {
$(calEventStatus['calendar']).fullCalendar('removeEvents', calEventStatus['event_id']);
//$(calEventStatus['calendar']).fullCalendar('unselect');
}
//makeEventsDraggable();
},
eventReceive: function( event ) {
//makeEventsDraggable();
},
eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
makeEventsDraggable();
},
eventDragStart: function( event, jsEvent, ui, view ) {
// Add dragging event in global var
calEventStatus['calendar'] = '#datepicker';
calEventStatus['event_id'] = event._id;
drag();
},
eventDragStop: function( event, jsEvent, ui, view ) {
if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
$('#datepicker').fullCalendar('removeEvents', event._id);
var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: event.title, id :event.id, stick: true });
}
dragStop();
calEventStatus = []; // Empty
//makeEventsDraggable();
},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
makeEventsDraggable();
},
dayClick: function(calEvent, jsEvent, view) {
var date = new Date($('#datepicker').fullCalendar('getDate').format());
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(),date.getMonth()+ 1, 0);
var formattedFirst= new Date(formatDate(firstDay));
var formattedLast= new Date(formatDate(lastDay));
var formattedSelect= new Date(calEvent.format());
if (formattedSelect>=formattedFirst && formattedSelect<= formattedLast){
if($(this).css('background-color')=="rgba(0, 0, 0, 0)"){ //rgba(0, 0, 0, 0)
$(this).css('background-color', 'yellow');
holidays.push(calEvent.format());
}
else{
$(this).css('background-color','rgba(0, 0, 0, 0)' );
var index= holidays.indexOf(calEvent.format());
if (index > -1) {
holidays.splice(index, 1);
}
}
}
},
viewRender: function(view, element) {
makeEventsDraggable();
holidays=[];
saturdays=[];
var d = new Date($('#datepicker').fullCalendar('getDate').format());
var getTot = daysInMonth(d.getMonth()+1,d.getFullYear()); //Get total days in a month
for(var i=1;i<=getTot;i++){ //looping through days in month
var newDate = new Date(d.getFullYear(),d.getMonth(),i)
if(newDate.getDay()==6){ //if Saturday
saturdays.push(formatDate(newDate));
}
}
function daysInMonth(month,year) {
return new Date(year, month, 0).getDate();
}
}
});
});
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
$("#nextBtn").on('click',function(){
var holidayStr= holidays.join();
var date = $("#datepicker").fullCalendar('getDate');
console.log(date.year());
$("#addedHoliday").val(holidayStr);
$("#scheduleMonth").val(""+(date.month()+1));
$("#scheduleYear").val(""+date.year());
});
function drag() {
if(saturdays){
for(var i=0;i<saturdays.length;i++){ //looping through days in month
if(holidays.indexOf(saturdays[i])<0)
$('.fc-day[data-date="'+saturdays[i]+'"]').addClass('blink');
}
}
}
function dragStop(ev){
if(saturdays){
for(var i=0;i<saturdays.length;i++){ //looping through days in month
if(holidays.indexOf(saturdays[i])<0)
$('.fc-day[data-date="'+saturdays[i]+'"]').removeClass('blink');
}
}
}
HTML：
<div id="datepicker"></div>
<div id='wrap' class="form-group">
<div id='external-events'>
<div id='external-events-listing'>
<h4>Draggable Events (Saturday)</h4>
<div class='fc-event' ondrag="drag()" ondragend="dragStop(event)" >My Event 1</div>
</div>
</div>
</div>