-
Goal:
I want to Implement a Mobi Scroll Plugin with Eventsconst onEventCreate = Retool.useEventCallback({ name: "onEventCreate" });
-
Steps:
When I use const onEventCreate = Retool.useEventCallback({ name: "onEventCreate" });
in React, And i will open settings in
- Details:
import React from 'react'
import { type FC } from 'react'
import { useMemo } from 'react';
import { Retool } from '@tryretool/custom-component-support'
import { Eventcalendar, setOptions, localeDe, MbscEventcalendarView, createCustomTheme } from '@mobiscroll/react'
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
import './mobiscroll.react.min.css';
import tr from '@mobiscroll/react/dist/src/i18n/tr'
setOptions({
locale: localeDe,
theme: 'myadvisori',
themeVariant: 'light'
});
export const PlanceOverview: FC = () => {
const myView: MbscEventcalendarView = useMemo(
() => ({
timeline: {
type: 'month',
},
}),
,
);
const [Resources , _setResources] = Retool.useStateArray({
name: 'resources',
initialValue: ,
description: 'Resources for the calendar'
});
const [Events , _setEvents] = Retool.useStateArray({
name: 'events',
initialValue: ,
description: 'Events for the calendar'
});
const [Holidays , _setHolidays] = Retool.useStateArray({
name: 'hoildays',
initialValue: ,
description: 'Holidays for the calendar'
});
const [CurrentDate , _setCurrentDate] = Retool.useStateString({
name: 'currentDate',
initialValue: '',
description: 'CurrentDate for the calendar'
});
const onEventCreate = Retool.useEventCallback({ name: "onEventCreate" });
console.log(onEventCreate);
// const onEventDelete = Retool.useEventCallback({ name: "onEventDelete" });
return (
<div style={{ height: "calc(100% - 10px)" }}>
<Eventcalendar
invalid={Holidays}
clickToCreate={true}
dragToCreate={true}
dragToMove={false}
dragToResize={false}
eventDelete={true}
view={myView}
data={Events}
resources={Resources}
selectedDate={CurrentDate}
showToday={false}
/>
</div>
)
}
-
Screenshots:
