- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我用的是primereact
的Full Calendar,但是需要选择具体的年月。为此,我有单独的日期选择器。但是当我尝试使用完整日历的 gotoDate
方法更改日期时,
有错误
'Uncaught TypeError: Cannot read property 'onViewDateChange' of null'
//method on datepicker change
handleChange(date) {
console.log(date);
this.setState({
startDate: date.value,
});
const calendarEl = document.getElementById('fullCalendar');
const calendar = new Calendar(calendarEl);
calendar.gotoDate(date.value);
// calendar.gotoDate(this.state.startDate);
}
}
//datepicker
<Calendar view="month" dateFormat="mm/yy" value={startDate} onChange={this.handleChange} yearNavigator yearRange="2015:2030"/>
//calendar
<FullCalendar
id="fullCalendar"
firstDay={1}
defaultView={`${CalendarRepo()
.isCalendarModelMonth(model) === 'month' ? 'dayGridMonth' : 'timeGridWeek'}`}
header={{
left: 'prev,next today, custom',
center: 'title',
right: 'dayGridMonth,timeGridWeek',
}}
customButtons={{
custom: {
text: 'custom 1',
click() {
calendar.gotoDate();
alert('clicked custom button 1!');
},
},
}}
nowIndicator
displayEventEnd={{
month: false,
basicWeek: true,
default: false,
}}
businessHours
timeZone="Europe/Kiev"
selectable
rerenderDelay={10}
eventDurationEditable
editable
droppable
eventDrop={(info) => {
this.handleDragEvent(info.event.id, info.event.title, info.event.start, info.event.end, info.event.allDay);
}}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, bootstrapPlugin, momentTimezonePlugin]}
themeSystem="bootstrap"
events={model.events}
eventReceive={this.eventReceive}
eventClick={this.handleEventClick}
dateClick={this.handleDateClick}
eventLimit
/>
最佳答案
看看我为你制作的这个codesandbox:
Codesandbox
这应该对您的项目有帮助。
也许您应该考虑将事件添加到日历之外的按钮,就像在我的沙盒中一样。
import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction"; // needed for dayClick
import "./styles.css";
// must manually import the stylesheets for each plugin
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
export default class DemoApp extends React.Component {
calendarComponentRef = React.createRef();
state = {
calendarWeekends: true,
calendarEvents: [
// initial event data
{ title: "Event Now", start: new Date() }
]
};
render() {
return (
<div className="demo-app">
<div className="demo-app-top">
<button onClick={this.toggleWeekends}>toggle weekends</button>
<button onClick={this.gotoPast}>go to a date in the past</button>
(also, click a date/time to add an event)
</div>
<div className="demo-app-calendar">
<FullCalendar
id="fullCalendar"
firstDay={1}
defaultView="dayGridMonth"
header={{
left: "prev,next today, custom",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
}}
customButtons={{
custom: {
text: 'custom 1',
click() {
this.gotoPast();
},
},
}}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
ref={this.calendarComponentRef}
weekends={this.state.calendarWeekends}
events={this.state.calendarEvents}
dateClick={this.handleDateClick}
/>
</div>
</div>
);
}
toggleWeekends = () => {
this.setState({
// update a property
calendarWeekends: !this.state.calendarWeekends
});
};
gotoPast = () => {
let calendarApi = this.calendarComponentRef.current.getApi();
calendarApi.gotoDate("2019-10-12"); // call a method on the Calendar object
};
handleDateClick = arg => {
if (confirm("Would you like to add an event to " + arg.dateStr + " ?")) {
this.setState({
// add new event data
calendarEvents: this.state.calendarEvents.concat({
// creates a new array
title: "New Event",
start: arg.date,
allDay: arg.allDay
})
});
}
};
}
关于reactjs - 无法转到完整日历上的特定日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57674268/
具体详细介绍请看下文: 在使用文件进行交互数据的应用来说,使用FTP服务器是一个很好的选择。本文使用Apache Jakarta Commons Net(commons-net-3.3.jar)
我在日志文件中收到这些警告: WARN 2013-01-15 00:08:15,550 org.eclipse.jetty.http.HttpParser- HttpParser Full for
我在使用特定网页时遇到问题。当我按下链接时,我收到应用程序错误(不是 http 错误等,而是应用程序级别错误)。 但是我打开了开发人员工具和网络控制台,我看到没有请求发送到服务器。 所以我双击并选择查
我没有组装经验,但这是我一直在做的。如果在通过程序集中的指针传递参数和调用函数时缺少任何基本方面,我希望输入。 例如,我想知道是否应该还原ecx,edx,esi,edi,。我读到它们是通用寄存器,但我
我没有组装经验,但这是我一直在做的。如果在通过程序集中的指针传递参数和调用函数时缺少任何基本方面,我希望输入。 例如,我想知道是否应该还原ecx,edx,esi,edi,。我读到它们是通用寄存器,但我
我正在尝试创建完整 uiscrollview 的快照,所有内容大小,我已经搜索了很多,并且我在 SO 上找到了一些东西,如下所示: Getting a screenshot of a UIScroll
我想复制一个包含以下结构的Vector,对我来说重要的是在修改复制的 vector 时保持原始Vector完整: public class objet_poid_n { public int
给定一个示例字符串 s = '嗨,我的名字是 Humpty-Dumpty,来自“爱丽丝,爱丽丝镜中奇遇记”',我想将其分成以下 block : # To Do: something like {l =
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以
我正在尝试创建一个正则表达式来查找文本中的 Linux 文件路径,但是正则表达式对我来说非常陌生。我有下面的代码片段,它将识别下面文件结构的开头。 .*(/bin/|/home/).* 完成正则表达式
我正在寻找远程托管的 JPG 的尺寸、宽度和高度。我已经了解了如何通过下载完整图像来执行此操作。 但是,如果我可以通过仅下载足以获取此信息的方式来做到这一点,那将是理想的。 典型的图像大小为 200K
有没有办法让下面的代码: import traceback def log(message): print "%s: %s" %(traceback.extract_stack()[0:-1]
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 3 年前。 Improve this qu
git show 显示了修订版中所做的所有更改。但是,它会打印出所有更改——而不仅仅是文件名。 git show --stat 只显示文件名,但它把它们截断了!有没有办法获得已更改文件名的完整列表?
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想要改善这个问题吗?更新问题,以便将其作为on-topi
当我在模板中调用我的模型 get_absolute_url 方法时,我想要一个绝对/完整的 url。在我的入门模型中,我有以下内容: def get_absolute_url(self): r
我正在使用 jQuery 1.5.1 这是我的代码: $('.cellcontent').animate({ left: '-=190'}, { easing: alert('start
我正在使用下面的方法删除条形图并使用新数据更新条形图,但这样做时出现了一个小故障/完整的图表消失 1 秒,直到加载新数据。但是是否可以通过仅增加/减少柱形而不实际消失图表来实现相同的目的。 d3.se
基于 this question 中的讨论,任何人都可以提供代码或代码链接,显示 NumericLiteralX 模块的完整实现(例如 this one )?我对 NumericLiteralX 模块
我的目标是检索网站的 html,并将其转换为可读的String。我下面的代码可以工作,但我遇到了一个技术问题:当我尝试检索 http://time.gov/HTML5 的 html 时,我在 andr
我是一名优秀的程序员,十分优秀!