繁体   English   中英

FullCalendar 重复事件

FullCalendar duplication events

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我是一个有遗留项目的大三学生(

我们有一个包含 fullCalendar 组件的页面。 里面有很多事件监听器。 如果我们在 eventDragStart 上更改任何 state,我们会在将事件拖动到 eventChange 的另一个位置时得到一个重复的 animation 事件。 如果我们摆脱在 eventDragStart 上更改任何 state,那么一切都可以。 在重新加载页面后的第一种情况下,我们有正确的事件位置。 我怎样才能摆脱这种重复?

import './Schedule.css';
import SmartSelect from '../../Root/Components/SmartSelect';
import PeopleList from '../Containers/PeopleList';
import SessionModal from '../Containers/SessionModal';
import FunkFullCalendar from '../../Root/Components/FunkFullCalendar';
import moment from 'moment-timezone';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ISO_DATE_WITHOUT_TIME } from '../../constants';
import BinModal from '../Containers/BinModal';
import localizer from '../../localizer';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { setInterval, loadSessions, changeTime } from '../Actions/ScheduleActions';
import { openSessionById, openNewSession } from '../Actions/SessionModalActions';
import { datesToKey, extractName } from '../../helpers';

const Schedule = () => {
    const dispatch = useDispatch();
    const history = useHistory();
    const [showBin, setShowBin] = useState(false);

     {/* <> ... </> */}
    const room = useSelector((state) => state.schedule.selectedRoom);
    const startDate = useSelector(
        (state) =>
            state.schedule.calendarStartDate &&
            moment(state.schedule.calendarStartDate).tz(selectedStudio?.timeZoneName)?.format(ISO_DATE_WITHOUT_TIME)
    );
    const endDate = useSelector(
        (state) =>
            state.schedule.calendarEndDate &&
            moment(state.schedule.calendarEndDate).tz(selectedStudio?.timeZoneName)?.format(ISO_DATE_WITHOUT_TIME)
    );

    let key = datesToKey(startDate, endDate);
    const _sessions = useSelector((state) => state.schedule.sessions[key] || []);
    const persons = useSelector((state) => state.schedule?.actors);
    const sessions = _sessions?.map((session) => {
        let title = session.actorIds
            ?.map((w) => {
                let personName = persons.find((person) => person.id === w);
                if (!personName) return '';
                return extractName(personName);
            })
            .join('; ');
        return {
            title: title,
            start: moment(session.start).tz(selectedStudio?.timeZoneName).format(),
            end: moment(session.end).tz(selectedStudio?.timeZoneName).format(),
            id: session.id,
        };
    });

    const changeInterval = (startDate, endDate) => {
        dispatch(loadSessions(room, startDate, endDate));
        dispatch(setInterval(startDate, endDate));
        if (room) {
            history.push('/schedule/' + room + '/week/' + moment(startDate).tz(timeZone).format(ISO_DATE_WITHOUT_TIME));
        }
    };
    const openSession = (id) => {
        dispatch(openSessionById(id));
    };

    const changeSessionTime = (sessionId, start, due) => {
        dispatch(changeTime(sessionId, start, due));
    };
    const createSession = (startDate, actorId) => {
        dispatch(openNewSession(startDate, actorId));
    };

    const handleDragStart = () => setShowBin(true);
    const handleDragEnd = () => setShowBin(false);

    return (
        <div className="sch-container">
            <div className="tpl-header">
                 {/* <> ... </> */}
            </div>
            <div className="sch-calendar-layout">
                <div className="sch-calendar-container">
                    <FunkFullCalendar
                        next={() => {
                            let newStartDate = moment(startDate).tz(timeZone, true).startOf('week').add(1, 'week');
                            let newEndDate = moment(newStartDate).endOf('week');
                            changeInterval(newStartDate.toISOString(), newEndDate.toISOString());
                        }}
                        prev={() => {
                            let newStartDate = moment(startDate).tz(timeZone, true).subtract(1, 'week');
                            let newEndDate = moment(newStartDate).endOf('week');
                            changeInterval(newStartDate.toISOString(), newEndDate.toISOString());
                        }}
                        today={() => {
                            let startDate = moment().tz(timeZone, true).startOf('week');
                            let endDate = moment().tz(timeZone, true).endOf('week');
                            changeInterval(startDate.toISOString(), endDate.toISOString());
                        }}
                        timeGridWeek={() => {
                            setView('timeGridWeek');
                        }}
                        allDaySlot={false}
                        defaultView={'timeGridWeek'}
                        view={view}
                        events={sessions}
                        eventDragStart={handleDragStart}
                        eventDragStop={handleDragEnd}
                        dateClick={(evt) => {
                            let correctedDate = moment(evt.date).utc().tz(timeZone, true);
                            createSession(correctedDate);
                        }}
                        drop={(evt) => {
                            let correctedDate = moment(evt.date).utc().tz(timeZone, true);
                            createSession(correctedDate, evt.draggedEl.dataset.actorid);
                        }}
                        eventClick={(evt) => {
                            openSession(evt.event.id);
                        }}
                        eventChange={(evt) => {
                            let correctedStart = moment(evt.event.start).utc().tz(timeZone, true);
                            let correctedEnd = moment(evt.event.end).utc().tz(timeZone, true);
                            changeSessionTime(evt.event.id, correctedStart, correctedEnd);
                        }}
                        startDate={startDate}
                        endDate={endDate}
                        eventTimeFormat={{
                            hour: '2-digit',
                            minute: '2-digit',
                            meridiem: false,
                            hour12: false,
                        }}
                        dateFormat={dateFormat}
                        timeZone={timeZone}
                        timeZoneParam={timeZone}
                        timeZoneOffsetName={timeZoneOffset}
                        language={language}
                    />
                </div>
                {showBin ? (
                    <div className="sch-actors-list trash-panel">
                        {localizer.getString('interface:dragHeretoCancelSession', language)}
                    </div>
                ) : (
                    <div className="sch-actors-list">
                      {/* <> ... </> */}
                    </div>
                )}
            </div>
        </div>
    );
};

