@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/input/calendar/index.js

@@ -0,0 +1,566 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmCalendar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _material = require("@mui/material");
+var _lodash = require("lodash");
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _core = require("@fullcalendar/core");
+var _daygrid = _interopRequireDefault(require("@fullcalendar/daygrid"));
+var _timegrid = _interopRequireDefault(require("@fullcalendar/timegrid"));
+var _list = _interopRequireDefault(require("@fullcalendar/list"));
+var _interaction = _interopRequireDefault(require("@fullcalendar/interaction"));
+var _googleCalendar = _interopRequireDefault(require("@fullcalendar/google-calendar"));
+var _moment = _interopRequireDefault(require("@fullcalendar/moment"));
+var _utils = require("./utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var WmCalendar = exports.WmCalendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$hidden;
+  var name = props.name,
+    dataset = props.dataset,
+    datavalue = props.datavalue,
+    _props$eventtitle = props.eventtitle,
+    eventtitle = _props$eventtitle === void 0 ? "title" : _props$eventtitle,
+    _props$eventstart = props.eventstart,
+    eventstart = _props$eventstart === void 0 ? "start" : _props$eventstart,
+    _props$eventend = props.eventend,
+    eventend = _props$eventend === void 0 ? "end" : _props$eventend,
+    _props$eventallday = props.eventallday,
+    eventallday = _props$eventallday === void 0 ? "allday" : _props$eventallday,
+    _props$eventclass = props.eventclass,
+    eventclass = _props$eventclass === void 0 ? "className" : _props$eventclass,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    _props$controls = props.controls,
+    controls = _props$controls === void 0 ? "navigation, today, year, month, week, day" : _props$controls,
+    _props$calendartype = props.calendartype,
+    calendartype = _props$calendartype === void 0 ? "basic" : _props$calendartype,
+    _props$view = props.view,
+    view = _props$view === void 0 ? "month" : _props$view,
+    _props$selectionmode = props.selectionmode,
+    selectionmode = _props$selectionmode === void 0 ? "none" : _props$selectionmode,
+    _props$show = props.show,
+    show = _props$show === void 0 ? true : _props$show,
+    height = props.height,
+    width = props.width,
+    onSelect = props.onSelect,
+    onBeforerender = props.onBeforerender,
+    onEventdrop = props.onEventdrop,
+    onEventresize = props.onEventresize,
+    onEventclick = props.onEventclick,
+    onEventrender = props.onEventrender,
+    onViewrender = props.onViewrender,
+    onDateclick = props.onDateclick,
+    listener = props.listener;
+  var calendarRef = (0, _react.useRef)(null);
+  var calendarInstanceRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    selectedDateRange = _useState[0],
+    setSelectedDateRange = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    selectedEventsInRange = _useState2[0],
+    setSelectedEventsInRange = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    currentView = _useState3[0],
+    setCurrentView = _useState3[1];
+  var _useState4 = (0, _react.useState)({
+      events: []
+    }),
+    dataSetEvents = _useState4[0],
+    setDataSetEvents = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    calendarReady = _useState5[0],
+    setCalendarReady = _useState5[1];
+  var updateCalendarHeaderOptions = (0, _react.useCallback)(function () {
+    if (!calendarInstanceRef.current) return;
+    var ctrls = controls;
+    var viewType = calendartype;
+    var regEx = new RegExp("\\bday\\b", "g");
+    var left = "";
+    var right = "";
+    if (ctrls && viewType) {
+      if ((0, _lodash.includes)(ctrls, "navigation")) {
+        left += " prev next";
+      }
+      if ((0, _lodash.includes)(ctrls, "today")) {
+        left += " today";
+      }
+      if ((0, _lodash.includes)(ctrls, "year")) {
+        right += viewType === _utils.VIEW_TYPES.LIST ? "listYear" : "";
+      }
+      if ((0, _lodash.includes)(ctrls, "month")) {
+        right += viewType === _utils.VIEW_TYPES.LIST ? " listMonth" : " dayGridMonth";
+      }
+      if ((0, _lodash.includes)(ctrls, "week")) {
+        right += viewType === _utils.VIEW_TYPES.BASIC ? " dayGridWeek" : viewType === _utils.VIEW_TYPES.LIST ? " listWeek" : " timeGridWeek";
+      }
+      if (regEx.test(ctrls)) {
+        right += viewType === _utils.VIEW_TYPES.BASIC ? " dayGridDay" : viewType === _utils.VIEW_TYPES.LIST ? " listDay" : " timeGridDay";
+      }
+      if (left.charAt(0) === " ") {
+        left = left.substring(1);
+      }
+      if (right.charAt(0) === " ") {
+        right = right.substring(1);
+      }
+      calendarInstanceRef.current.setOption("headerToolbar", _objectSpread(_objectSpread({}, calendarInstanceRef.current.getOption("headerToolbar")), {}, {
+        start: left,
+        end: right
+      }));
+    }
+  }, [calendartype, controls]);
+  var invokeCallback = (0, _react.useCallback)(function (eventName, eventData) {
+    var $start = eventData.$start,
+      $end = eventData.$end,
+      $view = eventData.$view,
+      $data = eventData.$data,
+      $event = eventData.$event,
+      $newData = eventData.$newData,
+      $oldData = eventData.$oldData,
+      $delta = eventData.$delta,
+      $revertFunc = eventData.$revertFunc,
+      $ui = eventData.$ui;
+    switch (eventName) {
+      case "select":
+        onSelect === null || onSelect === void 0 || onSelect($start, $end, $view, $data);
+        break;
+      case "beforerender":
+        onBeforerender === null || onBeforerender === void 0 || onBeforerender(eventData, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+        break;
+      case "eventdrop":
+        onEventdrop === null || onEventdrop === void 0 || onEventdrop($event, $newData, $oldData, $delta, $revertFunc, $ui, $view);
+        break;
+      case "eventresize":
+        onEventresize === null || onEventresize === void 0 || onEventresize($event, $newData, $oldData, $delta, $revertFunc, $ui, $view);
+        break;
+      case "eventclick":
+        onEventclick === null || onEventclick === void 0 || onEventclick($event, $data, $view);
+        break;
+      case "eventrender":
+        onEventrender === null || onEventrender === void 0 || onEventrender($event, $data, $view);
+        break;
+      case "viewrender":
+        onViewrender === null || onViewrender === void 0 || onViewrender(eventData.$view);
+        break;
+      case "dateclick":
+        onDateclick === null || onDateclick === void 0 || onDateclick(eventData.$dateInfo);
+        break;
+    }
+  }, [onSelect, onBeforerender, onEventdrop, onEventresize, onEventclick, onEventrender, onViewrender, onDateclick]);
+  var calendarHeight = (0, _react.useMemo)(function () {
+    return (0, _utils.calculateHeight)(height);
+  }, [height]);
+  var calendarOptions = (0, _react.useMemo)(function () {
+    var computedHeight = calendarHeight;
+    var eventLimit = Math.floor(computedHeight / 200) + 1;
+    return {
+      calendar: {
+        height: computedHeight,
+        plugins: [_daygrid["default"], _timegrid["default"], _interaction["default"], _list["default"], _googleCalendar["default"], _moment["default"]],
+        editable: true,
+        locale: (0, _utils.getSessionLocale)(),
+        selectable: selectionmode !== _utils.SELECTION_MODES.NONE,
+        longPressDelay: 1000,
+        headerToolbar: _utils.defaultHeaderOptions,
+        nextDayThreshold: _utils.NEXT_DAY_THRESHOLD.START,
+        eventSources: [dataSetEvents],
+        views: {
+          month: {
+            dayMaxEvents: eventLimit,
+            dayMaxEventRows: true
+          }
+        },
+        unselectAuto: false,
+        initialView: (0, _utils.getViewType)(view, calendartype),
+        selectConstraint: selectionmode === _utils.SELECTION_MODES.SINGLE ? {
+          startTime: "00:00",
+          endTime: "24:00"
+        } : {},
+        selectAllow: selectionmode === _utils.SELECTION_MODES.MULTIPLE ? function () {
+          return true;
+        } : undefined,
+        buttonText: {
+          year: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_YEAR", _utils.BUTTON_TEXT.YEAR),
+          month: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_MONTH", _utils.BUTTON_TEXT.MONTH),
+          week: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_WEEK", _utils.BUTTON_TEXT.WEEK),
+          day: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_DAY", _utils.BUTTON_TEXT.DAY),
+          today: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_TODAY", _utils.BUTTON_TEXT.TODAY),
+          listYear: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_YEAR", _utils.BUTTON_TEXT.YEAR),
+          listMonth: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_MONTH", _utils.BUTTON_TEXT.MONTH),
+          listWeek: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_WEEK", _utils.BUTTON_TEXT.WEEK),
+          listDay: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_DAY", _utils.BUTTON_TEXT.DAY)
+        }
+      }
+    };
+  }, [calendartype, selectionmode, view, dataSetEvents, calendarHeight, _utils.getViewType]);
+  var eventHandlers = (0, _react.useMemo)(function () {
+    return {
+      eventDrop: function eventDrop(eventDropInfo) {
+        var newDataObj = (0, _utils.convertEventObjForOldAndNewData)(eventDropInfo.event);
+        var oldDataObj = (0, _utils.convertEventObjForOldAndNewData)(eventDropInfo.oldEvent);
+        invokeCallback("eventdrop", {
+          $event: eventDropInfo.jsEvent,
+          $newData: newDataObj,
+          $oldData: oldDataObj,
+          $delta: eventDropInfo.delta,
+          $revertFunc: eventDropInfo.revert,
+          $ui: {},
+          $view: eventDropInfo.view
+        });
+      },
+      eventResize: function eventResize(eventResizeInfo) {
+        var newDataObj = (0, _utils.convertEventObjForOldAndNewData)(eventResizeInfo.event);
+        var oldDataObj = (0, _utils.convertEventObjForOldAndNewData)(eventResizeInfo.oldEvent);
+        invokeCallback("eventresize", {
+          $event: eventResizeInfo.jsEvent,
+          $newData: newDataObj,
+          $oldData: oldDataObj,
+          $delta: eventResizeInfo.delta,
+          $revertFunc: eventResizeInfo.revert,
+          $ui: {},
+          $view: eventResizeInfo.view
+        });
+      },
+      eventClick: function eventClick(eventClickInfo) {
+        var eventObj = (0, _utils.convertEventObj)(eventClickInfo.event);
+        invokeCallback("eventclick", {
+          $event: eventClickInfo.jsEvent,
+          $data: eventObj,
+          $view: eventClickInfo.view
+        });
+      },
+      select: function select(selectionInfo) {
+        var selectDates = {
+          start: (0, _utils.getUTCDateTime)(selectionInfo.start),
+          end: (0, _utils.getUTCDateTime)(selectionInfo.end)
+        };
+        var filteredData = (0, _utils.filterEventsByDateRange)(dataset, selectionInfo.start, selectionInfo.end, eventstart, eventend);
+        setSelectedDateRange(selectDates);
+        setSelectedEventsInRange(filteredData);
+        invokeCallback("select", {
+          $start: selectionInfo.start.valueOf(),
+          $end: selectionInfo.end.valueOf(),
+          $view: selectionInfo.view,
+          $data: filteredData
+        });
+      },
+      eventDidMount: function eventDidMount(event) {
+        var eventObj = (0, _utils.convertEventObj)(event.event);
+        setTimeout(function () {
+          if (calendartype === _utils.VIEW_TYPES.LIST) {
+            var fcListTable = document.querySelector(".fc-list-table");
+            if (fcListTable && !fcListTable.classList.contains("table")) {
+              fcListTable.classList.add("table");
+            }
+          }
+        }, 0);
+        invokeCallback("eventrender", {
+          $event: event.el,
+          $data: eventObj,
+          $view: event.view
+        });
+      },
+      viewDidMount: function viewDidMount(viewInfo) {
+        setTimeout(function () {
+          if (calendartype === _utils.VIEW_TYPES.LIST) {
+            var fcListTable = document.querySelector(".fc-list-table");
+            if (fcListTable && !fcListTable.classList.contains("table")) {
+              fcListTable.classList.add("table");
+            }
+          }
+        }, 0);
+        if (calendarInstanceRef.current) {
+          renderEventDataSet();
+        }
+        if (onViewrender) {
+          onViewrender(viewInfo);
+        }
+      },
+      datesSet: function datesSet(data) {
+        setCurrentView({
+          start: (0, _momentTimezone["default"])(data.start).format("YYYY-MM-DD"),
+          end: (0, _momentTimezone["default"])(data.end).format("YYYY-MM-DD")
+        });
+      },
+      dateClick: function dateClick(info) {
+        var dateInfo = (0, _utils.getUTCDateTime)(info.date).valueOf();
+        invokeCallback("dateclick", {
+          $dateInfo: dateInfo
+        });
+      }
+    };
+  }, [calendartype, invokeCallback, _utils.convertEventObj, _utils.convertEventObjForOldAndNewData, _utils.filterEventsByDateRange]);
+  (0, _react.useEffect)(function () {
+    if (!dataset) {
+      setDataSetEvents({
+        events: []
+      });
+      return;
+    }
+    var dataSet;
+    if (Array.isArray(dataset)) {
+      dataSet = dataset;
+    } else if (dataset.data && Array.isArray(dataset.data)) {
+      dataSet = dataset.data;
+    } else if ((0, _typeof2["default"])(dataset) === "object") {
+      dataSet = [dataset]; // Handle single object as array
+    } else {
+      dataSet = [];
+    }
+    var processedDataSet = (0, _utils.constructCalendarDataset)((0, _toConsumableArray2["default"])(dataSet), eventtitle, eventallday, eventstart, eventend, eventclass);
+    var filteredEvents = processedDataSet.filter(function (event) {
+      event.start = event.start || event.end;
+      return !!event.start;
+    });
+    setDataSetEvents({
+      events: filteredEvents
+    });
+    if (calendarInstanceRef.current) {
+      renderEventDataSet(filteredEvents);
+    }
+  }, [dataset, _utils.constructCalendarDataset]);
+  (0, _react.useEffect)(function () {
+    if (calendarInstanceRef.current) {
+      updateCalendarHeaderOptions();
+    }
+  }, [controls, calendartype, updateCalendarHeaderOptions]);
+  (0, _react.useEffect)(function () {
+    if (!calendarInstanceRef.current) return;
+    var newView = (0, _utils.getViewType)(view, calendartype);
+    calendarInstanceRef.current.changeView(newView);
+  }, [view, calendartype, _utils.getViewType]);
+  (0, _react.useEffect)(function () {
+    if (!calendarInstanceRef.current) return;
+    calendarInstanceRef.current.setOption("selectable", selectionmode !== _utils.SELECTION_MODES.NONE);
+    if (selectionmode === _utils.SELECTION_MODES.SINGLE) {
+      calendarInstanceRef.current.setOption("selectConstraint", {
+        startTime: "00:00",
+        endTime: "24:00"
+      });
+      calendarInstanceRef.current.setOption("selectAllow", undefined);
+    } else if (selectionmode === _utils.SELECTION_MODES.MULTIPLE) {
+      calendarInstanceRef.current.setOption("selectConstraint", {});
+      calendarInstanceRef.current.setOption("selectAllow", function () {
+        return true;
+      });
+    } else {
+      calendarInstanceRef.current.setOption("selectConstraint", {});
+      calendarInstanceRef.current.setOption("selectAllow", undefined);
+    }
+  }, [selectionmode]);
+  (0, _react.useEffect)(function () {
+    if (!calendarInstanceRef.current) return;
+    var newHeight = (0, _utils.calculateHeight)(height);
+    calendarInstanceRef.current.setOption("height", newHeight);
+  }, [height]);
+  var renderEventDataSet = (0, _react.useCallback)(function () {
+    var events = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : dataSetEvents.events;
+    if (!calendarInstanceRef.current) return;
+    calendarInstanceRef.current.batchRendering(function () {
+      var currentEvents = calendarInstanceRef.current.getEvents();
+      for (var i = 0; i < currentEvents.length; i++) {
+        currentEvents[i].remove();
+      }
+      var eventsToAdd = events || dataSetEvents.events;
+      (0, _lodash.each)(eventsToAdd, function (event) {
+        try {
+          calendarInstanceRef.current.addEvent(event);
+        } catch (e) {
+          console.warn("Failed to add event:", event, e);
+        }
+      });
+    });
+  }, [dataSetEvents.events]);
+  (0, _react.useEffect)(function () {
+    if (!calendarRef.current || !show) return;
+    var calendarInstance = new _core.Calendar(calendarRef.current, _objectSpread(_objectSpread({}, calendarOptions.calendar), eventHandlers));
+    calendarInstanceRef.current = calendarInstance;
+    setCalendarReady(true);
+    invokeCallback("beforerender", {
+      $event: {}
+    });
+    calendarInstance.render();
+    var timeoutId = setTimeout(function () {
+      var initialView = (0, _utils.getViewType)(view, calendartype);
+      calendarInstance.changeView(initialView);
+    }, 50);
+    return function () {
+      clearTimeout(timeoutId);
+      if (calendarInstanceRef.current) {
+        calendarInstanceRef.current.destroy();
+        calendarInstanceRef.current = null;
+      }
+      setCalendarReady(false);
+    };
+  }, [show]);
+  (0, _react.useEffect)(function () {
+    if (calendarReady && calendarInstanceRef.current) {
+      renderEventDataSet();
+    }
+  }, [calendarReady, dataSetEvents.events]);
+  (0, _react.useEffect)(function () {
+    if (!calendarInstanceRef.current) return;
+    calendarInstanceRef.current.setOption("height", calendarHeight);
+    calendarInstanceRef.current.setOption("locale", (0, _utils.getSessionLocale)());
+    calendarInstanceRef.current.setOption("selectable", selectionmode !== _utils.SELECTION_MODES.NONE);
+    if (selectionmode === _utils.SELECTION_MODES.SINGLE) {
+      calendarInstanceRef.current.setOption("selectConstraint", {
+        startTime: "00:00",
+        endTime: "24:00"
+      });
+    } else if (selectionmode === _utils.SELECTION_MODES.MULTIPLE) {
+      calendarInstanceRef.current.setOption("selectConstraint", {});
+      calendarInstanceRef.current.setOption("selectAllow", function () {
+        return true;
+      });
+    } else {
+      calendarInstanceRef.current.setOption("selectConstraint", {});
+    }
+    var currentView = (0, _utils.getViewType)(view, calendartype);
+    calendarInstanceRef.current.changeView(currentView);
+    updateCalendarHeaderOptions();
+  }, [calendarHeight, selectionmode, view, calendartype, _utils.getViewType, updateCalendarHeaderOptions]);
+  (0, _react.useEffect)(function () {
+    var handleLocaleChange = function handleLocaleChange(localeData) {
+      if (!calendarInstanceRef.current) return;
+      var buttonText = {
+        year: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_YEAR", _utils.BUTTON_TEXT.YEAR),
+        month: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_MONTH", _utils.BUTTON_TEXT.MONTH),
+        week: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_WEEK", _utils.BUTTON_TEXT.WEEK),
+        day: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_DAY", _utils.BUTTON_TEXT.DAY),
+        today: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_TODAY", _utils.BUTTON_TEXT.TODAY),
+        listYear: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_YEAR", _utils.BUTTON_TEXT.YEAR),
+        listMonth: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_MONTH", _utils.BUTTON_TEXT.MONTH),
+        listWeek: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_WEEK", _utils.BUTTON_TEXT.WEEK),
+        listDay: (0, _lodash.get)(window, "app.appLocale.LABEL_CALENDAR_DAY", _utils.BUTTON_TEXT.DAY)
+      };
+      calendarInstanceRef.current.setOption("buttonText", buttonText);
+      calendarInstanceRef.current.setOption("locale", localeData.fullCalendar || "en");
+      calendarInstanceRef.current.render();
+    };
+    var appInstance = window.app;
+    if (appInstance && appInstance.subscribe) {
+      var unsubscribe = appInstance.subscribe("locale-changed", handleLocaleChange);
+      return function () {
+        if (unsubscribe) unsubscribe();
+      };
+    }
+  }, []);
+  var selectDate = (0, _react.useCallback)(function () {
+    (0, _utils.selectDate)(calendarInstanceRef.current, datavalue);
+  }, [datavalue]);
+  var gotoDate = (0, _react.useCallback)(function () {
+    (0, _utils.gotoDate)(calendarInstanceRef.current, datavalue);
+  }, [datavalue]);
+  var gotoNextYear = (0, _react.useCallback)(function () {
+    (0, _utils.gotoNextYear)(calendarInstanceRef.current);
+  }, []);
+  var gotoPrevYear = (0, _react.useCallback)(function () {
+    (0, _utils.gotoPrevYear)(calendarInstanceRef.current);
+  }, []);
+  var gotoMonth = (0, _react.useCallback)(function (monthVal) {
+    (0, _utils.gotoMonth)(calendarInstanceRef.current, monthVal);
+  }, []);
+  var gotoNextMonth = (0, _react.useCallback)(function () {
+    (0, _utils.gotoNextMonth)(calendarInstanceRef.current);
+  }, []);
+  var gotoPrevMonth = (0, _react.useCallback)(function () {
+    (0, _utils.gotoPrevMonth)(calendarInstanceRef.current);
+  }, []);
+  var unselect = (0, _react.useCallback)(function () {
+    (0, _utils.unselect)(calendarInstanceRef.current);
+  }, []);
+  var rerenderEvents = (0, _react.useCallback)(function () {
+    (0, _utils.rerenderEvents)(calendarInstanceRef.current);
+  }, []);
+  var addEventSource = (0, _react.useCallback)(function (eventObject) {
+    (0, _utils.addEventSource)(calendarInstanceRef.current, eventObject);
+  }, []);
+  var overrideDefaults = (0, _react.useCallback)(function (options) {
+    (0, _utils.overrideDefaults)(calendarInstanceRef.current, options);
+  }, []);
+  var getDefaultDate = (0, _react.useCallback)(function () {
+    return (0, _utils.getDefaultDate)(datavalue);
+  }, [datavalue]);
+  var getLib = (0, _react.useCallback)(function () {
+    return (0, _utils.getLib)();
+  }, []);
+  var getDefaultOptions = (0, _react.useCallback)(function () {
+    return (0, _utils.getDefaultOptions)(calendarOptions);
+  }, [calendarOptions]);
+  var applyCalendarOptions = (0, _react.useCallback)(function (operationType, argumentKey, argumentValue) {
+    (0, _utils.applyCalendarOptions)(calendarInstanceRef.current, operationType, argumentKey, argumentValue, _utils.getViewType, calendartype);
+  }, [_utils.getViewType, calendartype]);
+  (0, _react.useEffect)(function () {
+    var _props$listener;
+    if (props !== null && props !== void 0 && (_props$listener = props.listener) !== null && _props$listener !== void 0 && _props$listener.onChange) {
+      props.listener.onChange(name, {
+        selectDate: selectDate,
+        gotoDate: gotoDate,
+        gotoMonth: gotoMonth,
+        gotoNextMonth: gotoNextMonth,
+        gotoPrevMonth: gotoPrevMonth,
+        gotoNextYear: gotoNextYear,
+        gotoPrevYear: gotoPrevYear,
+        rerenderEvents: rerenderEvents,
+        unselect: unselect,
+        addEventSource: addEventSource,
+        overrideDefaults: overrideDefaults,
+        getDefaultDate: getDefaultDate,
+        getLib: getLib,
+        getDefaultOptions: getDefaultOptions,
+        calendarOptions: calendarOptions,
+        applyCalendarOptions: applyCalendarOptions,
+        getEventMomentValue: _utils.getEventMomentValue,
+        selectedDateRange: selectedDateRange,
+        selectedEventsInRange: selectedEventsInRange,
+        currentView: currentView
+      });
+    }
+  }, [selectDate, gotoDate, gotoMonth, gotoNextMonth, gotoPrevMonth, gotoNextYear, gotoPrevYear, rerenderEvents, _utils.getEventMomentValue, selectedDateRange, selectedEventsInRange, currentView]);
+  var componentProps = {
+    name: name,
+    view: view,
+    calendartype: calendartype,
+    selectionmode: selectionmode,
+    tabIndex: tabindex,
+    controls: controls,
+    height: height,
+    width: width,
+    "data-widget-id": props["data-widget-id"],
+    "aria-label": view ? view + " view" : "month view"
+  };
+  return __jsx(_material.Box, (0, _extends2["default"])({
+    hidden: (_props$hidden = props.hidden) !== null && _props$hidden !== void 0 ? _props$hidden : false,
+    className: "app-calendar wm-calendar-root"
+  }, componentProps), __jsx(_material.Box, {
+    className: props.className,
+    ref: calendarRef
+  }));
+});
+WmCalendar.displayName = "WmCalendar";
+
+/**
+ * The WmCalendar component provides an interactive calendar with event support, day/week/month views.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-calendar--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-calendar--docs)
+ *
+ * @param props - {@link WmCalendarProps}
+ */
+// @ts-expect-error this is a valid component
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmCalendar);

