Initialize new calendar

packages/customWidgets/calendar-web/package.json

@@ -67,5 +67,8 @@
         "react-big-calendar": "0.19.2",
         "react-dnd": "2.6.0",
         "react-dnd-html5-backend": "^5.0.1"
+    },
+    "patchedDependencies": {
+        "react-big-calendar@0.19.2": "patches/react-big-calendar@0.19.2.patch"
     }
 }

packages/pluggableWidgets/calendar-web/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+    "root": true,
+    "extends": ["@mendix/eslint-config-web-widgets/widget-ts"]
+}

packages/pluggableWidgets/calendar-web/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require("@mendix/prettier-config-web-widgets");

packages/pluggableWidgets/calendar-web/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+All notable changes to this widget will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+-   initial version of calendar widget.

packages/pluggableWidgets/calendar-web/README.md

@@ -0,0 +1,3 @@
+<!-- TODO: Update marketplace URL -->
+
+Please see [Calendar](https://docs.mendix.com/appstore/widgets/) in the Mendix documentation for details.

packages/pluggableWidgets/calendar-web/cypress.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@mendix/run-e2e/cypress.config.cjs");

packages/pluggableWidgets/calendar-web/jest.config.js

@@ -0,0 +1,9 @@
+const { join } = require("path");
+const base = require("@mendix/pluggable-widgets-tools/test-config/jest.config");
+
+module.exports = {
+    ...base,
+    moduleNameMapper: {
+        ...base.moduleNameMapper
+    }
+};

packages/pluggableWidgets/calendar-web/package.json

@@ -0,0 +1,66 @@
+{
+    "name": "@mendix/calendar-web",
+    "widgetName": "Calendar",
+    "version": "1.0.0",
+    "description": "Calendar",
+    "copyright": "© Mendix Technology BV 2025. All rights reserved.",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mendix/web-widgets.git"
+    },
+    "config": {
+        "mendixHost": "http://localhost:8080",
+        "developmentPort": 3000
+    },
+    "mxpackage": {
+        "name": "Calendar",
+        "type": "widget",
+        "mpkName": "com.mendix.widget.web.calendar.mpk"
+    },
+    "marketplace": {
+        "minimumMXVersion": "9.24.0",
+        "appNumber": 224259,
+        "appName": "Calendar",
+        "reactReady": true
+    },
+    "testProject": {
+        "githubUrl": "https://github.com/mendix/testProjects",
+        "branchName": "calendar-web"
+    },
+    "packagePath": "com.mendix.widget.web",
+    "scripts": {
+        "start": "pluggable-widgets-tools start:server",
+        "dev": "pluggable-widgets-tools start:web",
+        "build": "pluggable-widgets-tools build:web",
+        "format": "pluggable-widgets-tools format",
+        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
+        "test": "jest --projects jest.config.js",
+        "e2e": "echo \"Skipping this e2e test\"",
+        "e2edev": "run-e2e dev --with-preps",
+        "release": "pluggable-widgets-tools release:web",
+        "create-gh-release": "rui-create-gh-release",
+        "create-translation": "rui-create-translation",
+        "publish-marketplace": "rui-publish-marketplace",
+        "verify": "rui-verify-package-format",
+        "update-changelog": "rui-update-changelog-widget"
+    },
+    "devDependencies": {
+        "@mendix/automation-utils": "workspace:*",
+        "@mendix/eslint-config-web-widgets": "workspace:*",
+        "@mendix/pluggable-widgets-tools": "10.16.0",
+        "@mendix/prettier-config-web-widgets": "workspace:*",
+        "@mendix/run-e2e": "workspace:^*",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
+        "@mendix/widget-plugin-hooks": "workspace:*",
+        "@mendix/widget-plugin-platform": "workspace:*",
+        "@mendix/widget-plugin-test-utils": "workspace:*",
+        "@types/react-big-calendar": "^1.16.1",
+        "cross-env": "^7.0.3"
+    },
+    "dependencies": {
+        "classnames": "^2.3.2",
+        "date-fns": "^4.1.0",
+        "react-big-calendar": "^1.17.1"
+    }
+}

packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts

