Javascript 无法通过单击FullCalendar 5的resourceTimelineWeek视图显示事件
无法显示通过提示创建的事件以及通过单击表格单元格获取要创建的事件的“标题”。调试之后,我发现事件是创建的,但不知何故没有呈现出来。 我创建事件的方法是单击表格单元格,然后弹出一个提示,您写入事件的标题,从技术上讲,它应该在所选表格单元格上显示事件 希望下面的截图能有所帮助。 请随时提问Javascript 无法通过单击FullCalendar 5的resourceTimelineWeek视图显示事件,javascript,fullcalendar,fullcalendar-5,Javascript,Fullcalendar,Fullcalendar 5,无法显示通过提示创建的事件以及通过单击表格单元格获取要创建的事件的“标题”。调试之后,我发现事件是创建的,但不知何故没有呈现出来。 我创建事件的方法是单击表格单元格,然后弹出一个提示,您写入事件的标题,从技术上讲,它应该在所选表格单元格上显示事件 希望下面的截图能有所帮助。 请随时提问 import React,{useState}来自“React” 从“@FullCalendar/react”导入FullCalendar,{formatDate} 从“@fullcalendar/daygri
import React,{useState}来自“React”
从“@FullCalendar/react”导入FullCalendar,{formatDate}
从“@fullcalendar/daygrid”导入dayGridPlugin
从“@fullcalendar/resource timeline”导入resourceTimelinePlugin;
从“@fullcalendar/interaction”导入interactionPlugin
从“@fullcalendar/timegrid”导入timeGridPlugin
从“/Demo”导入基本CAPP;
从“/event utils”导入{INITIAL_EVENTS,createEventId};
从“fullcalendar scheduler”导入{resourceDayGridPlugin};
函数renderEventContent(事件信息){
console.log(eventInfo)
返回(
{eventInfo.timeText}
{eventInfo.event.title}
{/*你好*/}
)
}
const DemoApp=()=>{
const[state1,setState1]=useState(false);
const[state2,setState2]=useState(false);
const[weekendsVisible,setWeekendsVisible]=useState(false);
常量[currentEvents,setCurrentEvents]=useState([])
常量handleState1=()=>{
设置状态1(正确);
设置状态2(假);
}
const handleState2=()=>{
设置状态2(正确);
设置状态1(假);
}
const handleDateSelect=(selectInfo)=>{
let title=prompt('请为事件输入新标题')
让calendarApi=selectInfo.view.calendar
console.log(标题)
calendarApi.unselect()//清除日期选择
如果(标题){
返回日历API.addEvent({
id:createEventId(),
标题
开始:选择info.startStr,
结束:selectInfo.endStr,
全天:选择info.allDay
})
}
}
常量handleEventClick=(单击信息)=>{
if(window.confirm(`是否确实要删除事件'${clickInfo.event.title}`')){
单击info.event.remove()
}
警报(“事件:”+点击信息。事件。标题);
//更改边框颜色只是为了好玩
单击info.el.style.borderColor='红色';
}
常量handleEvents=(事件)=>{
setCurrentEvents(事件);
}
常量handleWeekendsToggle=()=>{
setWeekendsVisible(!weekendsVisible);
}
设resourceTimeline_Z={
键入:“resourceTimelineWeek”,
持续时间:{天:2}
}
返回(
网格时间线
资源时间表
切换周末
{
州1?
:
州2?
:
}
)
}
导出默认DemoApp代码>由于您没有为创建的事件指定资源ID,因此它们无法显示在时间线视图中。如果事件没有资源ID,则fullCalendar不知道根据哪个资源显示它,因此它根本不显示它
具体来说,问题是当您执行calendarApi.addEvent
时,您没有为新事件提供资源ID。您需要在传递给addEvent
的对象中提供资源ID。根据指南,建议您在使用网站之前阅读该指南,请不要发布代码的图像。代码是文本。将其粘贴为图形是非常不切实际的,因为它无法复制、搜索、在答案中重复使用等。这使得那些可能想要帮助您的人很难获得帮助。请编辑您的问题,以将代码作为文本包含,并使用将其很好地呈现,以便对希望帮助您的人有用。谢谢,因为您没有为创建的事件指定资源ID,所以它们无法显示在时间线视图中。从逻辑上考虑,如果事件没有资源ID,那么fullCalendar如何知道显示它所针对的资源?根据,如果选择是在资源感知视图(如时间线)上进行的,则selectInfo将包含有关所选资源的数据。(如果选择是使用不同的非资源视图进行的,则您需要询问用户要将事件与哪个资源关联)。感谢您的编辑,但额外的评论不会解决这些评论中的任何一条,也不会让任何人解决您的问题,正如我已经建议的那样Hey,因此,我给了你我遇到问题的代码,正如你在参考资料中看到的,我给每个“资源”赋予了“ID”,这与你在第二条评论中所说的是一样的。是的,它起了作用,非常感谢@ADyson。我在calendarApi.addEvent函数中添加了这个“resourceId”属性,它起了作用。你是对的,addEvent无法计算resourceId。谢谢你的帮助,真的很感激。