From b03170f5091e0a2b33daee542d21a0b453364f26 Mon Sep 17 00:00:00 2001 From: Rahman Unver Date: Tue, 15 Jul 2025 19:02:12 +0200 Subject: [PATCH 01/14] feat(calendar-web): update xml, useMemo, refactor --- packages/modules/calendar/.prettierrc.js | 1 + packages/modules/calendar/CHANGELOG.md | 9 + packages/modules/calendar/LICENSE | 201 ++++++++++++++++++ packages/modules/calendar/README.md | 18 ++ packages/modules/calendar/package.json | 46 ++++ packages/modules/calendar/scripts/build.ts | 13 ++ .../modules/calendar/scripts/push-update.ts | 15 ++ packages/modules/calendar/scripts/release.ts | 34 +++ .../modules/calendar/scripts/tsconfig.json | 3 + .../src/Calendar.editorPreview.tsx | 11 +- .../calendar-web/src/Calendar.tsx | 12 +- .../calendar-web/src/components/Toolbar.tsx | 17 +- .../src/helpers/CustomWeekController.ts | 9 +- .../calendar-web/src/utils/calendar-utils.ts | 46 +++- .../calendar-web/typings/CalendarProps.d.ts | 18 +- 15 files changed, 416 insertions(+), 37 deletions(-) create mode 100644 packages/modules/calendar/.prettierrc.js create mode 100644 packages/modules/calendar/CHANGELOG.md create mode 100644 packages/modules/calendar/LICENSE create mode 100644 packages/modules/calendar/README.md create mode 100644 packages/modules/calendar/package.json create mode 100644 packages/modules/calendar/scripts/build.ts create mode 100644 packages/modules/calendar/scripts/push-update.ts create mode 100644 packages/modules/calendar/scripts/release.ts create mode 100644 packages/modules/calendar/scripts/tsconfig.json diff --git a/packages/modules/calendar/.prettierrc.js b/packages/modules/calendar/.prettierrc.js new file mode 100644 index 0000000000..0892704ab0 --- /dev/null +++ b/packages/modules/calendar/.prettierrc.js @@ -0,0 +1 @@ +module.exports = require("@mendix/prettier-config-web-widgets"); diff --git a/packages/modules/calendar/CHANGELOG.md b/packages/modules/calendar/CHANGELOG.md new file mode 100644 index 0000000000..dcdd2cb506 --- /dev/null +++ b/packages/modules/calendar/CHANGELOG.md @@ -0,0 +1,9 @@ +# Changelog + +All notable changes to this module 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] + +- Initial version of Calendar module. diff --git a/packages/modules/calendar/LICENSE b/packages/modules/calendar/LICENSE new file mode 100644 index 0000000000..611e95bb2a --- /dev/null +++ b/packages/modules/calendar/LICENSE @@ -0,0 +1,201 @@ +Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "{}" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright 2025 Mendix Technology BV + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/packages/modules/calendar/README.md b/packages/modules/calendar/README.md new file mode 100644 index 0000000000..b875257a4e --- /dev/null +++ b/packages/modules/calendar/README.md @@ -0,0 +1,18 @@ +# Calendar module + +This module bundles the **Calendar** pluggable widget together with sample pages, domain model, and helper flows so that app builders can drag-and-drop a fully working calendar including _New Event_ and _Edit Event_ dialogs. + +## Contents + +- Calendar widget (`@mendix/calendar-web`) +- Pages: `Calendar_Overview`, `Calendar_NewEvent`, `Calendar_EditEvent` +- Microflows for creating, editing and persisting events +- Domain model for `Event` entity + +## Usage + +1. Import the module `.mpk` file into your Mendix project. +2. Drag the _Calendar_Overview_ page into your navigation or use the _Calendar_ page layout. +3. Customize the microflows or replace the `Event` entity with your own via associations. + +For full documentation of widget properties see the [Calendar widget docs](https://docs.mendix.com/appstore/widgets/calendar). diff --git a/packages/modules/calendar/package.json b/packages/modules/calendar/package.json new file mode 100644 index 0000000000..004a7c103c --- /dev/null +++ b/packages/modules/calendar/package.json @@ -0,0 +1,46 @@ +{ + "name": "@mendix/calendar", + "moduleName": "Calendar module", + "version": "1.0.0", + "copyright": "© Mendix Technology BV 2025. All rights reserved.", + "license": "Apache-2.0", + "private": true, + "repository": { + "type": "git", + "url": "https://github.com/mendix/web-widgets.git" + }, + "mxpackage": { + "type": "module", + "name": "Calendar", + "mpkName": "Calendar.mpk", + "dependencies": [ + "@mendix/calendar-web" + ] + }, + "moduleFolderNameInModeler": "calendar", + "marketplace": { + "minimumMXVersion": "9.24.0", + "appName": "Calendar" + }, + "testProject": { + "githubUrl": "https://github.com/mendix/testProjects", + "branchName": "calendar-web" + }, + "scripts": { + "build:module": "ts-node --project scripts/tsconfig.json scripts/build.ts", + "create-gh-release": "rui-create-gh-release", + "publish-marketplace": "rui-publish-marketplace", + "push-update": "ts-node --project scripts/tsconfig.json scripts/push-update.ts", + "release:module": "ts-node --project scripts/tsconfig.json scripts/release.ts", + "update-changelog": "rui-update-changelog-module", + "verify": "rui-verify-package-format" + }, + "dependencies": { + "@mendix/calendar-web": "workspace:*" + }, + "devDependencies": { + "@mendix/automation-utils": "workspace:*", + "@mendix/prettier-config-web-widgets": "workspace:*", + "cross-env": "^7.0.3" + } +} diff --git a/packages/modules/calendar/scripts/build.ts b/packages/modules/calendar/scripts/build.ts new file mode 100644 index 0000000000..c40fded8b0 --- /dev/null +++ b/packages/modules/calendar/scripts/build.ts @@ -0,0 +1,13 @@ +import { runModuleSteps, copyWidgetsToProject } from "@mendix/automation-utils/steps"; + +async function main(): Promise { + await runModuleSteps({ + packagePath: process.cwd(), + steps: [copyWidgetsToProject] + }); +} + +main().catch(err => { + console.error(err); + process.exit(1); +}); diff --git a/packages/modules/calendar/scripts/push-update.ts b/packages/modules/calendar/scripts/push-update.ts new file mode 100644 index 0000000000..a593a1bcfd --- /dev/null +++ b/packages/modules/calendar/scripts/push-update.ts @@ -0,0 +1,15 @@ +#!/usr/bin/env ts-node-script + +import { pushUpdateToTestProject, runModuleSteps } from "@mendix/automation-utils/steps"; + +async function main(): Promise { + await runModuleSteps({ + packagePath: process.cwd(), + steps: [pushUpdateToTestProject] + }); +} + +main().catch(err => { + console.error(err); + process.exit(1); +}); diff --git a/packages/modules/calendar/scripts/release.ts b/packages/modules/calendar/scripts/release.ts new file mode 100644 index 0000000000..d8ff81f729 --- /dev/null +++ b/packages/modules/calendar/scripts/release.ts @@ -0,0 +1,34 @@ +#!/usr/bin/env ts-node-script + +import { + addWidgetsToMpk, + cloneTestProject, + copyModuleLicense, + copyWidgetsToProject, + createModuleMpk, + moveModuleToDist, + removeDist, + runModuleSteps, + writeModuleVersion +} from "@mendix/automation-utils/steps"; + +async function main(): Promise { + await runModuleSteps({ + packagePath: process.cwd(), + steps: [ + removeDist, + cloneTestProject, + writeModuleVersion, + copyModuleLicense, + copyWidgetsToProject, + createModuleMpk, + addWidgetsToMpk, + moveModuleToDist + ] + }); +} + +main().catch(err => { + console.error(err); + process.exit(1); +}); diff --git a/packages/modules/calendar/scripts/tsconfig.json b/packages/modules/calendar/scripts/tsconfig.json new file mode 100644 index 0000000000..eeb4a6cc48 --- /dev/null +++ b/packages/modules/calendar/scripts/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "@mendix/automation-utils/tsconfig" +} diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.editorPreview.tsx b/packages/pluggableWidgets/calendar-web/src/Calendar.editorPreview.tsx index f80ee07afe..80a7c0e5a4 100644 --- a/packages/pluggableWidgets/calendar-web/src/Calendar.editorPreview.tsx +++ b/packages/pluggableWidgets/calendar-web/src/Calendar.editorPreview.tsx @@ -1,20 +1,19 @@ import classnames from "classnames"; -import * as dateFns from "date-fns"; import { ReactElement, createElement } from "react"; import { Calendar, dateFnsLocalizer, EventPropGetter } from "react-big-calendar"; import { CalendarPreviewProps } from "../typings/CalendarProps"; import { CustomToolbar } from "./components/Toolbar"; import { constructWrapperStyle, WrapperStyleProps } from "./utils/style-utils"; -import { eventPropGetter } from "./utils/calendar-utils"; +import { format, parse, startOfWeek, getDay, eventPropGetter } from "./utils/calendar-utils"; import "react-big-calendar/lib/css/react-big-calendar.css"; import "./ui/Calendar.scss"; const localizer = dateFnsLocalizer({ - format: dateFns.format, - parse: dateFns.parse, - startOfWeek: dateFns.startOfWeek, - getDay: dateFns.getDay, + format, + parse, + startOfWeek, + getDay, locales: {} }); diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.tsx b/packages/pluggableWidgets/calendar-web/src/Calendar.tsx index 03f60bc04d..4918f4e2ca 100644 --- a/packages/pluggableWidgets/calendar-web/src/Calendar.tsx +++ b/packages/pluggableWidgets/calendar-web/src/Calendar.tsx @@ -1,5 +1,5 @@ -import classnames from "classnames"; -import { ReactElement, createElement } from "react"; +import { useMemo, createElement, ReactElement } from "react"; +import classNames from "classnames"; import { CalendarContainerProps } from "../typings/CalendarProps"; import { CalendarPropsBuilder } from "./helpers/CalendarPropsBuilder"; import { DnDCalendar } from "./utils/calendar-utils"; @@ -7,12 +7,10 @@ import { constructWrapperStyle } from "./utils/style-utils"; import "./ui/Calendar.scss"; export default function MxCalendar(props: CalendarContainerProps): ReactElement { - const { class: className } = props; - const wrapperStyle = constructWrapperStyle(props); - const calendarProps = new CalendarPropsBuilder(props).build(); - + const wrapperStyle = useMemo(() => constructWrapperStyle(props), [props]); + const calendarProps = useMemo(() => new CalendarPropsBuilder(props).build(), [props]); return ( -
+
); diff --git a/packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx b/packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx index 386d881fd4..75835e9c19 100644 --- a/packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx +++ b/packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx @@ -1,21 +1,26 @@ import { Button } from "@mendix/widget-plugin-component-kit/Button"; import { IconInternal } from "@mendix/widget-plugin-component-kit/IconInternal"; import classNames from "classnames"; -import { createElement, ReactElement } from "react"; -import { Navigate, ToolbarProps } from "react-big-calendar"; +import { createElement, ReactElement, useCallback } from "react"; +import { Navigate, ToolbarProps, View } from "react-big-calendar"; import "react-big-calendar/lib/css/react-big-calendar.css"; export function CustomToolbar({ label, localizer, onNavigate, onView, view, views }: ToolbarProps): ReactElement { + const handlePrev = useCallback(() => onNavigate(Navigate.PREVIOUS), [onNavigate]); + const handleToday = useCallback(() => onNavigate(Navigate.TODAY), [onNavigate]); + const handleNext = useCallback(() => onNavigate(Navigate.NEXT), [onNavigate]); + const handleView = useCallback((name: View) => onView(name), [onView]); + return (
- - -
@@ -30,7 +35,7 @@ export function CustomToolbar({ label, localizer, onNavigate, onView, view, view return ( - - -
-
- - Apr 28 – May 02 - -
-
- - - - - -
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - 12:00 AM - -
-
-
-
-
- - 1:00 AM - -
-
-
-
-
- - 2:00 AM - -
-
-
-
-
- - 3:00 AM - -
-
-
-
-
- - 4:00 AM - -
-
-
-
-
- - 5:00 AM - -
-
-
-
-
- - 6:00 AM - -
-
-
-
-
- - 7:00 AM - -
-
-
-
-
- - 8:00 AM - -
-
-
-
-
- - 9:00 AM - -
-
-
-
-
- - 10:00 AM - -
-
-
-
-
- - 11:00 AM - -
-
-
-
-
- - 12:00 PM - -
-
-
-
-
- - 1:00 PM - -
-
-
-
-
- - 2:00 PM - -
-
-
-
-
- - 3:00 PM - -
-
-
-
-
- - 4:00 PM - -
-
-
-
-
- - 5:00 PM - -
-
-
-
-
- - 6:00 PM - -
-
-
-
-
- - 7:00 PM - -
-
-
-
-
- - 8:00 PM - -
-
-
-
-
- - 9:00 PM - -
-
-
-
-
- - 10:00 PM - -
-
-
-
-
- - 11:00 PM - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- , - "container":
-
-
-
-
- - - -
-
- - Apr 28 – May 02 - -
-
- - - - - -
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - 12:00 AM - -
-
-
-
-
- - 1:00 AM - -
-
-
-
-
- - 2:00 AM - -
-
-
-
-
- - 3:00 AM - -
-
-
-
-
- - 4:00 AM - -
-
-
-
-
- - 5:00 AM - -
-
-
-
-
- - 6:00 AM - -
-
-
-
-
- - 7:00 AM - -
-
-
-
-
- - 8:00 AM - -
-
-
-
-
- - 9:00 AM - -
-
-
-
-
- - 10:00 AM - -
-
-
-
-
- - 11:00 AM - -
-
-
-
-
- - 12:00 PM - -
-
-
-
-
- - 1:00 PM - -
-
-
-
-
- - 2:00 PM - -
-
-
-
-
- - 3:00 PM - -
-
-
-
-
- - 4:00 PM - -
-
-
-
-
- - 5:00 PM - -
-
-
-
-
- - 6:00 PM - -
-
-
-
-
- - 7:00 PM - -
-
-
-
-
- - 8:00 PM - -
-
-
-
-
- - 9:00 PM - -
-
-
-
-
- - 10:00 PM - -
-
-
-
-
- - 11:00 PM - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} +
+
+
`; From a733ee89518594484796dffbf9d89a8f2ebae3af Mon Sep 17 00:00:00 2001 From: Rahman Unver Date: Tue, 29 Jul 2025 16:31:19 +0300 Subject: [PATCH 10/14] docs(web-widgets): update widget-to-module doc --- docs/requirements/widget-to-module.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/requirements/widget-to-module.md b/docs/requirements/widget-to-module.md index 673aed6f9f..390857da4d 100644 --- a/docs/requirements/widget-to-module.md +++ b/docs/requirements/widget-to-module.md @@ -1,6 +1,6 @@ # Converting a Pluggable Widget into a Mendix **Module** -This guide captures the workflow we followed in chat to turn **@mendix/calendar-web** (a standalone widget) into **@mendix/calendar** (a full-fledged module that ships pages, domain model, microflows _and_ the widget). It mirrors the conventions used by the automation scripts in this mono-repo (`automation/utils`). +This guide documents a repeatable workflow for converting any pluggable widget package (for example, **@mendix/calendar-web**) into a Mendix **Module** package (for example, **@mendix/calendar**). The resulting module bundles pages, domain model, microflows and the widget itself. The steps below align with the automation scripts located in `automation/utils` within this repository. --- From 9d6b5bd931b9177cf138d1b95b8d9c5b44f140e4 Mon Sep 17 00:00:00 2001 From: Rahman Unver Date: Tue, 29 Jul 2025 19:15:12 +0300 Subject: [PATCH 11/14] feat(calendar-web): update changelog, set sp category, structure mode text position --- packages/pluggableWidgets/calendar-web/CHANGELOG.md | 6 ++++-- .../calendar-web/src/Calendar.editorConfig.ts | 2 +- packages/pluggableWidgets/calendar-web/src/Calendar.xml | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/pluggableWidgets/calendar-web/CHANGELOG.md b/packages/pluggableWidgets/calendar-web/CHANGELOG.md index 2fa9989a52..318f3e298c 100644 --- a/packages/pluggableWidgets/calendar-web/CHANGELOG.md +++ b/packages/pluggableWidgets/calendar-web/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] -### Added +### Breaking changes -- initial version of calendar widget. +- Initial version of Calendar pluggable widget. + +- Upgrading from any v1.x to v2.0.0 preview requires re-configuring the widget in Studio Pro. The property panel has been reorganised (e.g. View settings, Custom work-week options) and missing/renamed properties will be reset to their defaults. After installing v2.0.0 open each Calendar instance, review the settings and re-select the desired values. diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts b/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts index 20d32b20c0..92b610e13d 100644 --- a/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts +++ b/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts @@ -81,7 +81,7 @@ export function getPreview(_values: CalendarPreviewProps, isDarkMode: boolean): borders: true })( rowLayout({ - columnSize: "grow", + columnSize: "fixed", padding: 6 })( { diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.xml b/packages/pluggableWidgets/calendar-web/src/Calendar.xml index 12ffe3c710..cbd5b84c7b 100644 --- a/packages/pluggableWidgets/calendar-web/src/Calendar.xml +++ b/packages/pluggableWidgets/calendar-web/src/Calendar.xml @@ -2,6 +2,7 @@ Calendar Calendar + Display Display https://docs.mendix.com/appstore/widgets/calendar From ac06a2d1383e394a0792e21a171e578921803678 Mon Sep 17 00:00:00 2001 From: Rahman Unver Date: Wed, 30 Jul 2025 17:31:57 +0300 Subject: [PATCH 12/14] fix(calendar-web): newedit modal fix --- .../src/helpers/useCalendarEvents.ts | 38 +++++++++++++------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/packages/pluggableWidgets/calendar-web/src/helpers/useCalendarEvents.ts b/packages/pluggableWidgets/calendar-web/src/helpers/useCalendarEvents.ts index cc7bcad3b2..89e54f88a9 100644 --- a/packages/pluggableWidgets/calendar-web/src/helpers/useCalendarEvents.ts +++ b/packages/pluggableWidgets/calendar-web/src/helpers/useCalendarEvents.ts @@ -28,6 +28,24 @@ export function useCalendarEvents(props: CalendarContainerProps): CalendarEventH [onEditEvent] ); + const invokeCreate = useCallback( + (slotInfo: { start: Date; end: Date; action: string }) => { + const action = onCreateEvent; + + if (action?.canExecute && editable?.value === true) { + // An event is considered "all day" when the duration is an exact multiple of 24 hours. + const isAllDay = + ((slotInfo.end.getTime() - slotInfo.start.getTime()) / (24 * 60 * 60 * 1000)) % 1 === 0; + action.execute({ + startDate: slotInfo.start, + endDate: slotInfo.end, + allDay: isAllDay + }); + } + }, + [onCreateEvent, editable] + ); + // https://github.com/jquense/react-big-calendar/blob/master/stories/props/onSelectEvent.stories.js const handleSelectEvent = useCallback( (event: CalendarEvent) => { @@ -55,6 +73,7 @@ export function useCalendarEvents(props: CalendarContainerProps): CalendarEventH clickRef.current = setTimeout(() => { invokeEdit(event); + setSelected(event); }, 250); }, [invokeEdit] @@ -62,6 +81,9 @@ export function useCalendarEvents(props: CalendarContainerProps): CalendarEventH const handleKeyPressEvent = useCallback( (event: CalendarEvent, e: any) => { + if (clickRef?.current) { + clearTimeout(clickRef.current); + } if (e.key === "Enter" && selected?.item.id === event.item.id) { invokeEdit(event); } @@ -71,20 +93,12 @@ export function useCalendarEvents(props: CalendarContainerProps): CalendarEventH const handleCreateEvent = useCallback( (slotInfo: { start: Date; end: Date; action: string }) => { - const action = onCreateEvent; - - if (action?.canExecute && editable?.value === true) { - // is all day : if the difference between start and end is a multiple of 24 hours - const isAllday = - ((slotInfo.end.getTime() - slotInfo.start.getTime()) / (24 * 60 * 60 * 1000)) % 1 === 0; - action?.execute({ - startDate: slotInfo.start, - endDate: slotInfo.end, - allDay: isAllday - }); + setSelected(null); + if (!selected) { + invokeCreate(slotInfo); } }, - [onCreateEvent, editable] + [invokeCreate, selected] ); const handleEventDropOrResize = useCallback( From 0c048298f125927387091b1f2aa6a7950b371fa7 Mon Sep 17 00:00:00 2001 From: Rahman Unver Date: Thu, 31 Jul 2025 17:30:59 +0300 Subject: [PATCH 13/14] fix(calendar-web): editor preview fix --- .../calendar-web/src/Calendar.editorConfig.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts b/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts index 92b610e13d..2efa0b862d 100644 --- a/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts +++ b/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts @@ -90,7 +90,9 @@ export function getPreview(_values: CalendarPreviewProps, isDarkMode: boolean): width: 16, height: 16 }, - text({ fontColor: palette.text.primary })("Calendar") + container({ + padding: 4 + })(text({ fontColor: palette.text.primary })("Calendar")) ) ); } From 087fdf155b685a9309fb43fb015c601262971a72 Mon Sep 17 00:00:00 2001 From: gjulivan Date: Fri, 1 Aug 2025 08:45:18 +0200 Subject: [PATCH 14/14] fix: structure mode --- .../calendar-web/src/Calendar.editorConfig.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts b/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts index 2efa0b862d..4e5cb1cb7d 100644 --- a/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts +++ b/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts @@ -81,15 +81,15 @@ export function getPreview(_values: CalendarPreviewProps, isDarkMode: boolean): borders: true })( rowLayout({ - columnSize: "fixed", + columnSize: "grow", padding: 6 })( - { + container({ padding: 4, grow: 0 })({ type: "Image", document: decodeURIComponent((isDarkMode ? IconSVGDark : IconSVG).replace("data:image/svg+xml,", "")), width: 16, height: 16 - }, + }), container({ padding: 4 })(text({ fontColor: palette.text.primary })("Calendar"))