Javascript 在随后的月份复制条目
奇怪的一个。有两个学校建筑日历由公共谷歌Cal提供。可以无误地逐月单击，但当我隐藏一个建筑cal并单击到下一个月时，我会得到重复的条目，这些条目会继续翻倍，然后翻倍，并在您单击逐月时继续复制。代码如下：Javascript 在随后的月份复制条目,javascript,duplicates,fullcalendar,fullcalendar-3,Javascript,Duplicates,Fullcalendar,Fullcalendar 3,奇怪的一个。有两个学校建筑日历由公共谷歌Cal提供。可以无误地逐月单击，但当我隐藏一个建筑cal并单击到下一个月时，我会得到重复的条目，这些条目会继续翻倍，然后翻倍，并在您单击逐月时继续复制。代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset='utf-8' /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fullcalendar.css" rel="stylesheet" />
<link href="css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="shortcut icon">
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="icon">
<script src="js/moment.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.js"></script>
<script>
var allCals = [
{
id: 1,
name: 'High School',
url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE@group.calendar.google.com/public/basic',
color: '#0057b8',
visible: true
},{
id: 2,
name: 'Middle School',
url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE@group.calendar.google.com/public/basic',
color: '#4b4c4c',
visible: true
}
];
var gCals = function(){
var ret = $.grep(allCals, function(a){
return a.visible === true;
});
console.log('called gCals()');
console.log(ret);
return ret;
}
$(document).ready(function() {
//Hide/Show all
$('#hide-all').click(function(){
$('.calendar-list button').each(function(){
$(this).removeClass('btn-calendar-hide');
});
$.each(allCals, function(index,value){
//$('#calendar').fullCalendar('removeEventSource', this);
this.visible = false;
});
$('#calendar').fullCalendar('removeEvents');
});
$('#show-all').click(function(){
$('.calendar-list button').each(function(){
$(this).addClass('btn-calendar-hide');
});
$('#calendar').fullCalendar('removeEvents');
$.each(allCals, function(index,value){
$('#calendar').fullCalendar('addEventSource', allCals[index]);
this.visible = true;
});
});
//Populate buttons
$.each( allCals, function( index, value ){
var tmp = $('<button/>', {
type: 'button',
class: 'btn btn-block btn-calendar',
style: 'background-color: '+value.color,
text: value.name,
id: 'btn_calendar'+value.id,
click: function () {
if ($(this).hasClass('btn-calendar-hide')){
//$('#calendar').fullCalendar('removeEventSource', value);
$( this ).removeClass('btn-calendar-hide');
value.visible = false;
} else {
//$('#calendar').fullCalendar('addEventSource', value);
$( this ).addClass('btn-calendar-hide');
value.visible = true;
}
updateCalendar();
}
});
if (value.visible === true){
tmp.addClass('btn-calendar-hide');
}
$('.calendar-list').append(
tmp
);
});
//Display the calendar
$('#calendar').fullCalendar({
googleCalendarApiKey: 'AIzaSyDiJjIhfkuYrKzwrj0GS3wBN1erVcMsJmM',
eventSources: allCals,
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
},
header: {
left: 'month,basicWeek,basicDay',
center: 'title',
right: 'today prev,next'
}
});
function updateCalendar(){
$('#calendar').fullCalendar('removeEvents');
$.each(allCals, function(index,value){
if (value.visible === true){
$('#calendar').fullCalendar('addEventSource', allCals[index]);
}
});
}
});
</script>
<style>
a.fc-event:hover, a.fc-event:focus{
color:#000;
}
#loading {
display: none;
position:absolute;
width:96%;
padding:10px;
z-index:999;
border: solid 1px #f8e166;
margin:1% 2%;
}
#loading h3 {
margin:2%;
}
#calendar {
margin: 20px auto;
}
.btn {
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}
.btn-calendar {
background-image: none;
color: #FFFFFF;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
opacity: 0.5;
}
.btn-calendar-hide {
opacity: 1;
}
.btn:hover, .btn:focus {
color: #FFFFFF;
text-decoration: none;
}
@media print {
a[href]:after {
content: none;
}
}
</style>
</head>
<body>
<div id="loading" class="bg-warning">
<h3 class="text-center">Loading...</h3>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 hidden-print"> <a href="http://www.woostercityschools.org/hs"><img class="img-responsive center-block" style="margin-top:2em; margin-bottom:2em" src="logo-district.jpg" alt="Wooster City Schools" ></a>
<div class="calendar-list">
<h4>Calendars
<div class="btn-group">
<button id="show-all" type="button" class="btn btn-xs">Show All</button>
<button id="hide-all" type="button" class="btn btn-xs">Hide All</button>
</div>
</h4>
</div>
</div>
<div class="col-md-10">
<p class="text-right hidden-print" style="margin-top:2%"><a href="javascript:print();" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-print"></i> Print</a></p>
<div id="calendar"></div>
</div>
</div>
</div>
</body>
</html>
所有变量=[
{
id:1，
名称：'高中'，
网址：'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE@group.calendar.google.com/public/basic'，
颜色：“#0057b8”，
可见：正确
},{
id:2，
名称:"中学",，
网址：'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE@group.calendar.google.com/public/basic'，
颜色：“#4b4c4c”，
可见：正确
}
];
var gCals=函数（）{
var ret=$.grep（所有账户，函数（a）{
返回a.visible===true；
});
log（'called gCals（）'）；
控制台日志（ret）；
返回ret；
}
$（文档）.ready（函数（）{
//全部隐藏/显示
$（“#全部隐藏”）。单击（函数（）{
$（'.calendar list button'）。每个（函数（）{
$（this.removeClass（'btn-calendar-hide'）；
});
$。每个（全部，函数（索引，值）{
//$（“#calendar”）.fullCalendar（'removeEventSource'，this）；
可见=假；
});
$（“#calendar”）.fullCalendar（'removeEvents'）；
});
$（“#全部显示”）。单击（函数（）{
$（'.calendar list button'）。每个（函数（）{
$（this.addClass（'btn-calendar-hide'）；
});
$（“#calendar”）.fullCalendar（'removeEvents'）；
$。每个（全部，函数（索引，值）{
$（“#calendar”）.fullCalendar（'addEventSource'，allCals[index]）；
可见=真实；
});
});
//填充按钮
$。每个（全部，函数（索引，值）{
var tmp=$（''{
键入：“按钮”，
类：“btn btn块btn日历”，
样式：“背景色：”+value.color，
text:value.name，
id:'btn_calendar'+value.id，
单击：函数（）{
if（$（this）.hasClass（'btn-calendar-hide'））{
//$（'#calendar'）.fullCalendar（'removeEventSource'，value）；
$（this.removeClass（'btn-calendar-hide'）；
value.visible=false；
}否则{
//$（'#calendar'）.fullCalendar（'addEventSource'，value）；
$（this.addClass（'btn-calendar-hide'）；
value.visible=true；
}
updateCalendar（）；
}
});
如果（value.visible==true）{
tmp.addClass（'btn-calendar-hide'）；
}
$（'.calendar list'）。追加(
tmp
);
});
//显示日历
$（“#日历”）.fullCalendar({
googleCalendarApiKey:“AIzaSyDiJjIhfkuYrKzwrj0GS3wBN1erVcMsJmM”，
事件来源：allCals，
事件单击：函数（事件）{
//在弹出窗口中打开事件
打开（event.url，'gcalevent'，'width=700，height=600'）；
返回false；
},
加载：函数（bool）{
$（'#加载'）。切换（bool）；
},
标题：{
左：“月，基本周，基本日”，
中心：'标题'，
右图：“今天上一个，下一个”
}
});
函数updateCalendar（）{
$（“#calendar”）.fullCalendar（'removeEvents'）；
$。每个（全部，函数（索引，值）{
如果（value.visible==true）{
$（“#calendar”）.fullCalendar（'addEventSource'，allCals[index]）；
}
});
}
});
a、 fc事件：悬停，a.fc事件：焦点{
颜色：#000；
}
#装载{
显示：无；
位置：绝对位置；
宽度：96%；
填充：10px；
z指数：999；
边框：实心1px#f8e166；
利润率：1%2%；
}
#加载h3{
利润率：2%；
}
#历法{
保证金：20px自动；
}
.btn{
边框颜色：rgba（0,0,0,0.15）rgba（0,0,0,0.15）rgba（0,0,0,0.25）；
}
.btn日历{
背景图像：无；
颜色：#FFFFFF；
文本阴影：0 1px 1px rgba（0,0,0,0.8）；
不透明度：0.5；
}
.btn日历隐藏{
不透明度：1；
}
.btn:悬停，.btn:焦点{
颜色：#FFFFFF；
文字装饰：无；
}
@媒体印刷品{
a[href]：之后{
内容：无；
}
}
加载。。。
日历
全部展示
全部隐藏
您遇到的问题是调用$（“#calendar”）.fullCalendar（'removeEvents'）删除日历上当前可见的事件，但不会删除这些事件的源
这意味着，当您继续调用$（“#calendar”）.fullCalendar（'addEventSource'
next时，您只需反复添加相同的事件源。下次按“next”或“previous”若要更改日期范围，这将触发fullCalendar从所有可用源请求该日期范围的新事件。由于您尚未删除任何源，但一直在添加更多源，因此您可以看到这样会导致显示中的事件重复
在代码的一部分中，您注释掉了对$（“#calendar”）.fullCalendar（'removeEventSource'
）的调用，但实际上（或复数“re