fullcalendar 相关问题

尝试在 FullCalendar 上显示单个事件从“svelte”导入{onMount}；进口 { 日历，输入EventApi，输入 EventDropA...</desc> <question vote="0"> <p>尝试在 FullCalendar 上显示单个事件</p> <pre><code><script lang="ts"> import { onMount } from "svelte"; import { Calendar, type EventApi, type EventDropArg, } from "@fullcalendar/core"; import interactionPlugin, { type EventResizeDoneArg, } from "@fullcalendar/interaction"; import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid"; import luxon2Plugin from "@fullcalendar/luxon2"; import scrollGridPlugin from "@fullcalendar/scrollgrid"; import { millisecondsToTime } from "../utils/time"; // Import other necessary plugins and styles if needed import { createEventDispatcher } from "svelte"; import { CalendarEvent, type SelectionInfo } from "../types/event"; import { roundTo } from "../utils/common"; import type { CalendarResource } from "../types/calendar"; export let resources: CalendarResource[]; let calendar: Calendar; let dragging = false; let resizing = false; let events = []; const dispatch = createEventDispatcher(); const eventContent = (arg: EventApi): { html: string } => { let htm = CalendarEvent.fromEventApi(arg.event).innerHTML; console.log(htm); return { // @ts-ignore html: htm, }; }; const fetchResources = ( _fetchInfo: any, successCallback: any, _failureCallback: any ) => { resources = [ { id: 1, title: "monday", businessHours: [ { startTime: "00:00", endTime: "23:00", daysOfWeek: [0, 2, 3], }, ], }, { id: 2, title: "tuesday", businessHours: [ { startTime: "00:00", endTime: "23:00", daysOfWeek: [0, 2, 3], }, ], }, ]; successCallback(resources); }; const eventDragStart = () => { dragging = true; }; const eventDragStop = () => (dragging = false); const eventDrop = (eventInfo: EventDropArg) => { const { event, newResource, revert } = eventInfo; saveEvent(event); dispatch("eventDrop", { id: +event.id, updateData: { happeningOn: event.start?.toISOString(), }, revert, }); }; const eventResizeStart = () => (resizing = true); const eventResizeStop = () => (resizing = false); const eventResize = (eventInfo: EventResizeDoneArg) => { const { event, revert } = eventInfo; const startDate: Date = event.start || new Date(); const endDate: Date = event.end || new Date(); const duration = millisecondsToTime( roundTo(endDate.getTime() - startDate.getTime(), 90000) ); dispatch("eventResize", { id: +event.id, updateData: { duration, happeningOn: startDate.toISOString(), }, revert, }); }; const select = (selectionInfo: SelectionInfo) => { const { start, end, resource } = selectionInfo; const { id, title } = resource?._resource || {}; const newEvent = { resource: { id, title, }, start, end, }; saveEvent(newEvent); dispatch("eventSelect", { start, end, resource: { id, title, }, }); }; const saveEvent = (event: any) => { // Retrieve existing events from local storage const existingEvents = JSON.parse( localStorage.getItem("calendarEvents") || "[]" ); // Add the new event to the existing events existingEvents.push(event); // Save the updated events array to local storage localStorage.setItem("calendarEvents", JSON.stringify(existingEvents)); }; onMount(() => { // Set your New Zealand timezone const nzTimeZone = "Pacific/Auckland"; // Initialize the calendar calendar = new Calendar(document.getElementById("calendar")!, { locale: "en", timeZone: nzTimeZone, plugins: [ interactionPlugin, luxon2Plugin, resourceTimeGridPlugin, resourceTimeGridPlugin, scrollGridPlugin, ], initialView: "resourceTimeGridWeek", headerToolbar: { start: "today,prev,next", center: "title", end: "resourceTimeGridWeek,resourceTimeGridDay", }, scrollTime: null, selectable: true, selectMirror: true, selectOverlap: false, unselectAuto: false, allDaySlot: false, slotDuration: "00:30", snapDuration: "02:30", dayMinWidth: 120, slotLabelFormat: { hour: "2-digit", minute: "2-digit", omitZeroMinute: false, meridiem: "short", }, editable: true, resourceOrder: "title", resources: fetchResources, // Event handlers datesSet: handleDates, events: fetchEvents, eventContent, eventClick, eventDragStart, eventDragStop, eventDrop, eventResizeStart, eventResizeStop, eventResize, select, eventAllow: (dropInfo, draggedEvent) => { return true; }, }); calendar.render(); calendar.refetchEvents(); }); function handleDates(arg: any) { // Handle dates set event console.log("Dates set:", arg); } // Other event handling functions... const destroyEvents = () => { if (events) events.forEach((event: CalendarEvent) => event.destroy()); }; function fetchEvents( _info: any, successCallback: (events: any[]) => void, _failureCallback: any ) { // Hardcoded event data const eventsData = [ { id: 1, title: "Hardcoded Event", start: "2023-11-29T06:15:00", }, ]; // return eventsData; // Call the successCallback with the hardcoded event data successCallback(eventsData); } function eventClick(arg: any) { // Handle event click console.log("Event clicked:", arg); } const renderCalendar = () => { if (calendar) calendar.refetchResources(); }; $: { if (resources) // update calendar every time resources change renderCalendar(); } </script> <div id="calendar"></div> </code></pre> <p>由于某种原因，该事件似乎已到达日历，因为它不允许我拖动时间，但该事件并未显示。此外，当我将控制台日志放入 eventContent 时，不会记录任何内容，但是当我拖动日历来创建事件时，它会记录日志。我不确定事件在哪里丢失。或者是否可能是由于插件所致。</p> </question> <answer tick="false" vote="0"> <p>由于您使用 <a href="https://fullcalendar.io/docs/vertical-resource-view" rel="nofollow noreferrer">resourceTimeGridWeek</a> 作为默认视图（这是一个资源感知视图），因此您将看不到已添加的事件，因为您没有为其指定与中的资源之一匹配的 <pre><code>resourceId</code></pre>日历。因此，fullCalendar 不知道在哪里显示它 - 该视图没有用于不属于资源的事件的区域。</p> <p>例如你可以写：</p> <pre><code>const eventsData = [ { id: 1, title: "Hardcoded Event", start: "2023-11-29T06:15:00", resourceId: 1 }, ]; </code></pre> <p>请参阅 <a href="https://fullcalendar.io/docs/resources-and-events" rel="nofollow noreferrer">https://fullcalendar.io/docs/resources-and-events</a> 了解更多信息</p> </answer> </body></html>

fullcalendar svelte

回答 0 投票 0

有没有办法修改事件输出而不是使用 eventContent 完全重新构建它？

在 fullCalendar v3 中，带有 HTML 实体的内容在浏览器中正确呈现。对于 fullCalendar v6，它按原样显示： https://codepen.io/brianhogg/pen/LYqBaWz?editors=001 虽然我已经...

javascript html fullcalendar fullcalendar-6

回答 1 投票 0

添加/删除事件源 FullCalendar

我希望能够根据添加和删除事件源来过滤事件。我找不到这样做的好例子。 .fullCalendar( 'addEventSource', 源 ) .fullCalendar( '

fullcalendar

回答 3 投票 0

fullcalendar 为我的日期选择添加了 1 天

我遇到了日历问题。我使用 FullCalendar 来选择日期范围。例如，当我选择 11/20/23 到 11/22/23 时。 Fullcalendar 又增加了 1 天（参见屏幕）。这就是我

javascript symfony fullcalendar momentjs flatpickr

回答 1 投票 0

完整日历字体大小

我在将日历字体大小设置得较小时遇到问题。我已经更改了容器div字体大小的设置，没有效果。我还将 fullCalender.css 字体从 1em 更改为 0.5em ...

jquery fonts size fullcalendar font-size

回答 7 投票 0

只需在全日历中单击两次即可打开模式

我正在使用 fullcalendar 创建日历，如下面的代码所示： document.addEventListener('DOMContentLoaded', function() { if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera...

javascript html fullcalendar

回答 1 投票 0

如何让FullCalendar vue3组件刷新？

我正在将 FullCalendar vue3 组件与 Laravel Breeze/Vue 一起使用，但我无法在需要时刷新日历。我希望日历在选择元素更改后刷新...

javascript vue.js fullcalendar laravel-vue

回答 1 投票 0

如何禁用全日历中的日期（按日期）？

我在javascript中使用当前最新的fullcaldendar.io（v6.1.4）库。我可以在月视图中按日期范围（开始日期到停止日期）禁用天数（灰色）。我的问题：我如何禁用特定的...

fullcalendar fullcalendar-6

回答 1 投票 0

在完整日历水平视图上设置滚动条位置

我们正在使用完整的日历时间视图，更具体地说是时间线视图。它工作得很好，但是有一个问题非常令人沮丧，那就是当您访问年视图和 scro 时......