Skip to content

Commit cf097fb

Browse files
gjulivangjulivan
committed
chore: initialize new calendar
1 parent 44d60db commit cf097fb

27 files changed

+757
-9
lines changed

‎packages/customWidgets/calendar-web/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -67,5 +67,8 @@
6767
"react-big-calendar": "0.19.2",
6868
"react-dnd": "2.6.0",
6969
"react-dnd-html5-backend": "^5.0.1"
70+
},
71+
"patchedDependencies": {
72+
"[email protected]": "patches/[email protected]"
7073
}
7174
}

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"root": true,
3+
"extends": ["@mendix/eslint-config-web-widgets/widget-ts"]
4+
}

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

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

‎packages/pluggableWidgets/calendar-web/CHANGELOG.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Changelog
2+
3+
All notable changes to this widget will be documented in this file.
4+
5+
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).
6+
7+
## [Unreleased]
8+
9+
### Added
10+
11+
- initial version of calendar widget.

‎packages/pluggableWidgets/calendar-web/README.md

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

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

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

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const { join } = require("path");
2+
const base = require("@mendix/pluggable-widgets-tools/test-config/jest.config");
3+
4+
module.exports = {
5+
...base,
6+
moduleNameMapper: {
7+
...base.moduleNameMapper
8+
}
9+
};

‎packages/pluggableWidgets/calendar-web/package.json

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"name": "@mendix/calendar-web",
3+
"widgetName": "Calendar",
4+
"version": "1.0.0",
5+
"description": "Calendar",
6+
"copyright": "© Mendix Technology BV 2025. All rights reserved.",
7+
"license": "Apache-2.0",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/mendix/web-widgets.git"
11+
},
12+
"config": {
13+
"mendixHost": "http://localhost:8080",
14+
"developmentPort": 3000
15+
},
16+
"mxpackage": {
17+
"name": "Calendar",
18+
"type": "widget",
19+
"mpkName": "com.mendix.widget.web.calendar.mpk"
20+
},
21+
"marketplace": {
22+
"minimumMXVersion": "9.24.0",
23+
"appNumber": 224259,
24+
"appName": "Calendar",
25+
"reactReady": true
26+
},
27+
"testProject": {
28+
"githubUrl": "https://github.com/mendix/testProjects",
29+
"branchName": "calendar-web"
30+
},
31+
"packagePath": "com.mendix.widget.web",
32+
"scripts": {
33+
"start": "pluggable-widgets-tools start:server",
34+
"dev": "pluggable-widgets-tools start:web",
35+
"build": "pluggable-widgets-tools build:web",
36+
"format": "pluggable-widgets-tools format",
37+
"lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
38+
"test": "jest --projects jest.config.js",
39+
"e2e": "echo \"Skipping this e2e test\"",
40+
"e2edev": "run-e2e dev --with-preps",
41+
"release": "pluggable-widgets-tools release:web",
42+
"create-gh-release": "rui-create-gh-release",
43+
"create-translation": "rui-create-translation",
44+
"publish-marketplace": "rui-publish-marketplace",
45+
"verify": "rui-verify-package-format",
46+
"update-changelog": "rui-update-changelog-widget"
47+
},
48+
"devDependencies": {
49+
"@mendix/automation-utils": "workspace:*",
50+
"@mendix/eslint-config-web-widgets": "workspace:*",
51+
"@mendix/pluggable-widgets-tools": "10.16.0",
52+
"@mendix/prettier-config-web-widgets": "workspace:*",
53+
"@mendix/run-e2e": "workspace:^*",
54+
"@mendix/widget-plugin-component-kit": "workspace:*",
55+
"@mendix/widget-plugin-hooks": "workspace:*",
56+
"@mendix/widget-plugin-platform": "workspace:*",
57+
"@mendix/widget-plugin-test-utils": "workspace:*",
58+
"@types/react-big-calendar": "^1.16.1",
59+
"cross-env": "^7.0.3"
60+
},
61+
"dependencies": {
62+
"classnames": "^2.3.2",
63+
"date-fns": "^4.1.0",
64+
"react-big-calendar": "^1.17.1"
65+
}
66+
}

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {
2+
StructurePreviewProps,
3+
container,
4+
rowLayout,
5+
structurePreviewPalette,
6+
text
7+
} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
8+
import { Properties, hidePropertyIn, hidePropertiesIn } from "@mendix/pluggable-widgets-tools";
9+
import { CalendarPreviewProps } from "../typings/CalendarProps";
10+
11+
export function getProperties(values: CalendarPreviewProps, defaultProperties: Properties): Properties {
12+
if (values.heightUnit === "percentageOfWidth") {
13+
hidePropertyIn(defaultProperties, values, "height");
14+
} else {
15+
hidePropertiesIn(defaultProperties, values, [
16+
"minHeight",
17+
"minHeightUnit",
18+
"maxHeight",
19+
"maxHeightUnit",
20+
"OverflowY"
21+
]);
22+
}
23+
24+
if (values.minHeightUnit === "none") {
25+
hidePropertyIn(defaultProperties, values, "minHeight");
26+
}
27+
28+
if (values.maxHeightUnit === "none") {
29+
hidePropertiesIn(defaultProperties, values, ["maxHeight", "OverflowY"]);
30+
}
31+
32+
return defaultProperties;
33+
}
34+
35+
export function getPreview(_values: CalendarPreviewProps, isDarkMode: boolean): StructurePreviewProps {
36+
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
37+
38+
return rowLayout({ columnSize: "grow", borders: true, backgroundColor: palette.background.containerFill })(
39+
container()(),
40+
rowLayout({ grow: 2, padding: 8 })(text({ fontColor: palette.text.primary, grow: 10 })("calendar")),
41+
container()()
42+
);
43+
}

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

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import classNames from "classnames";
2+
import { ReactElement, createElement } from "react";
3+
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
4+
import * as dateFns from "date-fns";
5+
import "react-big-calendar/lib/css/react-big-calendar.css";
6+
import { CalendarPreviewProps } from "typings/CalendarProps";
7+
8+
const localizer = dateFnsLocalizer({
9+
format: dateFns.format,
10+
parse: dateFns.parse,
11+
startOfWeek: dateFns.startOfWeek,
12+
getDay: dateFns.getDay,
13+
locales: {}
14+
});
15+
16+
export function preview(_props: CalendarPreviewProps): ReactElement {
17+
return (
18+
<div className={classNames("widget-events-preview")} style={{ minHeight: "250px" }}>
19+
<Calendar
20+
localizer={localizer}
21+
events={[
22+
{
23+
title: "My event",
24+
start: new Date(),
25+
end: new Date()
26+
}
27+
]}
28+
startAccessor="start"
29+
endAccessor="end"
30+
/>
31+
</div>
32+
);
33+
}

