+
🍞📅 TOAST UI Calendar + React.js
+
+
+
+
+
+
+
+ {selectedDateRangeText}
+
+
${
+ schedule.title
+ }`;
+ },
+ milestoneTitle() {
+ return 'Milestone';
+ },
+ allday(schedule) {
+ return `${schedule.title}`;
+ },
+ alldayTitle() {
+ return 'All Day';
+ }
+ }}
+ theme={myTheme}
+ timezones={[
+ {
+ timezoneOffset: 540,
+ displayLabel: 'GMT+09:00',
+ tooltip: 'Seoul'
+ },
+ {
+ timezoneOffset: -420,
+ displayLabel: 'GMT-08:00',
+ tooltip: 'Los Angeles'
+ }
+ ]}
+ useDetailPopup
+ useCreationPopup
+ view={selectedView}
+ week={{
+ showTimezoneCollapseButton: true,
+ timezonesCollapsed: false
+ }}
+ ref={calendarRef}
+ onAfterRenderSchedule={onAfterRenderSchedule}
+ onBeforeDeleteSchedule={onBeforeDeleteSchedule}
+ onClickDayname={onClickDayName}
+ onClickSchedule={onClickSchedule}
+ onClickTimezonesCollapseBtn={onClickTimezonesCollapseBtn}
+ onBeforeUpdateSchedule={onBeforeUpdateSchedule}
+ onBeforeCreateSchedule={onBeforeCreateSchedule}
+ />
+
+ );
+}
+
+export default {
+ title: 'Wrapper Examples',
+ component: Calendar
+};
+
+export const WithClassComponent = (args) =>