我有四个按钮填充HTML中的共享目标框。每个按钮向一个公共处理程序发送一个不同的参数("type"),该处理程序运行一个公共函数CalChoice,该函数使用自定义URL(基于类型参数)触发一个API。这第一次可以正常工作,但是任何单击其他按钮都不会使用新参数再次触发函数。我已经运行了计数器和警报来证明我的点击到达了函数,但是在第一次点击之后,我可以看到控制台中XHR回调没有改变。(我想我不能排除这个函数是用旧参数重新运行的,因为内容不会改变,但我没有看到丝毫的打嗝。)在下面的代码中,您将发现click处理程序和func调用位于所有内容的最底部。
为什么失败?
function CalChoice(type) {
if ( type == "getArt") {
$useURL = "my cal source here 1"
} else if ( type == "getNature") {
$useURL = "my cal source here 2"
} else if ( type == "getFitness") {
$useURL = "my cal source here 3"
} else if ( type == "getLectures") {
$useURL = "my cal source here 4"
}
$('.amu-calendar').fullCalendar({
googleCalendarApiKey: 'XXXXXX', //our API key
events: { googleCalendarId: $useURL
},
eventBackgroundColor: '#65378e',
defaultView: 'vertWeek',
header: {
left: "title",
center: "vertWeek month",
right: "prev next"
},
dayRender: function( date, cell ) {
// Get the current view
var view = $('.amu-calendar').fullCalendar('getView');
// Check if the view is the new vertWeek -
// in case you want to use different views you don't want to mess with all of them
if (view.name == 'vertWeek') {
// Hide the widget header - looks wierd otherwise
$('.fc-widget-header').hide();
$('.fc-day-header').hide();
// $('div#calendar.fc.fc-ltr.ui-widget').find('div.fc-toolbar').find('div.fc-center').html( "<a href='#switchView'>Change View</a>" );
// Remove the default day number with an empty space. Keeps the right height according to your font.
$('.fc-day-number').html('<div class="fc-vertweek-day"> </div>');
// Create a new date string to put in place
var this_date = date.format('ddd, MMM Do');
// Place the new date into the cell header.
cell.append('<div class="fc-vertweek-header"><div class="fc-vertweek-day">'+this_date+'</div></div>');
}
},
theme: true,
themeButtonIcons: true,
eventClick: function(gcalEvent, jsEvent, view) {
gcalEvent.preventDefault ? gcalEvent.preventDefault() : gcalEvent.returnValue = false; //IE8 does not recognize preventDefault so use returnvalue=false
var eid = gcalEvent.id;
var etitle = gcalEvent.title;
//var eurl = gcalEvent.url;
//var estart = $.fullCalendar.formatDate(gcalEvent.start, 'MMMM d'+', '+'h:mm tt ');
//var eend = $.fullCalendar.formatDate(gcalEvent.end, 'h:mm tt');
var elocation = gcalEvent.location;
var edescription = gcalEvent.description;
var eallday = gcalEvent.allDay;
$('div.title-d').html(etitle);
//$('div.datetime-d').html(estart + "-" +eend);
$('div.location-d').html(elocation);
$('div.description-d').html(edescription);
$('div.framer').css({'background' : 'rgb(234,191,73)'}); // and do the same for the detail framer
gcalEvent.preventDefault ? gcalEvent.preventDefault() : gcalEvent.returnValue = false; //IE8 does not recognize preventDefault so use returnvalue=false
return false;
}
});
}
//MY HANDLER
$(".accordionButton").click(function(event) { //amu-calendar
event.stopPropagation();//tried this, does not help
var type = $(this).attr('id');
console.log("The " + type + " button was clicked." ) //this always works but...
CalChoice(type);// a counter in this func does increment, yet it appears it is not running with the new type...no new result.
});
函数调用没有多大问题,因为参数是正确的,但fullCalendar
插件在某些时候是有状态的,它将与以前的日历一起工作。您需要先销毁日历以创建另一个。
$('.amu-calendar').fullCalendar('destroy');
另一种方法是删除eventsObject
:
$('.amu-calendar').fullCalendar('removeEvents');
$('.amu-calendar').fullCalendar('addEventSource' , { googleCalendarId : 'newEventURL' });