我在 FullCalendar 4 中使用 Google 日历数据,一切都显示正常,但我无法弄清楚如何使用引导弹出窗口来处理悬停事件。我尝试了很多在网上找到的不同方法,但它们要么抛出 JSON 错误,要么根本不执行任何操作(可能是因为大多数都是针对以前的版本)。
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap', 'googleCalendar' ],
themeSystem: 'bootstrap',
googleCalendarApiKey: 'xxxxxxx',
events: {
googleCalendarId: 'xxxxxxx'
},
eventRender: function(event, element) {
$(element).popover({
title: event.title,
placement:'top',
html:true,
trigger : 'hover',
animation : 'false',
content: event.description,
container:'body'
}).popover('show');
},
height: 650,
header: {
left: 'title',
center: '',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek prevYear,prev,next,nextYear'
}
});
calendar.render();
Run Code Online (Sandbox Code Playgroud)
这个特定的 eventRender 函数不会抛出任何错误,但它也不会执行任何操作。鼠标悬停时发生的唯一事情是将 fc-allow-mouse-resize 添加到特定事件中的锚标记。我缺少什么?
解决方案(从弹出内容中删除了 event.description)
var calendarEl = document.getElementById('calendar'); …Run Code Online (Sandbox Code Playgroud) 请原谅超级初学者的烦恼,但我正在尝试使用javascript开关进行div更改颜色.我确定这个问题与对参数如何工作的基本误解有关,但正如我所说,我是一个新手.我没有得到任何错误,它只是没有做任何事情.另外,请先在这里发帖,所以如果我在帖子中做了任何不当的事情,我会道歉.
function colorChanger(color) {
switch(color) {
case "red":
document.getElementById("color_box").style.backgroundColor = "red";
break;
case "orange":
document.getElementById("color_box").style.backgroundColor = "orange";
break;
case "yellow":
document.getElementById("color_box").style.backgroundColor = "yellow";
break;
case "green":
document.getElementById("color_box").style.backgroundColor = "green";
break;
case "blue":
document.getElementById("color_box").style.backgroundColor = "blue";
break;
case "indigo":
document.getElementById("color_box").style.backgroundColor = "indigo";
break;
case "violet":
document.getElementById("color_box").style.backgroundColor = "violet";
break;
}
}Run Code Online (Sandbox Code Playgroud)
@viewport {
zoom: 1.0;
width: device-width;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#color_box {
width: 20rem;
height: 20rem;
border: solid 1px;
}Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head> …Run Code Online (Sandbox Code Playgroud)