react-fold-calendar
v1.1.1-SNAPSHOT-1731337212067
Published
react-fold-calendar provides a calendar that can be swiped by month/week. In particular, you can check the date by month/week by folding and unfolding the calendar.
Downloads
262
Maintainers
Readme
react-fold-calendar
react-fold-calendar
provides a calendar that can be swiped by month/week.
In particular, you can check the date by month/week by folding and unfolding the calendar.
options
exports file
| file | exports | description |
| -------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------- |
| ./module/reactFoldCalendar.js
| react-fold-calendar/module
| It can be used by importing it as a module type. |
| ./browser/reactFoldCalendar.js
| window.createReactFoldCalendar()
| After importing the browser.js file, you can call window.createReactFoldCalendar(). |
| ./css/reactFoldCalendar.css
| reactFoldCalendar.css
| You can customize the design of your choice with the example style file. |
example
module
import ReactFoldCalendar from "react-fold-calendar/module";
import "react-fold-calendar/css"; // css for reference
const App = () => {
return <ReactFoldCalendar
options={{
useInitWeekType: true,
useShowContent: true,
data: [
{
startDate: new Date("2024/11/06 10:00")?.getTime(),
endDate: new Date("2024/11/31 19:00")?.getTime(),
period: 1,
title: "Regular Event",
description: "This is a regular event in November.",
},
{
startDate: new Date("2024/11/15")?.getTime(),
endDate: new Date("2024/11/31")?.getTime(),
period: 3,
title: "3-day event",
description:
"This event is held every three days from 11/15 to 11/31.",
},
{
startDate: new Date("2024/11/18")?.getTime(),
endDate: new Date("2024/11/18")?.getTime(),
period: 0,
title: "one day event",
description: "The event is on November 18th.",
},
],
}}
/>;
}
browser
<div id="app-browser"></div>
<script src="./reactFoldCalendar.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
window.createReactFoldCalendar({
useInitWeekType: true,
useShowContent: true,
element: '#app-browser',
data: [
{ startDate: new Date('2024/10/01 10:00')?.getTime(), endDate: new Date('2024/10/31 19:00')?.getTime(), period: 1, title: '10월 이벤트', description: '10월 정기 이벤트 입니다.' },
{ startDate: new Date('2024/09/15')?.getTime(), endDate: new Date('2024/10/16')?.getTime(), period: 3, title: '9 ~ 10월 3일 이벤트', description: '9 ~ 10월 3일 단위 정기 이벤트 입니다.' },
{ startDate: new Date('2024/10/18')?.getTime(), endDate: new Date('2024/10/18')?.getTime(), period: 0, title: '10월 18일 이벤트', description: '반복 없은 10월 18일 이벤트입니다.' },
],
});
});
</script>
etc.
- l10n provides
ko
,en
.en
is the default, except when thehtml:lang
value isko
.