小编V1x*_*III的帖子

如何让 Bootstrap 弹出窗口在 FullCalendar 4 中工作?

我在 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 css fullcalendar bootstrap-4 fullcalendar-4

3
推荐指数
1
解决办法
1万
查看次数

使用switch语句更改div背景颜色

请原谅超级初学者的烦恼,但我正在尝试使用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)

html javascript dom switch-statement

2
推荐指数
1
解决办法
2128
查看次数