export default Schedule;

这是日历组件

import { useEffect, useState, useRef, useCallback } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridWeek from '@fullcalendar/timegrid';
// import momentPlugin from '@fullcalendar/moment'
import interactionPlugin from '@fullcalendar/interaction';
import './FullCalendarWraper.css';
import moment from 'moment-timezone';
import { ISO_DATE_WITHOUT_TIME } from '../../constants';
import { useSelector } from 'react-redux';

const FunkFullCalendar = (props) => {
    const calendar = useRef();
    const calendarRef = useRef();
    const sessions = useSelector((state) => state.schedule.sessions);

    const findEvents = useCallback(
        (events, sessions, status, color, drop) => {
            const result = [];
            let filteredSessions = Object.values(sessions)
                .flat()
                .filter((session) => session.status === status);
            filteredSessions.map((session) => {
                events.forEach((event) => {
                    if (event.id === session.id) {
                        result.push(event);
                    }
                });
            });
            return result.flat().map((x) => ({ ...x, color: color, droppable: drop }));
        },
        [sessions, props.events]
    );
    calendarRef.current = findEvents(props.events, sessions, 'Scheduled', '#3788D8', true).concat(
        findEvents(props.events, sessions, 'Completed', '#c0a65e', false)
    );

    const startDate = moment(props.startDate).isValid() ? props.startDate : moment().startOf('week').toISOString();
    const [calendarState, setCalendarState] = useState({
        view: 'timeGridWeek',
        startDate: startDate,
        timeZone: props.timeZone,
        events: [],
        language: props.language,
    });

    useEffect(() => {
        let unsubscribe = false;
        if (!unsubscribe) {
            setCalendarDate(props.startDate);
        }
        return () => {
            unsubscribe = true;
        };
    }, []);

    const setCalendarDate = (date) => {
        if (calendar.current) {
            let newDate = moment(date).isValid ? moment(date) : moment();
            let localDate = moment(newDate.format(ISO_DATE_WITHOUT_TIME)).utc(true);
            calendar?.current?.getApi().gotoDate(localDate.toISOString());
        }
    };

    if (props?.startDate !== calendarState.startDate || props.timeZone !== calendarState.timeZone) {
        if (props.startDate) {
            setCalendarState({ ...calendarState, startDate: props.startDate, timeZone: props.timeZone });
            setCalendarDate(props.startDate);
        }
    }
    return (
        <div className="fcw-container">
            <div className="fcw-inline-buttons">
            {/* <>...</> */}
            </div>
            <div className="fcw-calendar-parent">
                <FullCalendar
                    height="100%"
                    initialView={props.defaultView}
                    firstDay={1}
                    headerToolbar={false}
                    plugins={[dayGridPlugin, timeGridWeek, interactionPlugin]}
                    eventTextColor="white"
                    droppable
                    editable
                    events={calendarRef.current}
                    ref={calendar}
                    allDaySlot={false}
                    eventTimeFormat={props.eventTimeFormat}
                    locale={props.dateFormat}
                    timeZone={props.timeZone}
                    timeZoneParam={props.timeZone}
                    eventDragStart={props.eventDragStart}
                    eventDragStop={props.eventDragStop}
                    dateClick={(d) => {
                        props.dateClick(d);
                    }}
                    drop={(evt) => {
                        if (props.drop) props.drop(evt);
                    }}
                    eventClick={(evt) => {
                        props.eventClick(evt);
                    }}
                    eventChange={(e) => {
                        props.eventChange(e);
                    }}
                />
            </div>
        </div>
    );
};

