Skip to content

Commit 247fd2c

Browse files
samuelreichertsamuelreichert
authored
[WC-2791] Calendar complete rendering (#1608)
2 parents 4b1557f + cc9a62e commit 247fd2c

File tree

9 files changed

+310
-83
lines changed

9 files changed

+310
-83
lines changed

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

Lines changed: 67 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import classNames from "classnames";
1+
import classnames from "classnames";
2+
import * as dateFns from "date-fns";
23
import { ReactElement, createElement } from "react";
34
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
4-
import * as dateFns from "date-fns";
5+
import { CalendarPreviewProps } from "../typings/CalendarProps";
6+
import { CustomToolbar } from "./components/Toolbar";
57
import "react-big-calendar/lib/css/react-big-calendar.css";
6-
import { CalendarPreviewProps } from "typings/CalendarProps";
8+
import { constructWrapperStyle, WrapperStyleProps } from "./utils/style-utils";
9+
import { eventPropGetter } from "./utils/calendar-utils";
710

811
const localizer = dateFnsLocalizer({
912
format: dateFns.format,
@@ -13,20 +16,70 @@ const localizer = dateFnsLocalizer({
1316
locales: {}
1417
});
1518

16-
export function preview(_props: CalendarPreviewProps): ReactElement {
19+
const events = [
20+
{
21+
title: "Leave",
22+
allDay: true,
23+
start: new Date(new Date().setDate(new Date().getDate() - 15)),
24+
end: new Date(new Date().setDate(new Date().getDate() - 7)),
25+
guid: "",
26+
color: ""
27+
},
28+
{
29+
title: "Leave",
30+
allDay: true,
31+
start: new Date(new Date().setDate(new Date().getDate() - 9)),
32+
end: new Date(new Date().setDate(new Date().getDate() - 5)),
33+
guid: "",
34+
color: "green"
35+
},
36+
{
37+
title: "BD",
38+
allDay: true,
39+
start: new Date(),
40+
end: new Date(),
41+
guid: "",
42+
color: "red"
43+
},
44+
{
45+
title: "Bank Holiday",
46+
allDay: true,
47+
start: new Date(new Date().valueOf() + 6000 * 3600 * 24),
48+
end: new Date(new Date().valueOf() + 9000 * 3600 * 24),
49+
guid: "",
50+
color: "grey"
51+
},
52+
{
53+
title: "Bank Holiday",
54+
allDay: true,
55+
start: new Date(new Date().valueOf() + 4000 * 3600 * 24),
56+
end: new Date(new Date().valueOf() + 8000 * 3600 * 24),
57+
guid: "",
58+
color: "purple"
59+
},
60+
{
61+
title: "Leave",
62+
allDay: true,
63+
start: new Date(new Date().valueOf() + 10000 * 3600 * 24),
64+
end: new Date(new Date().valueOf() + 14000 * 3600 * 24),
65+
guid: "",
66+
color: ""
67+
}
68+
];
69+
70+
export function preview(props: CalendarPreviewProps): ReactElement {
71+
const { class: className } = props;
72+
const wrapperStyle = constructWrapperStyle(props as WrapperStyleProps);
73+
1774
return (
18-
<div className={classNames("widget-events-preview")} style={{ minHeight: "250px" }}>
75+
<div className={classnames("widget-events-preview", "widget-calendar", className)} style={wrapperStyle}>
1976
<Calendar
77+
components={{ toolbar: CustomToolbar }}
78+
defaultView={props.defaultView}
79+
events={events}
2080
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"
81+
views={["day", "week", "month"]}
82+
eventPropGetter={eventPropGetter}
3083
/>
3184
</div>
3285
);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import classnames from "classnames";
22
import { ReactElement, createElement } from "react";
33
import { DnDCalendar, extractCalendarProps } from "./utils/calendar-utils";
44
import { CalendarContainerProps } from "../typings/CalendarProps";
5-
import { constructWrapperStyle } from "./utils/utils";
5+
import { constructWrapperStyle } from "./utils/style-utils";
6+
import "./ui/Calendar.scss";
67

78
export default function MxCalendar(props: CalendarContainerProps): ReactElement {
89
const { class: className } = props;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
<enumerationValue key="percentageOfView">Viewport</enumerationValue>
174174
</enumerationValues>
175175
</property>
176-
<property key="height" type="integer" defaultValue="250">
176+
<property key="height" type="integer" defaultValue="580">
177177
<caption>Height</caption>
178178
<description />
179179
</property>

‎packages/pluggableWidgets/calendar-web/src/__tests__/__snapshots__/Calendar.spec.tsx.snap‎

Lines changed: 64 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -13,54 +13,67 @@ exports[`Calendar renders correctly with basic props 1`] = `
1313
class="rbc-addons-dnd rbc-calendar"
1414
>
1515
<div
16-
class="rbc-toolbar"
16+
class="calendar-toolbar"
1717
>
18-
<span
19-
class="rbc-btn-group"
18+
<div
19+
class="align-left btn-group"
2020
>
2121
<button
22+
class="btn btn-default"
2223
type="button"
2324
>
24-
Today
25+
<span
26+
aria-hidden="true"
27+
class="glyphicon glyphicon-backward"
28+
/>
2529
</button>
2630
<button
31+
class="btn btn-default"
2732
type="button"
2833
>
29-
Back
34+
Today
3035
</button>
3136
<button
37+
class="btn btn-default"
3238
type="button"
3339
>
34-
Next
40+
<span
41+
aria-hidden="true"
42+
class="glyphicon glyphicon-forward"
43+
/>
3544
</button>
36-
</span>
37-
<span
38-
class="rbc-toolbar-label"
45+
</div>
46+
<div
47+
class="align-center btn-group"
3948
>
40-
April 2025
41-
</span>
42-
<span
43-
class="rbc-btn-group"
49+
<span
50+
class="calendar-label"
51+
>
52+
April 2025
53+
</span>
54+
</div>
55+
<div
56+
class="align-right btn-group"
4457
>
4558
<button
46-
class="rbc-active"
59+
class="btn btn-default"
4760
type="button"
4861
>
49-
Month
62+
Day
5063
</button>
5164
<button
52-
class=""
65+
class="btn btn-default"
5366
type="button"
5467
>
5568
Week
5669
</button>
5770
<button
58-
class=""
71+
class="btn btn-default active"
5972
type="button"
6073
>
61-
Day
74+
Month
6275
</button>
63-
</span>
76+
</div>
6477
</div>
6578
<div
6679
aria-label="Month View"
@@ -751,54 +764,67 @@ exports[`Calendar renders correctly with basic props 1`] = `
751764
class="rbc-addons-dnd rbc-calendar"
752765
>
753766
<div
754-
class="rbc-toolbar"
767+
class="calendar-toolbar"
755768
>
756-
<span
757-
class="rbc-btn-group"
769+
<div
770+
class="align-left btn-group"
758771
>
759772
<button
773+
class="btn btn-default"
760774
type="button"
761775
>
762-
Today
776+
<span
777+
aria-hidden="true"
778+
class="glyphicon glyphicon-backward"
779+
/>
763780
</button>
764781
<button
782+
class="btn btn-default"
765783
type="button"
766784
>
767-
Back
785+
Today
768786
</button>
769787
<button
788+
class="btn btn-default"
770789
type="button"
771790
>
772-
Next
791+
<span
792+
aria-hidden="true"
793+
class="glyphicon glyphicon-forward"
794+
/>
773795
</button>
774-
</span>
775-
<span
776-
class="rbc-toolbar-label"
796+
</div>
797+
<div
798+
class="align-center btn-group"
777799
>
778-
April 2025
779-
</span>
780-
<span
781-
class="rbc-btn-group"
800+
<span
801+
class="calendar-label"
802+
>
803+
April 2025
804+
</span>
805+
</div>
806+
<div
807+
class="align-right btn-group"
782808
>
783809
<button
784-
class="rbc-active"
810+
class="btn btn-default"
785811
type="button"
786812
>
787-
Month
813+
Day
788814
</button>
789815
<button
790-
class=""
816+
class="btn btn-default"
791817
type="button"
792818
>
793819
Week
794820
</button>
795821
<button
796-
class=""
822+
class="btn btn-default active"
797823
type="button"
798824
>
799-
Day
825+
Month
800826
</button>
801-
</span>
827+
</div>
802828
</div>
803829
<div
804830
aria-label="Month View"

‎packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Button } from "@mendix/widget-plugin-component-kit/Button";
2+
import { IconInternal } from "@mendix/widget-plugin-component-kit/IconInternal";
3+
import classNames from "classnames";
4+
import { createElement, ReactElement } from "react";
5+
import { Navigate, ToolbarProps } from "react-big-calendar";
6+
import "react-big-calendar/lib/css/react-big-calendar.css";
7+
8+
export function CustomToolbar({ label, localizer, onNavigate, onView, view, views }: ToolbarProps): ReactElement {
9+
return (
10+
<div className="calendar-toolbar">
11+
<div className="align-left btn-group">
12+
<Button className="btn btn-default" onClick={() => onNavigate(Navigate.PREVIOUS)}>
13+
<IconInternal icon={{ type: "glyph", iconClass: "glyphicon-backward" }} />
14+
</Button>
15+
<Button className="btn btn-default" onClick={() => onNavigate(Navigate.TODAY)}>
16+
{localizer.messages.today}
17+
</Button>
18+
<Button className="btn btn-default" onClick={() => onNavigate(Navigate.NEXT)}>
19+
<IconInternal icon={{ type: "glyph", iconClass: "glyphicon-forward" }} />
20+
</Button>
21+
</div>
22+
23+
<div className="align-center btn-group">
24+
<span className="calendar-label">{label}</span>
25+
</div>
26+
27+
<div className="align-right btn-group">
28+
{Array.isArray(views) &&
29+
views.map(name => {
30+
return (
31+
<Button
32+
key={name}
33+
onClick={() => onView(name)}
34+
className={classNames("btn", "btn-default", { active: view === name })}
35+
>
36+
{localizer.messages[name]}
37+
</Button>
38+
);
39+
})}
40+
</div>
41+
</div>
42+
);
43+
}

0 commit comments

Comments
 (0)