@kne/react-calendar 1.0.0

package/dist/index.modern.js

@@ -0,0 +1,1721 @@
+import { useState, useLayoutEffect, useMemo, useEffect, useCallback, useRef } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import useControlValue from '@kne/use-control-value';
+import { Popover, Space, Button, Badge, List, Tag, Card, Spin, Empty, Tooltip, Calendar } from 'antd';
+import { createWithIntlProvider, useIntl } from '@kne/react-intl';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import FormInfo, { Input, TextArea, Form, SubmitButton } from '@kne/form-info';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+const locale$1 = {
+  'Header.today': '今天',
+  'Header.prevMonth': '上一月',
+  'Header.nextMonth': '下一月',
+  'Header.prevYearPage': '上一组年份',
+  'Header.nextYearPage': '下一组年份',
+  'Header.yearLabel': '{year}年',
+  'Header.monthLabel': '{monthName}',
+  'Header.monthPickerItem': '{monthName}',
+  'PanelTitle.dateLabel': '{year}年{monthName}{day}日',
+  'PanelTitle.eventCount': '共 {count} 个日程',
+  'ViewPanel.empty': '暂无日程',
+  'SchedulePanel.selectFreeSlot': '选择空闲时间段',
+  'SchedulePanel.newSchedule': '新增日程：{range}',
+  'SchedulePanel.cancel': '取消',
+  'SchedulePanel.save': '保存',
+  'SlotItem.disabled': '不可选',
+  'SlotItem.occupied': '已占用',
+  'DefaultFormInner.title': '标题',
+  'DefaultFormInner.titlePlaceholder': '请输入日程标题',
+  'DefaultFormInner.detail': '详情',
+  'DefaultFormInner.detailPlaceholder': '请输入日程详情',
+  'Calendar.month.1': '1月',
+  'Calendar.month.2': '2月',
+  'Calendar.month.3': '3月',
+  'Calendar.month.4': '4月',
+  'Calendar.month.5': '5月',
+  'Calendar.month.6': '6月',
+  'Calendar.month.7': '7月',
+  'Calendar.month.8': '8月',
+  'Calendar.month.9': '9月',
+  'Calendar.month.10': '10月',
+  'Calendar.month.11': '11月',
+  'Calendar.month.12': '12月'
+};
+
+const locale = {
+  'Header.today': 'Today',
+  'Header.prevMonth': 'Previous month',
+  'Header.nextMonth': 'Next month',
+  'Header.prevYearPage': 'Previous years',
+  'Header.nextYearPage': 'Next years',
+  'Header.yearLabel': '{year}',
+  'Header.monthLabel': '{monthName}',
+  'Header.monthPickerItem': '{monthName}',
+  'PanelTitle.dateLabel': '{monthName} {day}, {year}',
+  'PanelTitle.eventCount': '{count} events',
+  'ViewPanel.empty': 'No events',
+  'SchedulePanel.selectFreeSlot': 'Select an available time slot',
+  'SchedulePanel.newSchedule': 'New event: {range}',
+  'SchedulePanel.cancel': 'Cancel',
+  'SchedulePanel.save': 'Save',
+  'SlotItem.disabled': 'Unavailable',
+  'SlotItem.occupied': 'Occupied',
+  'DefaultFormInner.title': 'Title',
+  'DefaultFormInner.titlePlaceholder': 'Enter event title',
+  'DefaultFormInner.detail': 'Details',
+  'DefaultFormInner.detailPlaceholder': 'Enter event details',
+  'Calendar.month.1': 'Jan',
+  'Calendar.month.2': 'Feb',
+  'Calendar.month.3': 'Mar',
+  'Calendar.month.4': 'Apr',
+  'Calendar.month.5': 'May',
+  'Calendar.month.6': 'Jun',
+  'Calendar.month.7': 'Jul',
+  'Calendar.month.8': 'Aug',
+  'Calendar.month.9': 'Sep',
+  'Calendar.month.10': 'Oct',
+  'Calendar.month.11': 'Nov',
+  'Calendar.month.12': 'Dec'
+};
+
+const withLocale = createWithIntlProvider({
+  defaultLocale: 'zh-CN',
+  messages: {
+    'zh-CN': locale$1,
+    'en-US': locale
+  },
+  namespace: 'react-calendar'
+});
+
+const DATE_FORMAT = 'YYYY-MM-DD';
+const TIME_FORMAT = 'HH:mm';
+/** Stack panels vertically when container width is below this value (px). */
+const LAYOUT_STACK_BREAKPOINT = 560;
+/** Minimum panel viewport height in stacked layout (px), aligned with root min-height. */
+const LAYOUT_MIN_HEIGHT = 560;
+
+const measureHeight = node => {
+  if (!node) {
+    return 0;
+  }
+  return Math.ceil(node.getBoundingClientRect().height);
+};
+const useStackedPanelLayout = (rootRef, calendarRef, stacked) => {
+  const [layoutStyle, setLayoutStyle] = useState(undefined);
+  useLayoutEffect(() => {
+    if (!stacked) {
+      setLayoutStyle(undefined);
+      return undefined;
+    }
+    const root = rootRef.current;
+    const calendar = calendarRef.current;
+    if (!root || !calendar) {
+      return undefined;
+    }
+    const update = () => {
+      const calendarHeight = measureHeight(calendar);
+      const panelViewportHeight = Math.max(calendarHeight, LAYOUT_MIN_HEIGHT);
+      const totalHeight = calendarHeight + panelViewportHeight;
+      setLayoutStyle({
+        height: totalHeight,
+        '--schedule-panel-top': `${calendarHeight}px`,
+        '--schedule-panel-height': `${panelViewportHeight}px`
+      });
+    };
+    update();
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', update);
+      return () => window.removeEventListener('resize', update);
+    }
+    const observer = new ResizeObserver(update);
+    observer.observe(calendar);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [calendarRef, rootRef, stacked]);
+  return layoutStyle;
+};
+
+const classNames = (...list) => list.flatMap(item => {
+  if (!item) {
+    return [];
+  }
+  if (typeof item === 'string') {
+    return [item];
+  }
+  return Object.keys(item).filter(key => item[key]);
+}).join(' ');
+const toDayjs = value => {
+  if (!value) {
+    return null;
+  }
+  const date = dayjs(value);
+  return date.isValid() ? date : null;
+};
+const parseDayTime = (date, time) => {
+  const day = toDayjs(date) || dayjs();
+  const parsed = dayjs(`${day.format(DATE_FORMAT)} ${time}`, `${DATE_FORMAT} ${TIME_FORMAT}`);
+  return parsed.isValid() ? parsed : day.startOf('day');
+};
+const formatRange = (start, end) => `${dayjs(start).format(TIME_FORMAT)} - ${dayjs(end).format(TIME_FORMAT)}`;
+const getDefaultFormValues = (defaultFormValues, ctx) => {
+  if (typeof defaultFormValues === 'function') {
+    return defaultFormValues(ctx);
+  }
+  return _extends({
+    title: '',
+    detail: ''
+  }, defaultFormValues || {});
+};
+const sortEventsByStart = events => [...(events || [])].sort((a, b) => {
+  var _toDayjs$valueOf, _toDayjs, _toDayjs$valueOf2, _toDayjs2;
+  const aStart = (_toDayjs$valueOf = (_toDayjs = toDayjs(a.start)) == null ? void 0 : _toDayjs.valueOf()) != null ? _toDayjs$valueOf : 0;
+  const bStart = (_toDayjs$valueOf2 = (_toDayjs2 = toDayjs(b.start)) == null ? void 0 : _toDayjs2.valueOf()) != null ? _toDayjs$valueOf2 : 0;
+  return aStart - bStart;
+});
+const dedupeEventsById = events => {
+  const map = new Map();
+  (events || []).forEach(event => {
+    map.set(event.id, event);
+  });
+  return [...map.values()];
+};
+const useControlledState = ({
+  value,
+  defaultValue,
+  onChange
+}) => {
+  const props = {};
+  if (typeof value !== 'undefined') {
+    props.value = value;
+  }
+  if (typeof defaultValue !== 'undefined') {
+    props.defaultValue = defaultValue;
+  }
+  if (onChange) {
+    props.onChange = onChange;
+  }
+  return useControlValue(props);
+};
+
+const getRuleDisabled = (result, defaultReason) => {
+  if (!result) {
+    return null;
+  }
+  if (typeof result === 'boolean') {
+    return result ? {
+      disabled: true,
+      reason: defaultReason
+    } : null;
+  }
+  if (result.disabled) {
+    return {
+      disabled: true,
+      reason: result.reason || defaultReason
+    };
+  }
+  return null;
+};
+const checkRule = ({
+  date,
+  slot,
+  mode,
+  disabledDate,
+  disabledDateTime,
+  availableDateTime
+}) => {
+  if (disabledDate != null && disabledDate(date.toDate())) {
+    return {
+      disabled: true
+    };
+  }
+  const ctx = _extends({
+    date: date.toDate(),
+    mode
+  }, slot ? {
+    slot: {
+      start: slot.start.toDate(),
+      end: slot.end.toDate()
+    }
+  } : {});
+  const disabledResult = getRuleDisabled(disabledDateTime == null ? void 0 : disabledDateTime(ctx));
+  if (disabledResult) {
+    return disabledResult;
+  }
+  if (availableDateTime && !availableDateTime(ctx)) {
+    return {
+      disabled: true
+    };
+  }
+  return null;
+};
+
+const normalizeEvent = event => {
+  const start = toDayjs(event.start || event.date);
+  const end = toDayjs(event.end || event.start || event.date);
+  return _extends({}, event, {
+    start,
+    end: end && start && !end.isAfter(start) ? start.add(1, 'minute') : end
+  });
+};
+const groupEventsByDate = events => {
+  return (events || []).reduce((result, event) => {
+    const normalized = normalizeEvent(event);
+    if (!normalized.start || !normalized.end) {
+      return result;
+    }
+    const startOfDay = normalized.start.startOf('day');
+    const endOfDay = normalized.end.startOf('day');
+    let current = startOfDay;
+    while (current.isBefore(endOfDay) || current.isSame(endOfDay, 'day')) {
+      const key = current.format(DATE_FORMAT);
+      result[key] = result[key] || [];
+      result[key].push(normalized);
+      current = current.add(1, 'day');
+    }
+    return result;
+  }, {});
+};
+const getOverlappingEvents = (slotStart, slotEnd, sortedEvents) => {
+  const matched = [];
+  for (const event of sortedEvents) {
+    if (!event.end.isAfter(slotStart)) {
+      continue;
+    }
+    if (!event.start.isBefore(slotEnd)) {
+      break;
+    }
+    matched.push(event);
+  }
+  return matched;
+};
+const generateTimeSlots = ({
+  date,
+  events,
+  timeUnit: _timeUnit = 30,
+  dayStart: _dayStart = '09:00',
+  dayEnd: _dayEnd = '18:00',
+  disabledDate,
+  disabledDateTime,
+  availableDateTime,
+  mode: _mode = 'schedule'
+}) => {
+  const selectedDate = toDayjs(date) || dayjs();
+  const startAt = parseDayTime(selectedDate, _dayStart);
+  const endAt = parseDayTime(selectedDate, _dayEnd);
+  if (!startAt.isBefore(endAt)) {
+    return [];
+  }
+  const normalizedEvents = (events || []).map(normalizeEvent).filter(event => event.start && event.end).sort((a, b) => a.start.valueOf() - b.start.valueOf());
+  const slots = [];
+  let current = startAt;
+  while (current.isBefore(endAt)) {
+    const slotStart = current;
+    const slotEnd = slotStart.add(_timeUnit, 'minute');
+    const matchedEvents = getOverlappingEvents(slotStart, slotEnd, normalizedEvents);
+    const baseSlot = {
+      key: `${slotStart.format(DATE_FORMAT)}-${slotStart.format(TIME_FORMAT)}`,
+      date: slotStart.format(DATE_FORMAT),
+      start: slotStart,
+      end: slotEnd
+    };
+    const ruleResult = checkRule({
+      date: selectedDate,
+      slot: baseSlot,
+      mode: _mode,
+      disabledDate,
+      disabledDateTime,
+      availableDateTime
+    });
+    slots.push(_extends({}, baseSlot, {
+      start: slotStart.toDate(),
+      end: slotEnd.toDate(),
+      status: ruleResult ? 'disabled' : matchedEvents.length > 0 ? 'occupied' : 'free',
+      disabledReason: ruleResult == null ? void 0 : ruleResult.reason,
+      events: matchedEvents
+    }));
+    current = slotEnd;
+  }
+  return slots;
+};
+
+const toDay = value => toDayjs(value) || dayjs();
+const getMonthName = (formatMessage, monthIndex) => formatMessage({
+  id: `Calendar.month.${monthIndex + 1}`
+});
+const getPanelDateLabel = (formatMessage, date) => {
+  const d = toDay(date);
+  const monthIndex = d.month();
+  return formatMessage({
+    id: 'PanelTitle.dateLabel'
+  }, {
+    year: d.year(),
+    month: monthIndex + 1,
+    day: d.date(),
+    monthName: getMonthName(formatMessage, monthIndex)
+  });
+};
+const getHeaderMonthLabel = (formatMessage, date) => {
+  const d = toDay(date);
+  const monthIndex = d.month();
+  return formatMessage({
+    id: 'Header.monthLabel'
+  }, {
+    month: monthIndex + 1,
+    monthName: getMonthName(formatMessage, monthIndex)
+  });
+};
+const getMonthPickerItemLabel = (formatMessage, value, monthIndex) => formatMessage({
+  id: 'Header.monthPickerItem'
+}, {
+  month: monthIndex + 1,
+  monthName: getMonthName(formatMessage, monthIndex)
+});
+
+var style$4 = {"calendar-header":"kne-react-calendar_X1TYG","calendar-title":"kne-react-calendar_FcQis","calendar-title-part":"kne-react-calendar_LcyYv","header-picker-popover":"kne-react-calendar_T4oWB","picker-panel":"kne-react-calendar_PMS-M","picker-panel-header":"kne-react-calendar_IXQKl","picker-panel-range":"kne-react-calendar_J-Pnh","picker-panel-nav":"kne-react-calendar_Wo74w","picker-panel-nav-icon":"kne-react-calendar_Rwzuj","picker-panel-grid":"kne-react-calendar_rxTOr","picker-cell":"kne-react-calendar_bHuh6","picker-cell-active":"kne-react-calendar_xOfrO","header-actions":"kne-react-calendar_OCJaK","header-today":"kne-react-calendar_SWVUG","header-nav":"kne-react-calendar_BOheC","header-nav-icon":"kne-react-calendar_8IEwS"};
+
+const HeaderNavIcon = ({
+  direction,
+  className
+}) => /*#__PURE__*/jsx("svg", {
+  className: className || style$4['header-nav-icon'],
+  viewBox: "0 0 16 16",
+  "aria-hidden": true,
+  focusable: "false",
+  children: /*#__PURE__*/jsx("path", {
+    d: direction === 'prev' ? 'M10 4 L6 8 L10 12' : 'M6 4 L10 8 L6 12',
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+});
+
+const YEAR_PAGE_SIZE = 12;
+const getYearPageStart = year => Math.floor(year / YEAR_PAGE_SIZE) * YEAR_PAGE_SIZE;
+
+const PickerPanelNav = ({
+  label,
+  onClick,
+  children
+}) => /*#__PURE__*/jsx("button", {
+  type: "button",
+  className: style$4['picker-panel-nav'],
+  "aria-label": label,
+  onClick: onClick,
+  children: children
+});
+const YearPickerPanel = ({
+  value,
+  pageStart,
+  onPageStartChange,
+  onSelect
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const years = useMemo(() => Array.from({
+    length: YEAR_PAGE_SIZE
+  }, (_, index) => pageStart + index), [pageStart]);
+  return /*#__PURE__*/jsxs("div", {
+    className: style$4['picker-panel'],
+    children: [/*#__PURE__*/jsxs("div", {
+      className: style$4['picker-panel-header'],
+      children: [/*#__PURE__*/jsx(PickerPanelNav, {
+        label: formatMessage({
+          id: 'Header.prevYearPage'
+        }),
+        onClick: () => onPageStartChange(pageStart - YEAR_PAGE_SIZE),
+        children: /*#__PURE__*/jsx(HeaderNavIcon, {
+          direction: "prev",
+          className: style$4['picker-panel-nav-icon']
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: style$4['picker-panel-range'],
+        children: [pageStart, "-", pageStart + YEAR_PAGE_SIZE - 1]
+      }), /*#__PURE__*/jsx(PickerPanelNav, {
+        label: formatMessage({
+          id: 'Header.nextYearPage'
+        }),
+        onClick: () => onPageStartChange(pageStart + YEAR_PAGE_SIZE),
+        children: /*#__PURE__*/jsx(HeaderNavIcon, {
+          direction: "next",
+          className: style$4['picker-panel-nav-icon']
+        })
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: style$4['picker-panel-grid'],
+      children: years.map(year => /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: classNames(style$4['picker-cell'], {
+          [style$4['picker-cell-active']]: year === value.year()
+        }),
+        onClick: () => onSelect(year),
+        children: year
+      }, year))
+    })]
+  });
+};
+
+const MonthPickerPanel = ({
+  value,
+  onSelect
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const months = useMemo(() => Array.from({
+    length: 12
+  }, (_, index) => index), []);
+  return /*#__PURE__*/jsx("div", {
+    className: style$4['picker-panel'],
+    children: /*#__PURE__*/jsx("div", {
+      className: style$4['picker-panel-grid'],
+      children: months.map(month => /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: classNames(style$4['picker-cell'], {
+          [style$4['picker-cell-active']]: month === value.month()
+        }),
+        onClick: () => onSelect(month),
+        children: getMonthPickerItemLabel(formatMessage, value, month)
+      }, month))
+    })
+  });
+};
+
+const HeaderNavButton = ({
+  label,
+  onClick,
+  children
+}) => /*#__PURE__*/jsx("button", {
+  type: "button",
+  className: style$4['header-nav'],
+  "aria-label": label,
+  onClick: onClick,
+  children: children
+});
+const Header = ({
+  current,
+  showTodayButton,
+  onCurrentChange,
+  onSelectToday
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const date = toDayjs(current) || dayjs();
+  const [yearOpen, setYearOpen] = useState(false);
+  const [monthOpen, setMonthOpen] = useState(false);
+  const [yearPageStart, setYearPageStart] = useState(() => getYearPageStart(date.year()));
+  const currentYear = date.year();
+  const yearText = formatMessage({
+    id: 'Header.yearLabel'
+  }, {
+    year: date.year()
+  });
+  const monthText = getHeaderMonthLabel(formatMessage, date);
+  useEffect(() => {
+    if (yearOpen) {
+      setYearPageStart(getYearPageStart(currentYear));
+    }
+  }, [yearOpen, currentYear]);
+  const handleYearSelect = year => {
+    onCurrentChange(date.year(year), {
+      source: 'picker'
+    });
+    setYearOpen(false);
+  };
+  const handleMonthSelect = month => {
+    onCurrentChange(date.month(month), {
+      source: 'picker'
+    });
+    setMonthOpen(false);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: style$4['calendar-header'],
+    children: [/*#__PURE__*/jsxs("div", {
+      className: style$4['calendar-title'],
+      children: [/*#__PURE__*/jsx(Popover, {
+        open: yearOpen,
+        onOpenChange: open => {
+          setYearOpen(open);
+          if (open) {
+            setMonthOpen(false);
+          }
+        },
+        trigger: "click",
+        placement: "bottomLeft",
+        rootClassName: style$4['header-picker-popover'],
+        content: /*#__PURE__*/jsx(YearPickerPanel, {
+          value: date,
+          pageStart: yearPageStart,
+          onPageStartChange: setYearPageStart,
+          onSelect: handleYearSelect
+        }),
+        children: /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: style$4['calendar-title-part'],
+          children: yearText
+        })
+      }), /*#__PURE__*/jsx(Popover, {
+        open: monthOpen,
+        onOpenChange: open => {
+          setMonthOpen(open);
+          if (open) {
+            setYearOpen(false);
+          }
+        },
+        trigger: "click",
+        placement: "bottomLeft",
+        rootClassName: style$4['header-picker-popover'],
+        content: /*#__PURE__*/jsx(MonthPickerPanel, {
+          value: date,
+          onSelect: handleMonthSelect
+        }),
+        children: /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: style$4['calendar-title-part'],
+          children: monthText
+        })
+      })]
+    }), /*#__PURE__*/jsxs(Space, {
+      size: 4,
+      className: style$4['header-actions'],
+      children: [showTodayButton ? /*#__PURE__*/jsx(Button, {
+        className: style$4['header-today'],
+        type: "text",
+        size: "small",
+        onClick: onSelectToday,
+        children: formatMessage({
+          id: 'Header.today'
+        })
+      }) : null, /*#__PURE__*/jsx(HeaderNavButton, {
+        label: formatMessage({
+          id: 'Header.prevMonth'
+        }),
+        onClick: () => onCurrentChange(date.subtract(1, 'month'), {
+          source: 'prevMonth'
+        }),
+        children: /*#__PURE__*/jsx(HeaderNavIcon, {
+          direction: "prev"
+        })
+      }), /*#__PURE__*/jsx(HeaderNavButton, {
+        label: formatMessage({
+          id: 'Header.nextMonth'
+        }),
+        onClick: () => onCurrentChange(date.add(1, 'month'), {
+          source: 'nextMonth'
+        }),
+        children: /*#__PURE__*/jsx(HeaderNavIcon, {
+          direction: "next"
+        })
+      })]
+    })]
+  });
+};
+
+const readWidth = node => {
+  if (!node) {
+    return 0;
+  }
+  return node.getBoundingClientRect().width;
+};
+const useStackedLayout = (ref, stackAt) => {
+  const [stacked, setStacked] = useState(false);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return;
+    }
+    setStacked(readWidth(node) < stackAt);
+  }, [ref, stackAt]);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return undefined;
+    }
+    const update = () => {
+      setStacked(readWidth(node) < stackAt);
+    };
+    update();
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', update);
+      return () => window.removeEventListener('resize', update);
+    }
+    const observer = new ResizeObserver(() => update());
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref, stackAt]);
+  return stacked;
+};
+
+var style$3 = {"date-cell":"kne-react-calendar_-a9AL","date-number":"kne-react-calendar_9s0kZ","date-has-events":"kne-react-calendar_-Bh5f","date-selected":"kne-react-calendar_Lpltl","date-muted":"kne-react-calendar_1xgRD","date-disabled":"kne-react-calendar_YTv16"};
+
+const DateCell = ({
+  date,
+  dayEvents,
+  selected,
+  currentMonth,
+  disabled,
+  badgeMaxCount,
+  renderDateCell
+}) => {
+  const count = dayEvents.length;
+  const customCell = renderDateCell == null ? void 0 : renderDateCell(date.toDate(), {
+    events: dayEvents,
+    selected,
+    currentMonth
+  });
+  if (customCell) {
+    return customCell;
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(style$3['date-cell'], {
+      [style$3['date-selected']]: selected,
+      [style$3['date-muted']]: !currentMonth && !selected,
+      [style$3['date-disabled']]: disabled && !selected,
+      [style$3['date-has-events']]: count > 0 && !selected
+    }),
+    children: [/*#__PURE__*/jsx("div", {
+      className: style$3['date-number'],
+      children: date.date()
+    }), count ? /*#__PURE__*/jsx(Badge, {
+      count: count > badgeMaxCount ? `${badgeMaxCount}+` : count,
+      size: "small"
+    }) : null]
+  });
+};
+
+const getEventTagLabel = event => {
+  if (!event.raw || typeof event.raw !== 'object') {
+    return null;
+  }
+  const {
+    label,
+    type
+  } = event.raw;
+  if (typeof label === 'string' && label) {
+    return label;
+  }
+  if (typeof type === 'string' && type) {
+    return type;
+  }
+  return null;
+};
+
+var style$2 = {"event-list-item":"kne-react-calendar_cGTpY","event-item":"kne-react-calendar_3gmHY","event-item-head":"kne-react-calendar_fa3Mn","event-item-tag":"kne-react-calendar_yALGf","event-item-time":"kne-react-calendar_1L-dA","event-item-title":"kne-react-calendar_ISKyA","event-item-detail":"kne-react-calendar_HzTU2","event-item-clickable":"kne-react-calendar_iiYOC","event-item-disabled":"kne-react-calendar_3sXqE"};
+
+const EventItem = ({
+  event,
+  date,
+  mode,
+  renderEventItem,
+  onEventClick
+}) => {
+  if (renderEventItem) {
+    return renderEventItem(event, {
+      date,
+      mode,
+      onEventClick
+    });
+  }
+  const clickable = !event.disabled && (typeof event.onClick === 'function' || typeof onEventClick === 'function');
+  const handleClick = () => {
+    if (typeof event.onClick === 'function') {
+      event.onClick(event, {
+        date,
+        mode
+      });
+      return;
+    }
+    onEventClick == null || onEventClick(event, {
+      date,
+      mode
+    });
+  };
+  const tagLabel = getEventTagLabel(event);
+  return /*#__PURE__*/jsx(List.Item, {
+    className: style$2['event-list-item'],
+    children: /*#__PURE__*/jsxs("div", {
+      className: classNames(style$2['event-item'], {
+        [style$2['event-item-clickable']]: clickable,
+        [style$2['event-item-disabled']]: event.disabled
+      }),
+      role: clickable ? 'button' : undefined,
+      tabIndex: clickable ? 0 : undefined,
+      onClick: clickable ? handleClick : undefined,
+      onKeyDown: clickable ? eventKey => {
+        if (eventKey.key === 'Enter' || eventKey.key === ' ') {
+          eventKey.preventDefault();
+          handleClick();
+        }
+      } : undefined,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: style$2['event-item-head'],
+        children: [/*#__PURE__*/jsx("div", {
+          className: style$2['event-item-title'],
+          children: event.title
+        }), tagLabel ? /*#__PURE__*/jsx(Tag, {
+          className: style$2['event-item-tag'],
+          color: event.color,
+          children: tagLabel
+        }) : null]
+      }), /*#__PURE__*/jsx("div", {
+        className: style$2['event-item-time'],
+        children: formatRange(event.start, event.end)
+      }), event.detail ? /*#__PURE__*/jsx("div", {
+        className: style$2['event-item-detail'],
+        children: event.detail
+      }) : null]
+    })
+  });
+};
+
+var panelStyle = {"panel-card":"kne-react-calendar_uQsUE","panel-scroll-body":"kne-react-calendar_ujAl5","panel-scroll-content":"kne-react-calendar_t2e0j","panel-spin":"kne-react-calendar_tLux2","panel-spin-container":"kne-react-calendar_iW4mn","panel-title":"kne-react-calendar_C6NB3","panel-scroll-shadow":"kne-react-calendar_3ecxf","panel-scroll-shadow-visible":"kne-react-calendar_TvxhV","detail-card":"kne-react-calendar_3sEou"};
+
+const PanelTitle = ({
+  date,
+  subtitle,
+  count
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const dateText = getPanelDateLabel(formatMessage, date);
+  const countText = typeof count === 'number' ? formatMessage({
+    id: 'PanelTitle.eventCount'
+  }, {
+    count
+  }) : null;
+  return /*#__PURE__*/jsxs("div", {
+    className: panelStyle['panel-title'],
+    children: [/*#__PURE__*/jsx("span", {
+      children: dateText
+    }), subtitle || countText ? /*#__PURE__*/jsx("span", {
+      children: subtitle || countText
+    }) : null]
+  });
+};
+
+const PanelScrollShadow = ({
+  visible
+}) => /*#__PURE__*/jsx("div", {
+  className: classNames(panelStyle['panel-scroll-shadow'], {
+    [panelStyle['panel-scroll-shadow-visible']]: visible
+  }),
+  "aria-hidden": true
+});
+
+const usePanelScrollShadow = (resetKey, scrollRef) => {
+  const [scrolled, setScrolled] = useState(false);
+  useEffect(() => {
+    if (scrollRef != null && scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+    setScrolled(false);
+  }, [resetKey, scrollRef]);
+  const onScroll = useCallback(event => {
+    setScrolled(event.currentTarget.scrollTop > 0);
+  }, []);
+  return {
+    scrolled,
+    onScroll
+  };
+};
+
+const ViewPanel = ({
+  date,
+  events,
+  loading,
+  renderEventItem,
+  renderPanelHeader,
+  onEventClick
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const sortedEvents = useMemo(() => sortEventsByStart(events), [events]);
+  const panelHeader = renderPanelHeader == null ? void 0 : renderPanelHeader({
+    date: date.toDate(),
+    mode: 'view',
+    events: sortedEvents
+  });
+  const scrollRef = useRef(null);
+  const {
+    scrolled,
+    onScroll
+  } = usePanelScrollShadow(date.format(DATE_FORMAT), scrollRef);
+  return /*#__PURE__*/jsx(Card, {
+    bordered: false,
+    title: panelHeader || /*#__PURE__*/jsx(PanelTitle, {
+      date: date,
+      count: sortedEvents.length
+    }),
+    className: panelStyle['panel-card'],
+    children: /*#__PURE__*/jsx(Spin, {
+      spinning: !!loading,
+      classNames: {
+        root: panelStyle['panel-spin'],
+        container: panelStyle['panel-spin-container']
+      },
+      children: /*#__PURE__*/jsxs("div", {
+        ref: scrollRef,
+        className: panelStyle['panel-scroll-body'],
+        onScroll: onScroll,
+        children: [/*#__PURE__*/jsx(PanelScrollShadow, {
+          visible: scrolled
+        }), /*#__PURE__*/jsx("div", {
+          className: panelStyle['panel-scroll-content'],
+          children: sortedEvents.length ? /*#__PURE__*/jsx(List, {
+            dataSource: sortedEvents,
+            renderItem: event => /*#__PURE__*/jsx(EventItem, {
+              event: event,
+              date: date.toDate(),
+              mode: "view",
+              renderEventItem: renderEventItem,
+              onEventClick: onEventClick
+            })
+          }) : /*#__PURE__*/jsx(Empty, {
+            description: formatMessage({
+              id: 'ViewPanel.empty'
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+
+const LONG_PRESS_DELAY = 360;
+const MOVE_THRESHOLD = 18;
+const getPopoverKey = slot => slot ? `form:${slot.key}` : null;
+const getSlotElementFromTouch = (container, touch) => {
+  const element = document.elementFromPoint(touch.clientX, touch.clientY);
+  const slotElement = element == null || element.closest == null ? void 0 : element.closest('[data-slot-index]');
+  if (!slotElement || !(container != null && container.contains(slotElement))) {
+    return null;
+  }
+  return slotElement;
+};
+const getTouchPoint = event => {
+  var _event$changedTouches, _event$touches;
+  return ((_event$changedTouches = event.changedTouches) == null ? void 0 : _event$changedTouches[0]) || ((_event$touches = event.touches) == null ? void 0 : _event$touches[0]);
+};
+const useScheduleSelectionGesture = ({
+  slots,
+  selectedSlots,
+  setSelectedSlots,
+  allowMultiSelect,
+  onSlotRangeChange,
+  onFreeSlotClick
+}) => {
+  var _selectedSlots;
+  const [dragging, setDragging] = useState(false);
+  const [activePopoverKey, setActivePopoverKey] = useState(null);
+  const slotsRef = useRef(null);
+  const draggingRef = useRef(false);
+  const dragStartIndexRef = useRef(null);
+  const longPressTimerRef = useRef(null);
+  const touchStateRef = useRef(null);
+  const slotsDataRef = useRef(slots);
+  const selectedSlotsRef = useRef(selectedSlots);
+  const suppressTriggerUntilRef = useRef(0);
+  slotsDataRef.current = slots;
+  selectedSlotsRef.current = selectedSlots;
+  const selectedKeys = useMemo(() => new Set(selectedSlots.map(slot => slot.key)), [selectedSlots]);
+  const selectedAnchorKey = (_selectedSlots = selectedSlots[selectedSlots.length - 1]) == null ? void 0 : _selectedSlots.key;
+  const formPopoverKey = selectedAnchorKey ? `form:${selectedAnchorKey}` : null;
+  const clearLongPress = useCallback(() => {
+    if (longPressTimerRef.current) {
+      window.clearTimeout(longPressTimerRef.current);
+      longPressTimerRef.current = null;
+    }
+  }, []);
+  const selectSlots = useCallback(nextSlots => {
+    selectedSlotsRef.current = nextSlots;
+    if (!nextSlots.length) {
+      setActivePopoverKey(null);
+    }
+    setSelectedSlots(nextSlots);
+    onSlotRangeChange == null || onSlotRangeChange(nextSlots, {
+      action: nextSlots.length ? 'select' : 'clear'
+    });
+  }, [onSlotRangeChange, setSelectedSlots]);
+  const getSelectableRange = useCallback((startIndex, endIndex) => {
+    const [start, end] = [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)];
+    return slotsDataRef.current.slice(start, end + 1).filter(slot => slot.status === 'free');
+  }, []);
+  const showFormPopoverForSlots = useCallback(slotsList => {
+    const anchorSlot = slotsList[slotsList.length - 1];
+    if (anchorSlot) {
+      setActivePopoverKey(getPopoverKey(anchorSlot));
+    }
+  }, []);
+  const startSlotSelection = useCallback((slot, index, {
+    showPopover: _showPopover = true
+  } = {}) => {
+    var _slotsRef$current;
+    setActivePopoverKey(getPopoverKey(slot));
+    draggingRef.current = true;
+    dragStartIndexRef.current = index;
+    (_slotsRef$current = slotsRef.current) == null || _slotsRef$current.classList.add('schedule-calendar-touch-dragging');
+    setDragging(true);
+    selectSlots([slot]);
+    if (!_showPopover) {
+      suppressTriggerUntilRef.current = Date.now() + 700;
+      setActivePopoverKey(null);
+    }
+    onFreeSlotClick == null || onFreeSlotClick(slot);
+  }, [onFreeSlotClick, selectSlots]);
+  const finishSelection = useCallback(({
+    fromTouch: _fromTouch = false
+  } = {}) => {
+    var _slotsRef$current2;
+    clearLongPress();
+    draggingRef.current = false;
+    dragStartIndexRef.current = null;
+    (_slotsRef$current2 = slotsRef.current) == null || _slotsRef$current2.classList.remove('schedule-calendar-touch-dragging');
+    setDragging(false);
+    if (selectedSlotsRef.current.length) {
+      if (_fromTouch) {
+        suppressTriggerUntilRef.current = Date.now() + 500;
+      }
+      showFormPopoverForSlots(selectedSlotsRef.current);
+    }
+  }, [clearLongPress, showFormPopoverForSlots]);
+  const updateSelectionRange = useCallback(index => {
+    const startIndex = dragStartIndexRef.current;
+    if (startIndex === null || !allowMultiSelect) {
+      return;
+    }
+    const nextSlots = getSelectableRange(startIndex, index);
+    selectSlots(nextSlots);
+  }, [allowMultiSelect, getSelectableRange, selectSlots]);
+  const handleMouseDown = useCallback((event, slot, index) => {
+    if (slot.status !== 'free') {
+      return;
+    }
+    event.preventDefault();
+    startSlotSelection(slot, index);
+  }, [startSlotSelection]);
+  const handleMouseEnter = useCallback(index => {
+    if (!draggingRef.current) {
+      return;
+    }
+    updateSelectionRange(index);
+  }, [updateSelectionRange]);
+  const handlePopoverOpenChange = useCallback((open, currentPopoverKey, {
+    isForm: _isForm = false
+  } = {}) => {
+    if (Date.now() < suppressTriggerUntilRef.current) {
+      return;
+    }
+    if (!open && _isForm) {
+      selectSlots([]);
+      return;
+    }
+    setActivePopoverKey(prevKey => {
+      if (open) {
+        return currentPopoverKey;
+      }
+      return prevKey === currentPopoverKey ? null : prevKey;
+    });
+  }, [selectSlots]);
+  useEffect(() => {
+    const container = slotsRef.current;
+    if (!container) {
+      return undefined;
+    }
+    const clearTouchState = () => {
+      clearLongPress();
+      if (!draggingRef.current) {
+        var _slotsRef$current3;
+        (_slotsRef$current3 = slotsRef.current) == null || _slotsRef$current3.classList.remove('schedule-calendar-touch-dragging');
+      }
+      touchStateRef.current = null;
+    };
+    const handleTouchStart = event => {
+      if (event.touches.length !== 1) {
+        return;
+      }
+      const touch = event.touches[0];
+      const slotElement = getSlotElementFromTouch(container, touch);
+      if (!slotElement) {
+        return;
+      }
+      const index = Number(slotElement.getAttribute('data-slot-index'));
+      const slot = slotsDataRef.current[index];
+      if (Number.isNaN(index) || (slot == null ? void 0 : slot.status) !== 'free') {
+        return;
+      }
+      clearTouchState();
+      touchStateRef.current = {
+        identifier: touch.identifier,
+        x: touch.clientX,
+        y: touch.clientY,
+        slot,
+        index,
+        moved: false,
+        longPressed: false,
+        active: false
+      };
+      longPressTimerRef.current = window.setTimeout(() => {
+        var _slotsRef$current4;
+        const touchState = touchStateRef.current;
+        if (!touchState) {
+          return;
+        }
+        touchState.longPressed = true;
+        touchState.active = true;
+        (_slotsRef$current4 = slotsRef.current) == null || _slotsRef$current4.classList.add('schedule-calendar-touch-dragging');
+        startSlotSelection(slot, index, {
+          showPopover: false
+        });
+        longPressTimerRef.current = null;
+      }, LONG_PRESS_DELAY);
+    };
+    const handleTouchMove = event => {
+      const touchState = touchStateRef.current;
+      if (!touchState) {
+        return;
+      }
+      const touch = Array.from(event.touches).find(item => item.identifier === touchState.identifier) || event.touches[0];
+      if (!touch) {
+        return;
+      }
+      if (!touchState.active) {
+        const moveX = Math.abs(touch.clientX - touchState.x);
+        const moveY = Math.abs(touch.clientY - touchState.y);
+        if (moveX > MOVE_THRESHOLD || moveY > MOVE_THRESHOLD) {
+          touchState.moved = true;
+          clearTouchState();
+        }
+        return;
+      }
+      event.preventDefault();
+      const slotElement = getSlotElementFromTouch(container, touch);
+      if (!slotElement) {
+        return;
+      }
+      const index = Number(slotElement.getAttribute('data-slot-index'));
+      if (!Number.isNaN(index)) {
+        updateSelectionRange(index);
+      }
+    };
+    const handleTouchEnd = event => {
+      const touchState = touchStateRef.current;
+      if (!touchState) {
+        return;
+      }
+      const touch = Array.from(event.changedTouches || []).find(item => item.identifier === touchState.identifier) || getTouchPoint(event);
+      if (!touch) {
+        clearTouchState();
+        return;
+      }
+      if (touchState.active) {
+        event.preventDefault();
+        suppressTriggerUntilRef.current = Date.now() + 500;
+        finishSelection({
+          fromTouch: true
+        });
+        touchStateRef.current = null;
+        return;
+      }
+      const quickTap = !touchState.longPressed && !touchState.moved;
+      clearTouchState();
+      if (quickTap) {
+        suppressTriggerUntilRef.current = Date.now() + 500;
+        selectSlots([touchState.slot]);
+        showFormPopoverForSlots([touchState.slot]);
+        onFreeSlotClick == null || onFreeSlotClick(touchState.slot);
+      }
+    };
+    const handleContextMenu = event => {
+      if (touchStateRef.current || draggingRef.current) {
+        event.preventDefault();
+      }
+    };
+    container.addEventListener('touchstart', handleTouchStart, {
+      passive: true
+    });
+    container.addEventListener('touchmove', handleTouchMove, {
+      passive: false
+    });
+    container.addEventListener('touchend', handleTouchEnd, {
+      passive: false
+    });
+    container.addEventListener('touchcancel', handleTouchEnd, {
+      passive: false
+    });
+    container.addEventListener('contextmenu', handleContextMenu);
+    return () => {
+      clearTouchState();
+      container.removeEventListener('touchstart', handleTouchStart);
+      container.removeEventListener('touchmove', handleTouchMove);
+      container.removeEventListener('touchend', handleTouchEnd);
+      container.removeEventListener('touchcancel', handleTouchEnd);
+      container.removeEventListener('contextmenu', handleContextMenu);
+    };
+  }, [clearLongPress, finishSelection, onFreeSlotClick, selectSlots, showFormPopoverForSlots, startSlotSelection, updateSelectionRange]);
+  return {
+    activePopoverKey,
+    dragging,
+    formPopoverKey,
+    selectedAnchorKey,
+    selectedKeys,
+    setActivePopoverKey,
+    selectSlots,
+    slotsRef,
+    finishSelection,
+    handleMouseDown,
+    handleMouseEnter,
+    handlePopoverOpenChange
+  };
+};
+
+const DefaultFormInner = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/jsx(FormInfo, {
+    column: 1,
+    list: [/*#__PURE__*/jsx(Input, {
+      name: "title",
+      label: formatMessage({
+        id: 'DefaultFormInner.title'
+      }),
+      rule: "REQ",
+      placeholder: formatMessage({
+        id: 'DefaultFormInner.titlePlaceholder'
+      }),
+      block: true
+    }), /*#__PURE__*/jsx(TextArea, {
+      name: "detail",
+      label: formatMessage({
+        id: 'DefaultFormInner.detail'
+      }),
+      placeholder: formatMessage({
+        id: 'DefaultFormInner.detailPlaceholder'
+      }),
+      block: true
+    })]
+  });
+};
+
+var style$1 = {"slots":"kne-react-calendar_Ftp-V","slots-content":"kne-react-calendar_ArIB7","slots-dragging":"kne-react-calendar_zOHks","slot-item":"kne-react-calendar_fkkFH","slot-dot":"kne-react-calendar_XjojI","slot-time":"kne-react-calendar_343hW","slot-title":"kne-react-calendar_mkuiI","slot-free":"kne-react-calendar_7kzzQ","slot-occupied":"kne-react-calendar_gdNm7","slot-disabled":"kne-react-calendar_2LDxX","slot-selected":"kne-react-calendar_TYAi6","slot-tag":"kne-react-calendar_-xuUf","form-popover":"kne-react-calendar_W-I5J","schedule-popover":"kne-react-calendar_rVLO8","form-popover-title":"kne-react-calendar_mMpFQ","slot-popover-content":"kne-react-calendar_xYptY","slot-popover-title":"kne-react-calendar_oagF-","form-actions":"kne-react-calendar_4NPv0"};
+
+const SlotEvents = ({
+  slot,
+  date,
+  onEventClick
+}) => /*#__PURE__*/jsx("div", {
+  className: style$1['slot-popover-content'],
+  children: /*#__PURE__*/jsx(List, {
+    size: "small",
+    dataSource: slot.events,
+    renderItem: event => /*#__PURE__*/jsx(EventItem, {
+      event: event,
+      date: date,
+      mode: "schedule",
+      onEventClick: onEventClick
+    })
+  })
+});
+
+const SlotItem = ({
+  slot,
+  date,
+  selected,
+  formPopover,
+  popoverOpen,
+  onPopoverOpenChange,
+  onContextMenu,
+  onMouseDown,
+  onPointerDown,
+  onMouseEnter,
+  onMouseUp,
+  onClick,
+  onEventClick,
+  renderTimeSlot,
+  renderOccupiedSlot
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const content = renderTimeSlot == null ? void 0 : renderTimeSlot(slot, {
+    selected
+  });
+  if (content) {
+    const customNode = /*#__PURE__*/jsx("div", {
+      "data-slot-index": slot.index,
+      onContextMenu: onContextMenu,
+      onMouseDown: onMouseDown,
+      onPointerDown: onPointerDown,
+      onMouseEnter: onMouseEnter,
+      onMouseUp: onMouseUp,
+      onClick: onClick,
+      children: content
+    });
+    if (formPopover) {
+      return /*#__PURE__*/jsx(Popover, {
+        rootClassName: style$1['schedule-popover'],
+        open: popoverOpen,
+        onOpenChange: onPopoverOpenChange,
+        content: formPopover,
+        trigger: "click",
+        placement: "bottom",
+        autoAdjustOverflow: true,
+        children: customNode
+      });
+    }
+    return customNode;
+  }
+  const wrapWithPopover = node => {
+    if (formPopover) {
+      return /*#__PURE__*/jsx(Popover, {
+        rootClassName: style$1['schedule-popover'],
+        open: popoverOpen,
+        onOpenChange: onPopoverOpenChange,
+        content: formPopover,
+        trigger: "click",
+        placement: "bottom",
+        autoAdjustOverflow: true,
+        children: node
+      });
+    }
+    if (slot.status === 'occupied') {
+      return /*#__PURE__*/jsx(Popover, {
+        rootClassName: style$1['schedule-popover'],
+        open: popoverOpen,
+        onOpenChange: onPopoverOpenChange,
+        content: /*#__PURE__*/jsx(SlotEvents, {
+          slot: slot,
+          date: date,
+          onEventClick: onEventClick
+        }),
+        trigger: "click",
+        placement: "bottom",
+        autoAdjustOverflow: true,
+        children: node
+      });
+    }
+    if (slot.disabledReason) {
+      return /*#__PURE__*/jsx(Tooltip, {
+        title: slot.disabledReason,
+        children: node
+      });
+    }
+    return node;
+  };
+  const inner = /*#__PURE__*/jsxs("button", {
+    type: "button",
+    className: classNames(style$1['slot-item'], style$1[`slot-${slot.status}`], {
+      [style$1['slot-selected']]: selected
+    }),
+    "data-slot-index": slot.index,
+    disabled: slot.status === 'disabled',
+    onContextMenu: onContextMenu,
+    onMouseDown: onMouseDown,
+    onPointerDown: onPointerDown,
+    onMouseEnter: onMouseEnter,
+    onMouseUp: onMouseUp,
+    onClick: onClick,
+    children: [/*#__PURE__*/jsx("span", {
+      className: style$1['slot-dot']
+    }), /*#__PURE__*/jsx("span", {
+      className: style$1['slot-time'],
+      children: formatRange(slot.start, slot.end)
+    }), slot.status === 'disabled' ? /*#__PURE__*/jsx(Tag, {
+      className: style$1['slot-tag'],
+      children: formatMessage({
+        id: 'SlotItem.disabled'
+      })
+    }) : null, slot.status === 'occupied' ? /*#__PURE__*/jsx(Tag, {
+      className: style$1['slot-tag'],
+      color: "red",
+      children: formatMessage({
+        id: 'SlotItem.occupied'
+      })
+    }) : null, slot.status === 'occupied' && renderOccupiedSlot ? renderOccupiedSlot(slot, {
+      events: slot.events
+    }) : null, slot.status === 'occupied' && !renderOccupiedSlot ? /*#__PURE__*/jsx("span", {
+      className: style$1['slot-title'],
+      children: slot.events.map(event => event.title).join('、')
+    }) : null]
+  });
+  return wrapWithPopover(inner);
+};
+
+const SchedulePanel = ({
+  date,
+  slots,
+  loading,
+  allowMultiSelect,
+  selectedSlots,
+  setSelectedSlots,
+  onSlotRangeChange,
+  onFreeSlotClick,
+  onCreate,
+  formInner,
+  formProps,
+  defaultFormValues,
+  renderTimeSlot,
+  renderOccupiedSlot,
+  renderPanelHeader,
+  onEventClick
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const events = useMemo(() => sortEventsByStart(dedupeEventsById(slots.flatMap(slot => slot.events || []))), [slots]);
+  const panelHeader = renderPanelHeader == null ? void 0 : renderPanelHeader({
+    date: date.toDate(),
+    mode: 'schedule',
+    events
+  });
+  const {
+    activePopoverKey,
+    dragging,
+    formPopoverKey,
+    selectedAnchorKey,
+    selectedKeys,
+    selectSlots,
+    slotsRef,
+    finishSelection,
+    handleMouseDown,
+    handleMouseEnter,
+    handlePopoverOpenChange
+  } = useScheduleSelectionGesture({
+    slots,
+    selectedSlots,
+    setSelectedSlots,
+    allowMultiSelect,
+    onSlotRangeChange,
+    onFreeSlotClick
+  });
+  const {
+    scrolled,
+    onScroll
+  } = usePanelScrollShadow(date.format(DATE_FORMAT), slotsRef);
+  const formContext = {
+    date: date.toDate(),
+    slots: selectedSlots
+  };
+  const formPopover = selectedSlots.length && !dragging ? /*#__PURE__*/jsxs("div", {
+    className: style$1['form-popover'],
+    children: [/*#__PURE__*/jsx("div", {
+      className: style$1['form-popover-title'],
+      children: formatMessage({
+        id: 'SchedulePanel.newSchedule'
+      }, {
+        range: formatRange(selectedSlots[0].start, selectedSlots[selectedSlots.length - 1].end)
+      })
+    }), /*#__PURE__*/jsxs(Form, _extends({}, formProps, {
+      data: getDefaultFormValues(defaultFormValues, formContext),
+      onSubmit: async values => {
+        try {
+          await (onCreate == null ? void 0 : onCreate(values, formContext));
+          selectSlots([]);
+        } catch (_unused) {
+          // Keep the form open when creation fails.
+        }
+      },
+      children: [formInner || /*#__PURE__*/jsx(DefaultFormInner, {}), /*#__PURE__*/jsxs("div", {
+        className: style$1['form-actions'],
+        children: [/*#__PURE__*/jsx(Button, {
+          onClick: () => selectSlots([]),
+          children: formatMessage({
+            id: 'SchedulePanel.cancel'
+          })
+        }), /*#__PURE__*/jsx(SubmitButton, {
+          children: formatMessage({
+            id: 'SchedulePanel.save'
+          })
+        })]
+      })]
+    }))]
+  }) : null;
+  return /*#__PURE__*/jsx(Card, {
+    bordered: false,
+    title: panelHeader || /*#__PURE__*/jsx(PanelTitle, {
+      date: date,
+      subtitle: formatMessage({
+        id: 'SchedulePanel.selectFreeSlot'
+      })
+    }),
+    className: panelStyle['panel-card'],
+    children: /*#__PURE__*/jsx(Spin, {
+      spinning: !!loading,
+      classNames: {
+        root: panelStyle['panel-spin'],
+        container: panelStyle['panel-spin-container']
+      },
+      children: /*#__PURE__*/jsxs("div", {
+        ref: slotsRef,
+        className: classNames(style$1['slots'], {
+          [style$1['slots-dragging']]: dragging
+        }),
+        onScroll: onScroll,
+        onMouseUp: () => finishSelection(),
+        onMouseLeave: () => finishSelection(),
+        children: [/*#__PURE__*/jsx(PanelScrollShadow, {
+          visible: scrolled
+        }), /*#__PURE__*/jsx("div", {
+          className: style$1['slots-content'],
+          children: slots.map((slot, index) => {
+            const slotWithIndex = _extends({}, slot, {
+              index
+            });
+            const occupiedPopoverKey = `occupied:${slot.key}`;
+            const currentPopoverKey = slot.key === selectedAnchorKey && formPopover ? formPopoverKey : slot.status === 'occupied' ? occupiedPopoverKey : null;
+            return /*#__PURE__*/jsx(SlotItem, {
+              slot: slotWithIndex,
+              date: date.toDate(),
+              selected: selectedKeys.has(slot.key),
+              formPopover: slot.key === selectedAnchorKey ? formPopover : null,
+              popoverOpen: !!currentPopoverKey && activePopoverKey === currentPopoverKey,
+              onPopoverOpenChange: open => handlePopoverOpenChange(open, currentPopoverKey, {
+                isForm: currentPopoverKey === formPopoverKey
+              }),
+              renderTimeSlot: renderTimeSlot,
+              renderOccupiedSlot: renderOccupiedSlot,
+              onEventClick: onEventClick,
+              onContextMenu: event => {
+                if (slot.status === 'free') {
+                  event.preventDefault();
+                }
+              },
+              onMouseDown: event => handleMouseDown(event, slot, index),
+              onMouseEnter: () => handleMouseEnter(index),
+              onMouseUp: () => finishSelection(),
+              onClick: undefined
+            }, slot.key);
+          })
+        })]
+      })
+    })
+  });
+};
+
+var style = {"schedule-calendar-shell":"kne-react-calendar_csu63","schedule-calendar":"kne-react-calendar_5p1TK","calendar-side":"kne-react-calendar_nd7DK","panel-side":"kne-react-calendar_rWvHE","schedule-calendar-stacked":"kne-react-calendar_zGXr5"};
+
+dayjs.extend(customParseFormat);
+const buildMonthRuleCache = ({
+  currentDate,
+  mode,
+  disabledDate,
+  disabledDateTime,
+  availableDateTime
+}) => {
+  const cache = new Map();
+  const monthStart = currentDate.startOf('month');
+  const monthEnd = currentDate.endOf('month');
+  let cursor = monthStart;
+  while (cursor.isBefore(monthEnd) || cursor.isSame(monthEnd, 'day')) {
+    cache.set(cursor.format(DATE_FORMAT), checkRule({
+      date: cursor,
+      mode,
+      disabledDate,
+      disabledDateTime,
+      availableDateTime
+    }));
+    cursor = cursor.add(1, 'day');
+  }
+  return cache;
+};
+const ScheduleCalendarInner = props => {
+  const {
+    mode = 'view',
+    events = [],
+    loading,
+    disabledDate,
+    disabledDateTime,
+    availableDateTime,
+    badgeMaxCount = 9,
+    timeUnit = 30,
+    dayStart = '09:00',
+    dayEnd = '18:00',
+    allowMultiSelect = mode === 'schedule',
+    renderDateCell,
+    renderEventItem,
+    renderTimeSlot,
+    renderOccupiedSlot,
+    renderPanelHeader,
+    formInner,
+    formProps,
+    defaultFormValues,
+    onDateChange,
+    onEventClick,
+    onFreeSlotClick,
+    onSlotRangeChange,
+    onCreate,
+    className,
+    style: propsStyle,
+    stackAt = LAYOUT_STACK_BREAKPOINT,
+    calendarProps,
+    panelProps
+  } = props;
+  const rootRef = useRef(null);
+  const calendarRef = useRef(null);
+  const stacked = useStackedLayout(rootRef, stackAt);
+  const stackedLayoutStyle = useStackedPanelLayout(rootRef, calendarRef, stacked);
+  const [value, setValue] = useControlValue(props);
+  const selectedDate = useMemo(() => toDayjs(value) || dayjs(), [value]);
+  const [current, setCurrent] = useControlledState({
+    value: props.current,
+    defaultValue: props.defaultCurrent || selectedDate,
+    onChange: props.onCurrentChange
+  });
+  const currentDate = useMemo(() => toDayjs(current) || selectedDate, [current, selectedDate]);
+  const [selectedSlots, setSelectedSlots] = useState([]);
+  const eventGroup = useMemo(() => groupEventsByDate(events), [events]);
+  const selectedEvents = useMemo(() => eventGroup[selectedDate.format(DATE_FORMAT)] || [], [eventGroup, selectedDate]);
+  const ruleContext = useMemo(() => ({
+    mode,
+    disabledDate,
+    disabledDateTime,
+    availableDateTime
+  }), [availableDateTime, disabledDate, disabledDateTime, mode]);
+  const monthRuleCache = useMemo(() => buildMonthRuleCache(_extends({
+    currentDate
+  }, ruleContext)), [currentDate, ruleContext]);
+  const getDateRule = useCallback(date => {
+    const cached = monthRuleCache.get(date.format(DATE_FORMAT));
+    if (cached !== undefined) {
+      return cached;
+    }
+    return checkRule(_extends({
+      date
+    }, ruleContext));
+  }, [monthRuleCache, ruleContext]);
+  const slots = useMemo(() => generateTimeSlots({
+    date: selectedDate,
+    events: selectedEvents,
+    timeUnit,
+    dayStart,
+    dayEnd,
+    disabledDate,
+    disabledDateTime,
+    availableDateTime,
+    mode
+  }), [availableDateTime, dayEnd, dayStart, disabledDate, disabledDateTime, mode, selectedDate, selectedEvents, timeUnit]);
+  const handleSelectDate = (date, info) => {
+    const nextDate = date.startOf('day').toDate();
+    setValue(nextDate, info);
+    onDateChange == null || onDateChange(nextDate, info);
+    setSelectedSlots([]);
+  };
+  const handleCurrentChange = (date, info) => {
+    setCurrent(date.startOf('month').toDate(), info);
+  };
+  const handleGoToday = () => {
+    const today = dayjs().startOf('day');
+    if (getDateRule(today)) {
+      return;
+    }
+    handleSelectDate(today, {
+      source: 'today'
+    });
+    handleCurrentChange(today, {
+      source: 'today'
+    });
+  };
+  const fullCellRender = date => {
+    const key = date.format(DATE_FORMAT);
+    const dayEvents = eventGroup[key] || [];
+    const disabled = !!getDateRule(date);
+    return /*#__PURE__*/jsx(DateCell, {
+      date: date,
+      dayEvents: dayEvents,
+      selected: date.isSame(selectedDate, 'day'),
+      currentMonth: date.isSame(currentDate, 'month'),
+      disabled: disabled,
+      badgeMaxCount: badgeMaxCount,
+      renderDateCell: renderDateCell
+    });
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: style['schedule-calendar-shell'],
+    style: propsStyle,
+    children: /*#__PURE__*/jsxs("div", {
+      ref: rootRef,
+      className: classNames(style['schedule-calendar'], stacked && style['schedule-calendar-stacked'], className),
+      "data-schedule-layout": stacked ? 'stacked' : 'row',
+      style: stacked ? stackedLayoutStyle : undefined,
+      children: [/*#__PURE__*/jsx("div", {
+        ref: calendarRef,
+        className: style['calendar-side'],
+        children: /*#__PURE__*/jsx(Calendar, _extends({}, calendarProps, {
+          fullscreen: false,
+          value: currentDate,
+          headerRender: () => {
+            const today = dayjs().startOf('day');
+            const todayDisabled = !!getDateRule(today);
+            return /*#__PURE__*/jsx(Header, {
+              current: currentDate,
+              showTodayButton: !todayDisabled && (!selectedDate.isSame(today, 'day') || !currentDate.isSame(today, 'month')),
+              onCurrentChange: handleCurrentChange,
+              onSelectToday: handleGoToday
+            });
+          },
+          fullCellRender: fullCellRender,
+          disabledDate: date => !!getDateRule(date),
+          onSelect: date => {
+            if (getDateRule(date)) {
+              return;
+            }
+            handleSelectDate(date, {
+              source: 'date'
+            });
+          },
+          onPanelChange: date => handleCurrentChange(date, {
+            source: 'picker'
+          })
+        }))
+      }), /*#__PURE__*/jsx("div", _extends({
+        className: style['panel-side']
+      }, panelProps, {
+        children: mode === 'schedule' ? /*#__PURE__*/jsx(SchedulePanel, {
+          date: selectedDate,
+          slots: slots,
+          loading: loading,
+          allowMultiSelect: allowMultiSelect,
+          selectedSlots: selectedSlots,
+          setSelectedSlots: setSelectedSlots,
+          onSlotRangeChange: onSlotRangeChange,
+          onFreeSlotClick: onFreeSlotClick,
+          onCreate: onCreate,
+          formInner: formInner,
+          formProps: formProps,
+          defaultFormValues: defaultFormValues,
+          renderTimeSlot: renderTimeSlot,
+          renderOccupiedSlot: renderOccupiedSlot,
+          renderPanelHeader: renderPanelHeader,
+          onEventClick: onEventClick
+        }) : /*#__PURE__*/jsx(ViewPanel, {
+          date: selectedDate,
+          events: selectedEvents,
+          loading: loading,
+          renderEventItem: renderEventItem,
+          renderPanelHeader: renderPanelHeader,
+          onEventClick: onEventClick
+        })
+      }))]
+    })
+  });
+};
+const ScheduleCalendar = withLocale(ScheduleCalendarInner);
+
+export { ScheduleCalendar as ReactCalendar, ScheduleCalendar, dedupeEventsById, ScheduleCalendar as default, generateTimeSlots, groupEventsByDate, normalizeEvent, sortEventsByStart };
+//# sourceMappingURL=index.modern.js.map