export default FunkFullCalendar;

更改时间 function

export function changeTime(sessionId, startDate, dueDate) {
    return async function (dispatch, getState) {
        let diff = moment(dueDate).diff(moment(startDate));
        let duration = moment.duration(diff);
        let deltaDays = duration.days();
        let deltaHours = duration.hours();
        let deltaMinutes = duration.minutes();
        const state = getState();
        // const sessions = ;
        const selectedSession = Object.values(state.schedule.sessions)
            .flat()
            .find((session) => session.id === sessionId);
        if (selectedSession.status === 'Completed') {
            dispatch(createNotification('change_time_error', 'notification:cantRescheduleCompletedSession', 'ERROR', 5000));
        } else {
            if (deltaDays > 0 || deltaHours > 6 || (deltaHours === 6 && deltaMinutes > 0)) {
                dueDate = moment(startDate).add(6, 'hours');
            }
            try {
                let result = await post(Connections.backend + SESSIONS_URL + '/' + sessionId + '/reschedule', {
                    start: startDate.toISOString(),
                    end: dueDate.toISOString(),
                });
            } catch (e) {
                dispatch(createNotification('change_time_error', e.message, 'ERROR', 5000));
            } finally {
                dispatch(
                    loadSessions(state.schedule.selectedRoom, state.schedule.calendarStartDate, state.schedule.calendarEndDate)
                );
            }
        }
    };
}```
问题暂未有回复.您可以查看右边的相关问题.
1 如何避免全日历重复事件?

我试图避免使用完整日历在同一天发生事件重复。 我有一个名为“阻止”的事件,如果特定日期已经有一个阻止事件,则不允许用户添加另一个事件。 我的问题是,如何获取客户端特定日期的事件列表? 这是我的代码: }); ...

2 FullCalendar中的活动

您好,我正在使用带有FullCalendar插件的“月视图”显示事件。 当一天中安排了超过3/4个事件时,则该单元格的高度会增加,以显示所有事件,并且生成的渲染不像您期望的那样友好。 有没有一种方法可以修改该单元格渲染,例如,它仅显示几个事件,然后显示一个“更多...”超链接,该超链 ...

3 APN订阅事件重复

我正在使用node-apn NodeJS 8发送推式通知。但是我看到推式发送一次,但事件订阅多次触发。 取决于推送发送的次数,它看起来像ti每次少显示1行。 这是2条通知的输出: 对于3个通知,看起来像这样: 与4、5等推计数类似。 这是我用来复制它的示例代码(令牌 ...

5 如何更新FullCalendar事件

我试图建立一个FullCalendar应用程序,以更新新创建的日历事件。 我在Codepen上找到了一个使用eventClick回调来简化此操作的演示。 但是,我不明白为什么jsEvent参数似乎不包含在此回调中,而为什么该参数包含在函数标头中。 是否有必要写出jsEvent: 还 ...

6 为没有活动的全天着色

我在我的PHP应用程序中使用fullCalendar,我可以将颜色更改为有事件的那一天的绿色,但是我想将颜色更改为那些无事件的那一天的红色。 那么有什么办法可以做到这一点? 我写这样的东西将颜色更改为绿色: ...

2017-02-15 12:08:03 1 267   jquery
7 全日历onclick时隙事件

使用Fullcalendar jQuery插件,单击任何时隙时是否可以显示带有时隙的警报(例如,“您好,您在2014年4月10日-1-2 pm点击了”)? ...

8 jQuery fullcalendar不显示事件

我很高兴看到日历日历插件,例如fullcalendar。 我正在尝试使用fullcalendar来显示每个月的事件。 但是事件未显示在日历上。 我的代码是: 至于我的JSON,它看起来像: 您怎么看错了? ...

9 FullCalendar 事件颜色

我有一个日历,除此之外我还有一个框,我可以在其中放置事件值(客户、理发师、服务,然后我选择一种颜色)。 加载值后,会生成一个元素,我可以选择该元素并将其拖到日历中。 以下情况发生在我身上: 当我创建一个事件并将其拖到日历时,它会以我配置的颜色放置。 如果我单击保存按钮,它会正确加载到数据库中 ...

10 定期刷新fullcalendar中的事件

在arshaw完整日历的文档中,我找到了我认为的方法,我需要使用: .fullCalendar( 'refetchEvents' )但是因为我完全不熟悉JavaScript,所以我没有关于如何使用这个函数的计划。 我想知道一种简单的方法,让日历从事件源重新加载事件并定期重新呈现它们(例如每 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM