Inside a modal
When working with the event calendar you will usually want to show an add/edit form in a popup rather than render it directly into the page markup. Simply configure the popup and add your form fields to it.
Interested in add/edit screens for events? Check out this example of a fully functional event form →
Demo
const [isOpen, setOpen] = React.useState(false);
const [anchor, setAnchor] = React.useState(null);
const onBtnClick = React.useCallback((args) => {
setAnchor(args.target);
setOpen(true);
}, []);
<Button onClick={onBtnClick}>Show modal</Button>
<Popup
display="anchored"
buttons={['set', 'cancel']}
>
<div className="mbsc-form-group">
<Input label="Title" />
<Textarea label="Description" />
</div>
<div className="mbsc-form-group">
<Switch label="All-day" />
<Input label="Starts" />
<Input label="Ends" />
<SegmentedGroup>
<SegmentedItem value="busy" defaultChecked={true}>Show as busy</SegmentedItem>
<SegmentedItem value="free">Show as free</SegmentedItem>
</SegmentedGroup>
</div>
</Popup>
JSXTSX
import { Button, Input, Page, Popup, Segmented, SegmentedGroup, setOptions, Switch, Textarea } from '@mobiscroll/react';
import { useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const popupButtons = ['set', 'cancel'];
const responsivePopup = {
medium: {
display: 'anchored',
width: 400,
fullScreen: false,
touchUi: false,
},
};
function App() {
const [isOpen, setOpen] = useState(false);
const [anchor, setAnchor] = useState(null);
const handleBtnClick = useCallback((args) => {
setAnchor(args.target);
setOpen(true);
}, []);
const handlePopupClose = useCallback(() => {
setOpen(false);
}, []);
return (
<Page>
<Button onClick={handleBtnClick}>Show modal</Button>
<Popup
display="anchored"
contentPadding={false}
anchor={anchor}
buttons={popupButtons}
isOpen={isOpen}
responsive={responsivePopup}
onClose={handlePopupClose}
>
<div className="mbsc-form-group">
<Input label="Title" />
<Textarea label="Description" />
</div>
<div className="mbsc-form-group">
<Switch label="All-day" />
<Input label="Starts" />
<Input label="Ends" />
<SegmentedGroup>
<Segmented value="busy" defaultChecked={true}>
Show as busy
</Segmented>
<Segmented value="free">Show as free</Segmented>
</SegmentedGroup>
</div>
</Popup>
</Page>
);
}
export default App;
import {
Button,
Input,
MbscPopupOptions,
MbscResponsiveOptions,
Page,
Popup,
Segmented,
SegmentedGroup,
setOptions,
Switch,
Textarea ,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const popupButtons = ['set', 'cancel'];
const responsivePopup: MbscResponsiveOptions<MbscPopupOptions> = {
medium: {
display: 'anchored',
width: 400,
fullScreen: false,
touchUi: false,
},
};
const App: FC = () => {
const [anchor, setAnchor] = useState<HTMLElement>();
const [isOpen, setOpen] = useState<boolean>(false);
const handleBtnClick = useCallback((args: ChangeEvent<HTMLInputElement>) => {
setAnchor(args.target);
setOpen(true);
}, []);
const handlePopupClose = useCallback(() => {
setOpen(false);
}, []);
return (
<Page>
<Button onClick={handleBtnClick}>Show modal</Button>
<Popup
display="anchored"
contentPadding={false}
anchor={anchor}
buttons={popupButtons}
isOpen={isOpen}
responsive={responsivePopup}
onClose={handlePopupClose}
>
<div className="mbsc-form-group">
<Input label="Title" />
<Textarea label="Description" />
</div>
<div className="mbsc-form-group">
<Switch label="All-day" />
<Input label="Starts" />
<Input label="Ends" />
<SegmentedGroup>
<Segmented value="busy" defaultChecked={true}>
Show as busy
</Segmented>
<Segmented value="free">Show as free</Segmented>
</SegmentedGroup>
</div>
</Popup>
</Page>
);
};
export default App;