From a9d38f5b5f4cc2adc5563d9654e8a90682f604dc Mon Sep 17 00:00:00 2001 From: David Glick Date: Sat, 30 May 2026 14:08:21 +0200 Subject: [PATCH 1/2] Add timezone selector for event start/end --- .../manage/Widgets/DatetimeWidget.jsx | 211 +++++++++++++----- packages/volto/src/helpers/Utils/Utils.jsx | 11 +- .../extras/react-dates-overrides.less | 22 ++ 3 files changed, 185 insertions(+), 59 deletions(-) diff --git a/packages/volto/src/components/manage/Widgets/DatetimeWidget.jsx b/packages/volto/src/components/manage/Widgets/DatetimeWidget.jsx index 1d93991cfd4..6f719b492be 100644 --- a/packages/volto/src/components/manage/Widgets/DatetimeWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/DatetimeWidget.jsx @@ -5,12 +5,23 @@ import loadable from '@loadable/component'; import cx from 'classnames'; import Icon from '@plone/volto/components/theme/Icon/Icon'; import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper'; -import { parseDateTime, toBackendLang } from '@plone/volto/helpers/Utils/Utils'; +import { + parseDateTime, + toBackendLang, + getTimeZoneOffset, +} from '@plone/volto/helpers/Utils/Utils'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; +import { + customSelectStyles, + DropdownIndicator, + Option, + selectTheme, +} from '@plone/volto/components/manage/Widgets/SelectStyling'; import leftKey from '@plone/volto/icons/left-key.svg'; import rightKey from '@plone/volto/icons/right-key.svg'; import clearSVG from '@plone/volto/icons/clear.svg'; +import clockSVG from '@plone/volto/icons/clock.svg'; import 'rc-time-picker/assets/index.css'; import 'react-dates/initialize'; @@ -27,6 +38,14 @@ const messages = defineMessages({ id: 'Time', defaultMessage: 'Time', }, + timezone: { + id: 'timezone', + defaultMessage: 'Time zone', + }, + editTimezone: { + id: 'editTimezone', + defaultMessage: 'Edit time zone', + }, clearDateTime: { id: 'Clear date/time', defaultMessage: 'Clear date and time', @@ -71,6 +90,52 @@ const defaultTimeDateOnly = { second: 0, }; +const TimezoneSelector = injectLazyLibs(['reactSelect'])(({ + value, + onChange, + reactSelect, +}) => { + const intl = useIntl(); + const [open, setOpen] = useState(false); + const Select = reactSelect.default; + + return ( +
+ + {open ? ( +
+