fullcalendar 相关问题

Fullcalendar是由Adam Shaw开发的一个库，它通过AJAX（以及其他方法）加载事件，并在日历/议程显示中显示它们。

如何防止全日历“moreLink”弹出窗口在点击外部时关闭？

我在nextjs中使用FullCalendar v6，它有一个内置功能，当事件太多时，它会将剩余的事件放在弹出窗口中，通过单击“更多”来显示。我的

javascript reactjs next.js fullcalendar fullcalendar-6

回答 1 投票 0

调整画布大小时，如何防止 fullcalendar 将事件与 multiMonthPlugin 插件“组合”

使用以下选项：插件：[multiMonthPlugin]，initialView：'multiMonthYear'，是否有一个选项可以“强制”日历始终至少显示两行事件？有

javascript typescript fullcalendar

回答 1 投票 0

JS - FullCalendar：月份变化时收听

我在使用 FullCalendar v5 时遇到了一个小问题，我使用 dayGridMonth 视图配置了它，我想在用户更改当前月份时监听...... 例如，如果他看到 Februa...

javascript fullcalendar fullcalendar-5

回答 2 投票 0

FullCalendar v6.1 使用 SiteImprove 浏览器扩展在 GridCalendar 视图上产生 50 个“ARIA 属性不受支持或禁止”错误

错误我正在开发一个法律要求保持一定水平的可访问性的网站。我们使用 SiteImprove（免费的浏览器扩展）来检查问题。我收到了 50 个错误...

html fullcalendar wai-aria fullcalendar-6

回答 1 投票 0

FullCalendar v6.1 在使用 SiteImprove 免费 chrome 扩展的 GridCalender 视图上存在“表标题单元格缺少标题角色”ADA 问题

问题我不知道如何解决日历页面问题，表标题单元格缺少标题角色。如图所示，问题我不知道如何解决日历页面问题，Table header cell is missing a header role。 <th role="presentation> 标签似乎存在问题，如下图所示。我尝试过的事情到目前为止，我已经尝试添加 scope="col"、scope="row"、role="columnheader" 以及 role="rowheader"，但这些似乎都没有使该错误消失。这是向 FullCalendar 提交的错误报告吗？如果我需要将其报告为错误，我还应该做什么来修复它？您对日历生成的 HTML 有多少控制权？该代码中指定了太多咏叹调。其中很多都是多余的，有些甚至是完全错误的。我认为有几个问题导致 siteimprove 标记错误。首先，如果您对表使用本机语义 HTML，则大多数 role 属性都是不必要的。例如，<tr>不需要role="row"，因为默认情况下会得到它。与 <th> 相同，如果您使用 role="columnheader"，您将获得默认的 scope="col"。删除这些角色。其次，语义表元素具有内置角色，如上所述，因此您不应该使用role="presentation"覆盖这些角色。这会删除该元素的语义值。例如，您有 <tr role="presentation">、<th role="presentation"> 和 <thead role="presentation">。删除所有role="presentation"。主桌上还有<table role="grid">。如果您计划实现箭头键导航以在行和列之间移动（类似于在电子表格中导航），那么网格角色就可以。我尝试了一个简单的 FullCalendar 演示，但箭头键无法工作，所以 role="grid" 应该 not 被使用。日历中的日期是 tab 可聚焦的，这很好，但这只是一个常规表格，而不是网格。由于生成的表代码存在很多问题，因此很难说是什么导致了 siteimprove 错误，但如果您可以控制的话，请先清理所有角色。如果您没有这种程度的控制权，我将不会使用该日历，因为它无法访问。

fullcalendar accessibility wai-aria fullcalendar-6

回答 1 投票 0

jquery全日历使用循环动态设置事件