‎packages/pluggableWidgets/calendar-web/src/Calendar.icon.dark.png

691 Bytes
Loading

‎packages/pluggableWidgets/calendar-web/src/Calendar.icon.png

697 Bytes
Loading

‎packages/pluggableWidgets/calendar-web/src/Calendar.tile.dark.png

2.06 KB
Loading

‎packages/pluggableWidgets/calendar-web/src/Calendar.tile.png

2.08 KB
Loading

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

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import classnames from "classnames";
2+
import { CSSProperties, ReactElement, createElement } from "react";
3+
import { CalendarContainerProps } from "../typings/CalendarProps";
4+
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
5+
import * as dateFns from "date-fns";
6+
import "react-big-calendar/lib/css/react-big-calendar.css";
7+
8+
const localizer = dateFnsLocalizer({
9+
format: dateFns.format,
10+
parse: dateFns.parse,
11+
startOfWeek: dateFns.startOfWeek,
12+
getDay: dateFns.getDay,
13+
locales: {}
14+
});
15+
16+
function getHeightScale(height: number, heightUnit: "pixels" | "percentageOfParent" | "percentageOfView"): string {
17+
return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "percentageOfView" ? "vh" : "%"}`;
18+
}
19+
20+
export function constructWrapperStyle(props: CalendarContainerProps): CSSProperties {
21+
const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight, OverflowY } =
22+
props;
23+
24+
const wrapperStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth" | "overflowY"> =
25+
{};
26+
27+
wrapperStyle.width = `${width}${widthUnit === "pixels" ? "px" : "%"}`;
28+
if (heightUnit === "percentageOfWidth") {
29+
wrapperStyle.height = "auto";
30+
31+
if (minHeightUnit !== "none") {
32+
wrapperStyle.minHeight = getHeightScale(minHeight, minHeightUnit);
33+
}
34+
35+
if (maxHeightUnit !== "none") {
36+
wrapperStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
37+
wrapperStyle.overflowY = OverflowY;
38+
}
39+
} else {
40+
wrapperStyle.height = getHeightScale(height, heightUnit);
41+
}
42+
43+
return wrapperStyle;
44+
}
45+
46+
export default function MxCalendar(props: CalendarContainerProps): ReactElement {
47+
const { class: className } = props;
48+
const wrapperStyle = constructWrapperStyle(props);
49+
console.log("wrapperStyle", wrapperStyle);
50+
return (
51+
<div className={classnames("widget-calendar", className)} style={wrapperStyle}>
52+
<Calendar
53+
localizer={localizer}
54+
events={[
55+
{
56+
title: "My event",
57+
start: new Date(),
58+
end: new Date()
59+
}
60+
]}
61+
startAccessor="start"
62+
endAccessor="end"
63+
views={["month", "day", "week", "work_week", "month", "agenda"]}
64+
/>
65+
</div>
66+
);
67+
}

0 commit comments

Comments
 (0)