package/components/input/calendar/props.d.ts

@@ -0,0 +1,105 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmCalendar component.
+ */
+export interface CalendarProps {
+    /**
+     * The data source bound to the calendar (array of events).
+     */
+    dataset?: unknown[] | Record<string, unknown>;
+    /**
+     * The currently selected data value / date.
+     */
+    datavalue?: string | Date | null;
+    /**
+     * Field in the dataset used as the event title.
+     */
+    eventtitle?: string;
+    /**
+     * Field in the dataset used as the event start date.
+     */
+    eventstart?: string;
+    /**
+     * Field in the dataset used as the event end date.
+     */
+    eventend?: string;
+    /**
+     * Field in the dataset indicating if the event is all-day.
+     */
+    eventallday?: string;
+    /**
+     * Field in the dataset used for the event CSS class.
+     */
+    eventclass?: string;
+    /**
+     * Calendar controls to display (e.g., navigation buttons).
+     */
+    controls?: string;
+    /**
+     * Type of calendar.
+     */
+    calendartype?: string;
+    /**
+     * Default calendar view.
+     * @example "month", "week", "day"
+     */
+    view?: string;
+    /**
+     * Selection mode for the calendar.
+     */
+    selectionmode?: string;
+    /**
+     * Callback invoked when a date or event is selected.
+     */
+    onSelect?: ($start: Date, $end: Date, $view: string, $data: unknown[]) => void;
+    /**
+     * Callback invoked before the calendar is rendered.
+     */
+    onBeforerender?: (event: React.SyntheticEvent, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when an event is dropped (drag-and-drop).
+     */
+    onEventdrop?: ($event: React.SyntheticEvent, $newData: unknown[], $oldData: unknown[], $delta: unknown, $revertFunc: () => void, $ui: unknown, $view: string) => void;
+    /**
+     * Callback invoked when an event is resized.
+     */
+    onEventresize?: ($event: React.SyntheticEvent, $newData: unknown[], $oldData: unknown[], $delta: unknown, $revertFunc: () => void, $ui: unknown, $view: string) => void;
+    /**
+     * Callback invoked when an event is clicked.
+     */
+    onEventclick?: ($event: React.SyntheticEvent, $data: unknown[], $view: string) => void;
+    /**
+     * Callback invoked when an event is rendered.
+     */
+    onEventrender?: ($event: React.SyntheticEvent, $data: unknown[], $view: string) => void;
+    /**
+     * Callback invoked when the calendar view changes.
+     */
+    onViewrender?: ($view: unknown) => void;
+    /**
+     * Callback invoked when a date cell is clicked.
+     */
+    onDateclick?: (event: React.SyntheticEvent, widget?: Record<string, unknown>) => void;
+    /**
+     * Tab index for keyboard navigation.
+     */
+    tabindex?: number;
+}
+/**
+ * Combined props for the WmCalendar component, including base WaveMaker props.
+ */
+export type WmCalendarProps = Prettify<CalendarProps & BaseProps>;
+declare global {
+    interface Window {
+        app?: {
+            subscribe: (event: string, handler: (data: Record<string, unknown>) => void) => () => void;
+            appLocale?: {
+                LABEL_CALENDAR_YEAR?: string;
+                LABEL_CALENDAR_MONTH?: string;
+                LABEL_CALENDAR_WEEK?: string;
+                LABEL_CALENDAR_DAY?: string;
+                LABEL_CALENDAR_TODAY?: string;
+            };
+        };
+    }
+}

package/components/input/calendar/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});