我正在尝试使用 jQuery 完整日历，并且我必须动态设置事件。这些是事件的示例：事件：[ { 标题：“长事件”，

javascript jquery arrays fullcalendar

回答 4 投票 0

在 Fullcalendar 中自定义事件

目前，事件组件看起来是这样的：我想自定义它，最终的结果应该是这样的：

javascript reactjs calendar event-handling fullcalendar

回答 1 投票 0

如何在完整日历中仅显示营业时间？

我正在使用 jQuery fullCalendar。客户只想在日历中查看他们的营业时间。那可能吗？如何？示例：一家企业的营业时间为上午 9 点至下午 1 点以及下午 3 点至晚上 10 点

javascript fullcalendar

回答 7 投票 0

在 Angular 中获取完整日历中的活跃月份、日期和年份

我正在处理完整日历，我想通过单击下一个和上一个按钮来获取完整日历中当前活动的月份、年份和日期。事件：函数（fetchInfo，成功回调，

angular fullcalendar fullcalendar-5

回答 1 投票 0

Fullcalendar 6 - 默认将日期和工作日渲染为链接

似乎天和工作日默认呈现为链接（例如{dayContent}）。任何禁用/控制此功能并将它们呈现为或的方法... 似乎天和工作日默认呈现为链接（例如<a>{dayContent}</a>）。有什么方法可以禁用/控制它并使它们呈现为 <div> 或 <span> 例如？我尝试过的事情： dayCellContent：仅更改内容，但仍被 <a> 包裹 navLinks = false（默认值），确实单击天数不会更改视图（无导航），但天数仍呈现为链接如果重要的话，我正在使用@fullcalendar/react 您可以使用 Day Header Render Hooks 功能中的 dayHeaderDidMount，该功能使您可以完全控制以随心所欲地设置表格单元格的内部内容。这是一个简单的例子（使用vanilla JS，因为我不熟悉React，但基本原理是相同的）： dayHeaderDidMount: function (arg) { arg.el.innerHTML = arg.text; }, 现场演示：https://codepen.io/ADyson82/pen/LYMmppx 文档：https://fullcalendar.io/docs/day-header-render-hooks

javascript reactjs fullcalendar fullcalendar-6

回答 1 投票 0

在不同的开始和结束日期之间的每一天/日期的同一时间创建多个事件

我正在使用 Fullcalendar，我必须在开始日期和结束日期之间的同一时间创建一个事件。这里我的开始和结束日期不同，但我必须在开始和结束之间的每一天/日期创建事件...

javascript jquery jquery-plugins fullcalendar fullcalendar-3

回答 1 投票 0

fullcalendar V4中eventMouseEnter的使用

我正在使用fullcalnedar的V4，我想当鼠标尖端悬停在日历中显示的事件时显示一个弹出窗口，并且我正在使用以下代码行。 console.log() 行出现

angularjs fullcalendar

回答 2 投票 0

反应设置状态时，完整日历重新获取事件

我正在使用完整的日历 API，如下所示来获取我的事件- 我正在使用完整的日历 API，如下所示来获取我的事件 - <FullCalendar ref={calendarRef} plugins={[listPlugin, bootstrap5Plugin]} initialView='listMonth' themeSystem='bootstrap5' validRange={{ "start": currentDateTime }} headerToolbar={{ start: 'listMonth prev next', center: 'title', end: 'Schedule', }} views={ {listMonth: { buttonText: 'Month' }} } eventOrder={'end'} customButtons={{ Schedule: { text: 'Schedule Meeting', click: function () { handleCustomButtonClick(); } } }} events={function (info, successCallback, failureCallback){ var startDateTime = info.start; var endDateTime = info.end; startDateTime.setMilliseconds(0); endDateTime.setMilliseconds(0); startDateTime = startDateTime.toISOString(); endDateTime = endDateTime.toISOString(); startDateTime = startDateTime.substring(0, startDateTime.length - 5) + 'Z'; endDateTime = endDateTime.substring(0, endDateTime.length - 5) + 'Z'; const url = `http://localhost:8080/api/meeting/abhyasi/${props.profile.googleId}/${startDateTime}/${endDateTime}`; // Use backticks for template literals const headers = new Headers(); // Add headers to the headers object headers.append('X-API-KEY', ",PRGojtX9`c4e24219-fb95-;'.4ed8392hfds';"); const requestOptions = { method: 'GET', headers: headers }; const response = fetch(url, requestOptions) fetch(url, requestOptions) .then(response => { // check if the response is a 404 if (response.status === 404) { // if it is, then throw an error failureCallback(); } return response.json(); }) .then(data => { // Handle the JSON data here console.log(data); // map to events object var meeting_events = data.map((meeting) => { return { title: meeting.meetingAgenda, start: meeting.startDateTime, end: meeting.endDateTime, extendedProps: { startUrl: meeting.meetingStartUrl, joinUrl: meeting.meetingJoinUrl, meetingId: meeting.zoomMeetingId, meetingPassword: meeting.meetingPassword } } }); successCallback(meeting_events); }) .catch(error => { // Handle any errors that occurred during the fetch failureCallback(error); }); }} eventDidMount={ function(info) { let start = info.event.start.toISOString(); let end = info.event.end.toISOString(); let current = new Date().toISOString(); if(current < end) { var button = document.createElement('button'); button.innerHTML = 'Delete Meeting'; button.className = 'btn btn-primary btn-sm'; button.classList.add('float-end'); button.style.marginLeft = '10px'; button.style.borderRadius = '5px'; button.style.backgroundColor = '#dc3545'; button.style.borderColor = '#dc3545'; button.addEventListener('click', function() { deleteMeeting(info.event); } ); info.el.querySelector('.fc-list-event-title').appendChild(button); } if(start <= current && end >= current) { var button = document.createElement('button'); button.innerHTML = 'Start'; button.className = 'btn btn-primary btn-sm'; button.classList.add('float-end'); button.style.marginLeft = '10px'; button.style.borderRadius = '5px'; button.addEventListener('click', function() { window.open(info.event.extendedProps.startUrl); } ); info.el.querySelector('.fc-list-event-title').appendChild(button); } if(end > current) { var button = document.createElement('button'); button.innerHTML = 'Info'; button.className = 'btn btn-primary btn-sm'; button.style.marginLeft = '10px'; button.style.borderRadius = '5px'; button.classList.add('float-end'); button.addEventListener('click', function() { setEvent(info.event); presentInfoModal(); } ); // add button to the extreme right info.el.querySelector('.fc-list-event-title').appendChild(button); } } } /> <InfoMeetingModal /> <Modal show={showModal}> <Modal.Header closeButton onClick={closeModal}> <Modal.Title>Schedule Meeting</Modal.Title> </Modal.Header> <Modal.Body > <Form > <Form.Group controlId="datePicker"> <Form.Label className='form-label'>Date</Form.Label> <DatePicker selected={selectedDate} onChange={handleDateChange} dateFormat="yyyy-MM-dd" className='form-date-picker' /> </Form.Group> <Form.Group controlId="startTimePicker"> <Form.Label className='form-label'>Start Time</Form.Label> <DatePicker selected={selectedStartTime} onChange={handleStartTimeChange} showTimeSelect showTimeSelectOnly timeIntervals={15} timeCaption="Start Time" dateFormat="h:mm aa" className='form-date-picker' /> </Form.Group> <Form.Group controlId="endTimePicker"> <Form.Label className='form-label'>End Time</Form.Label> <DatePicker selected={selectedEndTime} onChange={handleEndTimeChange} showTimeSelect showTimeSelectOnly timeIntervals={15} timeCaption="End Time" dateFormat="h:mm aa" className='form-date-picker' /> </Form.Group> <Form.Group controlId="meetingDescription"> <Form.Label>Meeting Description</Form.Label> <Form.Control type="text" placeholder="Enter meeting description" value={meetingDescription} onChange={handleDescriptionChange} className='form-text-box' /> </Form.Group> </Form> </Modal.Body> <Modal.Footer> <Button variant="danger" onClick={closeModal}> Close </Button> <Button variant="dark" onClick={createMeeting}> Save </Button> <Spinner id='spinner' animation="border" role="status" hidden={!loading}> </Spinner> </Modal.Footer> </Modal> </div> ); function InfoMeetingModal() { return ( <Modal show={showInfoModal}> <Modal.Header closeButton onClick={closeInfoModal}> <Modal.Title>Meeting Details</Modal.Title> </Modal.Header> <Modal.Body> { console.log(selectedEvent) } <div> <p>Meeting ID: {selectedEvent.extendedProps.meetingId}</p> <p>Meeting Password: {selectedEvent.extendedProps.meetingPassword}</p> <p>Start Time: { // format time to current zone in hh:mm am/pm format new Date(selectedEvent.start).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }) } {currentZone} </p> <p>End Time: { // format time to current zone in hh:mm am/pm format new Date(selectedEvent.end).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }) } {currentZone}</p> <p>Meeting Description: {selectedEvent.title}</p> <div>Join Url: {selectedEvent.extendedProps.joinUrl}</div> </div> </Modal.Body> </Modal> ); } 问题是当我在下面的模式中输入日期或时间时，（通过设置状态）事件会被重新获取。事件函数只是从我的后端服务器获取数据源。我看到一篇文章使用 useMemo 来解决这个问题。然而，我对 React 和 Web 开发还很陌生，我无法理解它（React 状态更改后，Fullcalendar 重新获取事件）我该如何解决这个问题？根据您的信息，我了解到问题在于传递给 events 属性的函数。现在，您已经传递了信息，并从此开始获取开始日期和结束日期，因此每次更改时，都会重新创建该函数，并且将再次获取所有事件。您可以将函数从 events 属性移动到 useMemo 钩子内，并将信息作为解决方案的依赖项。

javascript reactjs fullcalendar

回答 1 投票 0

如何通过单击按钮在全日历中添加任何事件？

我在每一天/单元格上添加了（“+”）按钮。 var add_button = ''; $(".fc-day-number").prepend(add_button); 如何在单击此（“+”）后添加事件...

javascript jquery jsp fullcalendar

回答 1 投票 0

全日历编辑标题工具栏标题

我有一个简单的全日历，它在标题工具栏中有按钮问题是，如何更改这些按钮中的标题？假设不是月视图，而是月视图，而相反......

javascript jquery fullcalendar

回答 1 投票 0

反应资源中的全日历、可折叠事件

有什么方法可以使资源下的事件可折叠吗？就像我有一个父事件及其子事件一样，我希望它的子事件位于父事件下的下拉菜单中，就像我已经拥有资源一样...