- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的应用程序中有一个简单的 SVG,现在悬停时,我想将此 div 动态附加到完整日历 API 中的某个元素
UPDATE: Here is my full component
import React, { useState, useEffect, useContext, useRef } from 'react';
import { Calendar as FullCalendar } from '@fullcalendar/core';
import googleCalendarPlugin from '@fullcalendar/google-calendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import calendartopbg from 'assets/images/calendar_bg.png';
import cloud from 'assets/images/calendar_chmurka.png';
import styled from 'styled-components';
const Calendar = () => {
const [calendar, setCalendar] = useState('');
const calendarRef = useRef('');
useEffect(() => {
if (calendarRef.current) {
console.log(FullCalendar);
setCalendar(new FullCalendar(calendarRef.current, {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin],
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,listYear',
},
views: {
day: {
titleFormat: 'dddd, MMMM Do YYYY'
}
},
googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
events: 'en.usa#holiday@group.v.calendar.google.com',
eventClick: function(arg) {
// opens events in a popup window
window.open(arg.event.url, '_blank', 'width=700,height=600');
// prevents current tab from navigating
arg.jsEvent.preventDefault();
},
eventRender: function(info){
console.log(info.el);
var imageData = document.getElementById('imageDataContaainer')
console.log(imageData)
info.el.appendChild(imageData);
},
}));
}
}, [calendarRef.current]);
console.log(calendar);
return (
<>
<CalendarBackgroundWrapper>
<img style={imagestyle} src={calendartopbg} />
</CalendarBackgroundWrapper>
<CalendarContainer ref={calendarRef}>
{calendar && calendar.render ? calendar.render(): null}
</CalendarContainer>
<div id="imageDataContaainer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<mask id="image-mask">
<circle id="outer" cx="50" cy="50" r="50" fill="white"/>
<circle id="inner" cx="50" cy="50" r="25"/>
</mask>
</defs>
</svg>
</div>
</>
)
}
export default Calendar;
在控制台上我可以看到这个 div ,然后出现以下错误
app.js?1:121281 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at Calendar.eventRender (app.js?1:121281)
我的代码有什么问题吗?
最佳答案
我不确定你想做什么以及为什么你需要一个“事件渲染”,但是 "React way" is conditional rendering一个组件。
改变 DOM(如追加子项)是一种反模式,as it's React's responsibility.
const App = () => {
const [isRender, toggle] = useReducer(p => !p, false);
return (
<>
{isRender && <SVGComponent />}
<button onClick={toggle}>Render SVG</button>
</>
);
};
关于javascript - 使用 eventRender 在完整日历 api 中附加子元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60813398/
我在 AngularJs 中使用 FullCalendar 插件。 一切正常。在 eventRender 事件中,我为每个事件添加 background color、image、tooltip 和 l
我正在尝试使用 addClass 在 fc-event-inner 类中显示图像。我想用 jquery 来做到这一点,这样我就可以在不同的事件中使用不同的图像。谁能告诉我为什么这不起作用? calen
当我设置 fullCalendar 并设置 eventRender 函数回调时,我想根据 LeadId 是否为空来设置事件的颜色。但这似乎不起作用,即使文档是这样说的:http://arshaw.co
在我的全日历上,我有一些复选框,我希望它们像过滤器一样使用react。简而言之:我想过滤一个、全部、三个、两个(多个)...等等。 到目前为止,我可以选择一个复选框,并且它会返回正确的事件,但当然,它
现在安装了 FullCalendar 版本 3.9.0(之前的版本为 3.4.0)的现有网站(用于显示各种 Google 日历的内容)在单击事件以显示事件时不再显示事件弹出窗口完整的事件描述。相反,以
我使用 fullcalendar.io vue 扩展。 而且我想挂接到事件渲染中以添加操作,但事件回调仅包含 JS 元素。 有办法把vue组件注入(inject)进去吗? JS import Ful
我想根据数据库为事件着色。我使用事件渲染。完整代码如下: $(document).ready(function() { var date = new Date(); var
Version : Fullcalendar-Scheduler v5 beta2 我在chrome中尝试了如下的eventRender: document.addEventListener('DOM
我的应用程序中有一个简单的 SVG,现在悬停时,我想将此 div 动态附加到完整日历 API 中的某个元素 UPDATE: Here is my full component import React
我正在使用 FullCalendar从 PHP/MySQL 渲染事件,一切正常。我查看了 FullCalendar 文档和 bootstrap to achieve my popover event
我正在开发一个完整的日历概览界面,使用:服务器上的 Flask-python 和客户端上的 html jinja2 js。 现在我正在尝试使用 tooltip.js 在悬停或单击时创建工具提示。 我有
我有一个关于 Fullcalendar 的问题,请附加到 EventRender 和 javascript 中。 我有这个 eventRender: function (event, element)
我在将 Qtip 附加到 eventMousever 事件而不是 fullcalendar 中的 eventRender 事件时遇到问题。 我想要这样做的原因是因为拥有数据的服务器位于另一个国家/地区
有没有办法通过 eventRender Fullcalendar 从 angularjs 指令动态渲染模板? 我想要实现的是如下所示: eventRender: function(event, ele
在与 jquery 一起使用的 fullCalendar 中,我有这个 eventRender: eventRender: function (event, element, view) {
我在全日历上显示事件时遇到问题。我正在使用 ASP.net Webforms 和 C#。我有 ashx 处理程序,我调用它来从数据库加载值,然后将其格式化为发回的 json 响应。下面是用于生成日历的
我在 angularjs 中使用完整的日历插件。 https://github.com/angular-ui/ui-calendar 将多个数组提供给完整日历的 eventSource。 $scope
我是一名优秀的程序员,十分优秀!