@@ -0,0 +1,43 @@
+import {
+    StructurePreviewProps,
+    container,
+    rowLayout,
+    structurePreviewPalette,
+    text
+} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
+import { Properties, hidePropertyIn, hidePropertiesIn } from "@mendix/pluggable-widgets-tools";
+import { CalendarPreviewProps } from "../typings/CalendarProps";
+
+export function getProperties(values: CalendarPreviewProps, defaultProperties: Properties): Properties {
+    if (values.heightUnit === "percentageOfWidth") {
+        hidePropertyIn(defaultProperties, values, "height");
+    } else {
+        hidePropertiesIn(defaultProperties, values, [
+            "minHeight",
+            "minHeightUnit",
+            "maxHeight",
+            "maxHeightUnit",
+            "OverflowY"
+        ]);
+    }
+
+    if (values.minHeightUnit === "none") {
+        hidePropertyIn(defaultProperties, values, "minHeight");
+    }
+
+    if (values.maxHeightUnit === "none") {
+        hidePropertiesIn(defaultProperties, values, ["maxHeight", "OverflowY"]);
+    }
+
+    return defaultProperties;
+}
+
+export function getPreview(_values: CalendarPreviewProps, isDarkMode: boolean): StructurePreviewProps {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
+
+    return rowLayout({ columnSize: "grow", borders: true, backgroundColor: palette.background.containerFill })(
+        container()(),
+        rowLayout({ grow: 2, padding: 8 })(text({ fontColor: palette.text.primary, grow: 10 })("calendar")),
+        container()()
+    );
+}

packages/pluggableWidgets/calendar-web/src/Calendar.editorPreview.tsx

@@ -0,0 +1,33 @@
+import classNames from "classnames";
+import { ReactElement, createElement } from "react";
+import { Calendar, dateFnsLocalizer } from "react-big-calendar";
+import * as dateFns from "date-fns";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import { CalendarPreviewProps } from "typings/CalendarProps";
+
+const localizer = dateFnsLocalizer({
+    format: dateFns.format,
+    parse: dateFns.parse,
+    startOfWeek: dateFns.startOfWeek,
+    getDay: dateFns.getDay,
+    locales: {}
+});
+
+export function preview(_props: CalendarPreviewProps): ReactElement {
+    return (
+        <div className={classNames("widget-events-preview")} style={{ minHeight: "250px" }}>
+            <Calendar
+                localizer={localizer}
+                events={[
+                    {
+                        title: "My event",
+                        start: new Date(),
+                        end: new Date()
+                    }
+                ]}
+                startAccessor="start"
+                endAccessor="end"
+            />
+        </div>
+    );
+}

packages/pluggableWidgets/calendar-web/src/Calendar.tsx

@@ -0,0 +1,67 @@
+import classnames from "classnames";
+import { CSSProperties, ReactElement, createElement } from "react";
+import { CalendarContainerProps } from "../typings/CalendarProps";
+import { Calendar, dateFnsLocalizer } from "react-big-calendar";
+import * as dateFns from "date-fns";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+
+const localizer = dateFnsLocalizer({
+    format: dateFns.format,
+    parse: dateFns.parse,
+    startOfWeek: dateFns.startOfWeek,
+    getDay: dateFns.getDay,
+    locales: {}
+});
+
+function getHeightScale(height: number, heightUnit: "pixels" | "percentageOfParent" | "percentageOfView"): string {
+    return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "percentageOfView" ? "vh" : "%"}`;
+}
+
+export function constructWrapperStyle(props: CalendarContainerProps): CSSProperties {
+    const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight, OverflowY } =
+        props;
+
+    const wrapperStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth" | "overflowY"> =
+        {};
+
+    wrapperStyle.width = `${width}${widthUnit === "pixels" ? "px" : "%"}`;
+    if (heightUnit === "percentageOfWidth") {
+        wrapperStyle.height = "auto";
+
+        if (minHeightUnit !== "none") {
+            wrapperStyle.minHeight = getHeightScale(minHeight, minHeightUnit);
+        }
+
+        if (maxHeightUnit !== "none") {
+            wrapperStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
+            wrapperStyle.overflowY = OverflowY;
+        }
+    } else {
+        wrapperStyle.height = getHeightScale(height, heightUnit);
+    }
+
+    return wrapperStyle;
+}
+
+export default function MxCalendar(props: CalendarContainerProps): ReactElement {
+    const { class: className } = props;
+    const wrapperStyle = constructWrapperStyle(props);
+    console.log("wrapperStyle", wrapperStyle);
+    return (
+        <div className={classnames("widget-calendar", className)} style={wrapperStyle}>
+            <Calendar
+                localizer={localizer}
+                events={[
+                    {
+                        title: "My event",
+                        start: new Date(),
+                        end: new Date()
+                    }
+                ]}
+                startAccessor="start"
+                endAccessor="end"
+                views={["month", "day", "week", "work_week", "month", "agenda"]}
+            />
+        </div>
+    );
+}