From 8c985de42b9e79a0545c4f4ed1490a6c2e486eee Mon Sep 17 00:00:00 2001
From: Petr Jasek <jasekpetr@gmail.com>
Date: Fri, 15 Nov 2024 19:59:35 +0100
Subject: [PATCH 1/4] allow creation of events without start/end time

STT-40
---
 client/components/Events/EventDateTime.tsx    |   4 +
 .../components/Events/EventDateTimeColumn.tsx |   6 +-
 .../components/Events/EventEditor/index.tsx   |   2 +
 client/components/UI/DateTime.tsx             |   4 +-
 .../UI/Form/DateInput/DateInputPopup.tsx      |  46 ++--
 client/components/UI/Form/DateInput/index.tsx |  40 ++--
 .../UI/Form/DateTimeInput/index.tsx           | 161 +++++++++-----
 .../UI/Form/TimeInput/TimeInputPopup.tsx      |  77 ++++---
 client/components/UI/Form/TimeInput/index.tsx |   6 +-
 client/components/UI/utils.ts                 |   1 +
 .../components/fields/editor/EndDateTime.tsx  |   1 +
 .../fields/editor/EventSchedule.tsx           | 210 +++++++++---------
 .../fields/editor/StartDateTime.tsx           |   1 +
 .../fields/editor/base/dateTime.tsx           |  10 +-
 client/utils/events.tsx                       |  10 +-
 client/utils/time.ts                          |   2 +-
 client/validators/events.ts                   |  22 +-
 client/validators/index.ts                    |   4 +-
 e2e/cypress/e2e/events/edit_event.cy.ts       |  13 +-
 .../e2e/events/event_action_duplicate.cy.ts   |   1 +
 e2e/cypress/e2e/events/event_all_day.cy.ts    | 111 +++++++++
 .../e2e/events/event_embedded_coverage.cy.ts  |   2 -
 .../support/planning/events/eventEditor.ts    |   1 -
 e2e/cypress/support/utils/time.ts             |  12 +-
 e2e/package.json                              |   2 +-
 e2e/server/Procfile                           |   2 +-
 package-lock.json                             |  21 +-
 server/planning/events/events.py              |  21 +-
 28 files changed, 506 insertions(+), 287 deletions(-)
 create mode 100644 e2e/cypress/e2e/events/event_all_day.cy.ts

diff --git a/client/components/Events/EventDateTime.tsx b/client/components/Events/EventDateTime.tsx
index 0ae46d122..e61e70b0d 100644
--- a/client/components/Events/EventDateTime.tsx
+++ b/client/components/Events/EventDateTime.tsx
@@ -82,6 +82,7 @@ export class EventDateTime extends React.PureComponent<IProps> {
                             date={start}
                             {...commonProps}
                             withTime={false}
+                            testId="event-start-date"
                         />
                     )}
                     {gettext('All day')}
@@ -95,9 +96,11 @@ export class EventDateTime extends React.PureComponent<IProps> {
                     </span>
                 )}
                 <DateTime
+                    withTime={!isFullDay}
                     withDate={showEventStartDate}
                     withYear={withYear}
                     date={start}
+                    testId="event-start-date"
                     {...commonProps}
                 />
                 {showDash && <>&ndash;</>}
@@ -106,6 +109,7 @@ export class EventDateTime extends React.PureComponent<IProps> {
                     withYear={withYear}
                     isEndEventDateTime={true}
                     date={end}
+                    testId="event-end-date"
                     {...commonProps}
                 />
                 {isRemoteTimeZone && (
diff --git a/client/components/Events/EventDateTimeColumn.tsx b/client/components/Events/EventDateTimeColumn.tsx
index 0e63fa10c..fc342a56f 100644
--- a/client/components/Events/EventDateTimeColumn.tsx
+++ b/client/components/Events/EventDateTimeColumn.tsx
@@ -52,6 +52,7 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                 withYear={!isThisYear}
                                 withTime={false}
                                 date={start}
+                                testId="event-start-date"
                                 {...commonProps}
                             />
                             {!multiDay ? null : (
@@ -62,13 +63,14 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                         withYear={!isThisYear}
                                         withTime={false}
                                         date={end}
+                                        testId="event-end-date"
                                         {...commonProps}
                                     />
                                 </React.Fragment>
                             )}
                             {!isRemoteTimeZone ? null : (
                                 <span className="sd-margin-l--0-5">(
-                                    <span className="EventDateTime__timezone">
+                                    <span className="EventDateTime__timezone" data-test-id="event-timezone">
                                         {tzCode}
                                     </span>
                                 )</span>
@@ -85,6 +87,7 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                         withDate={false}
                                         withYear={false}
                                         date={start}
+                                        testId="event-start-date"
                                         {...commonProps}
                                     />
                                     &ndash;
@@ -92,6 +95,7 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                         withDate={false}
                                         withYear={false}
                                         date={end}
+                                        testId="event-end-date"
                                         {...commonProps}
                                     />
                                 </React.Fragment>
diff --git a/client/components/Events/EventEditor/index.tsx b/client/components/Events/EventEditor/index.tsx
index ab4779001..6ef235d09 100644
--- a/client/components/Events/EventEditor/index.tsx
+++ b/client/components/Events/EventEditor/index.tsx
@@ -121,6 +121,8 @@ class EventEditorComponent extends React.PureComponent<IProps> {
             start: value['dates.start'],
             end: value['dates.end'],
             tz: value['dates.tz'],
+            all_day: value['dates.all_day'],
+            no_end_time: value['dates.no_end_time'],
         });
 
         this.props.onChangeHandler(value);
diff --git a/client/components/UI/DateTime.tsx b/client/components/UI/DateTime.tsx
index 9c279a45c..f3065a2c7 100644
--- a/client/components/UI/DateTime.tsx
+++ b/client/components/UI/DateTime.tsx
@@ -19,6 +19,7 @@ interface IPropsDateTime {
     isEndEventDateTime?: boolean,
     noEndTime?: boolean,
     multiDay?: boolean,
+    testId?: string,
 }
 
 /**
@@ -37,6 +38,7 @@ function DateTime({
     isEndEventDateTime,
     noEndTime,
     multiDay,
+    testId,
 }: IPropsDateTime) {
     const {gettext} = superdeskApi.localization;
     const dateFormat = appConfig.planning.dateformat;
@@ -78,7 +80,7 @@ function DateTime({
     const tz = timeUtils.getTimeZoneAbbreviation(date.format('z')) + ' ';
 
     return (
-        <time className={!padLeft ? 'Datetime' : null} title={tz + displayDate}>
+        <time className={!padLeft ? 'Datetime' : null} title={tz + displayDate} data-test-id={testId}>
             {displayDate}
         </time>
     );
diff --git a/client/components/UI/Form/DateInput/DateInputPopup.tsx b/client/components/UI/Form/DateInput/DateInputPopup.tsx
index 096b339fb..caeaf32cc 100644
--- a/client/components/UI/Form/DateInput/DateInputPopup.tsx
+++ b/client/components/UI/Form/DateInput/DateInputPopup.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment-timezone';
 import {Popup, Content, Header, Footer} from '../../Popup';
 import {Button} from '../../';
@@ -11,14 +10,35 @@ import {gettext} from '../../utils';
 
 import './style.scss';
 
+interface IProps {
+    value?: string | moment.Moment;
+    onChange(value: moment.Moment): void;
+    close(): void;
+    target: string;
+    maxMode?: string;
+    yearRange?: number;
+    popupContainer(): HTMLElement;
+    onPopupOpen?(): void;
+    onPopupClose?(): void;
+    remoteTimeZone?: string;
+}
+
+interface IState {
+    mode: 'day' | 'month' | 'year';
+    modeTitle: string;
+    currentDate: moment.Moment;
+    selectedDate: moment.Moment;
+}
+
 /**
  * @ngdoc react
  * @name DateInputPopup
  * @description Main Popup Component of DatePicker
  */
-export class DateInputPopup extends React.Component {
+export class DateInputPopup extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
+
         const currentDate = props.remoteTimeZone ?
             moment.tz(props.remoteTimeZone) :
             moment();
@@ -27,7 +47,7 @@ export class DateInputPopup extends React.Component {
             mode: 'day',
             modeTitle: this.getModeTitle(currentDate, 'day'),
             currentDate: currentDate,
-            selectedDate: currentDate,
+            selectedDate: currentDate.clone(),
         };
 
         this.handleModeChange = this.handleModeChange.bind(this);
@@ -148,7 +168,7 @@ export class DateInputPopup extends React.Component {
     * @description handleSelectChange changes mode from days-months-year
     */
     handleSelectChange(newDate) {
-        let nextMode = '';
+        let nextMode;
 
         switch (this.state.mode) {
         case 'month':
@@ -253,20 +273,4 @@ export class DateInputPopup extends React.Component {
             </Popup>
         );
     }
-}
-
-DateInputPopup.propTypes = {
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.instanceOf(moment),
-    ]),
-    onChange: PropTypes.func.isRequired,
-    close: PropTypes.func.isRequired,
-    target: PropTypes.string.isRequired,
-    maxMode: PropTypes.string,
-    yearRange: PropTypes.number,
-    popupContainer: PropTypes.func,
-    onPopupOpen: PropTypes.func,
-    onPopupClose: PropTypes.func,
-    remoteTimeZone: PropTypes.string,
-};
+}
\ No newline at end of file
diff --git a/client/components/UI/Form/DateInput/index.tsx b/client/components/UI/Form/DateInput/index.tsx
index 44eb77229..9f882fb90 100644
--- a/client/components/UI/Form/DateInput/index.tsx
+++ b/client/components/UI/Form/DateInput/index.tsx
@@ -31,6 +31,7 @@ interface IProps {
     remoteTimeZone?: string;
     isLocalTimeZoneDifferent?: boolean;
     inputAsLabel?: boolean;
+    dateOnly?: boolean;
 
     onChange(field: string, value: moment.Moment): void;
     popupContainer(): HTMLElement;
@@ -63,14 +64,14 @@ export class DateInput extends React.Component<IProps, IState> {
             viewValue: this.props.value != null && moment.isMoment(this.props.value) ?
                 this.props.value.format(appConfig.planning.dateformat) :
                 '',
-            previousValidValue: null,
+            previousValidValue: undefined,
         };
         this.dom = {inputField: null};
 
-        this.validateDateText = this.validateDateText.bind(this);
+        this.onInputChange = this.onInputChange.bind(this);
         this.handleInputBlur = this.handleInputBlur.bind(this);
         this.toggleOpenDatePicker = this.toggleOpenDatePicker.bind(this);
-        this.onChange = this.onChange.bind(this);
+        this.onPopupChange = this.onPopupChange.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
@@ -104,14 +105,10 @@ export class DateInput extends React.Component<IProps, IState> {
     }
 
     /**
-    * @ngdoc method
-    * @name DateInput#validateDateText
-    * @description validateDateText sets validate-state after text-input of dates
+    * sets validate-state after text-input of dates
     */
-    validateDateText(field, val) {
-        const valMoment = this.props.remoteTimeZone ?
-            moment.tz(val, appConfig.planning.dateformat, true, this.props.remoteTimeZone) :
-            moment(val, appConfig.planning.dateformat, true);
+    onInputChange(field, val) {
+        const valMoment = moment(val, appConfig.planning.dateformat, true);
 
         if (valMoment.isValid()) {
             this.setState({
@@ -119,7 +116,7 @@ export class DateInput extends React.Component<IProps, IState> {
                 viewValue: valMoment.format(appConfig.planning.dateformat),
                 previousValidValue: valMoment,
             });
-            this.onChange(valMoment);
+            this.onPopupChange(valMoment);
         } else {
             this.setState({
                 invalid: true,
@@ -146,15 +143,17 @@ export class DateInput extends React.Component<IProps, IState> {
         }
     }
 
-    onChange(newValue) {
+    onPopupChange(newValue: moment.Moment) {
         const {value, onChange, field, remoteTimeZone} = this.props;
-        let newMoment = newValue;
+        const newMoment = remoteTimeZone ? moment.tz(newValue, remoteTimeZone) : moment(newValue);
 
-        if (!moment.isMoment(newMoment)) {
-            newMoment = moment.tz(newValue, remoteTimeZone);
-        }
+        this.setState({
+            invalid: false,
+            viewValue: newMoment.format(appConfig.planning.dateformat),
+            previousValidValue: newMoment,
+        });
 
-        if (newMoment.isValid() && (!newMoment.isSame(value) || !value)) {
+        if (newMoment.isValid() && (value == null || !newMoment.isSame(value))) {
             onChange(field, newMoment);
         }
     }
@@ -178,9 +177,10 @@ export class DateInput extends React.Component<IProps, IState> {
         } = this.props;
 
         let {message, invalid} = this.props;
-        const eventTimeZoneString = timeUtils.getDateInRemoteTimeZone(value, remoteTimeZone).format('z');
         let displayDateString;
 
+        const eventTimeZoneString = value ? timeUtils.getDateInRemoteTimeZone(value, remoteTimeZone).format('z') : null;
+
         if (moment.isMoment(value) && isLocalTimeZoneDifferent) {
             const displayDate = timeUtils.getDateInRemoteTimeZone(value, timeUtils.localTimeZone());
 
@@ -217,7 +217,7 @@ export class DateInput extends React.Component<IProps, IState> {
                         field={field}
                         value={this.state.viewValue}
                         placeholder={placeholder || gettext('Date')}
-                        onChange={this.validateDateText}
+                        onChange={this.onInputChange}
                         onFocus={onFocus}
                         onBlur={this.handleInputBlur}
                         type="text"
@@ -241,7 +241,7 @@ export class DateInput extends React.Component<IProps, IState> {
                 {this.state.openDatePicker && (
                     <DateInputPopup
                         value={value}
-                        onChange={this.onChange}
+                        onChange={this.onPopupChange}
                         close={this.toggleOpenDatePicker}
                         target="icon-calendar"
                         popupContainer={popupContainer}
diff --git a/client/components/UI/Form/DateTimeInput/index.tsx b/client/components/UI/Form/DateTimeInput/index.tsx
index 48243929a..3784301a9 100644
--- a/client/components/UI/Form/DateTimeInput/index.tsx
+++ b/client/components/UI/Form/DateTimeInput/index.tsx
@@ -1,12 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import {get} from 'lodash';
 import {Row, DateInput, TimeInput, Field} from '..';
 import './style.scss';
 import Button from '../../Button';
 import {gettext} from '../../utils';
 
+interface IProps {
+    field: string;
+    label: string;
+    value?: string | moment.Moment;
+    onChange(field: string, value: moment.Moment): void;
+    timeField?: string;
+    hint?: string;
+    required?: boolean;
+    invalid?: boolean;
+    readOnly?: boolean;
+    boxed?: boolean;
+    noMargin?: boolean;
+    canClear?: boolean;
+    item?: {[key: string]: any};
+    diff?: {[key: string]: any};
+    errors?: {[key: string]: any};
+    showErrors?: boolean;
+    popupContainer(): HTMLElement;
+    onFocus?(): void;
+    hideTime?: boolean;
+    halfWidth?: boolean;
+    onPopupOpen?(): void;
+    onPopupClose?(): void;
+    remoteTimeZone?: string;
+    allowInvalidTime?: boolean;
+    isLocalTimeZoneDifferent?: boolean;
+    refNode?(node: HTMLElement): void;
+    showToBeConfirmed?: boolean;
+    onToBeConfirmed?(field: string): void;
+    toBeConfirmed?: boolean;
+    testId?: string;
+    dateOnly?: boolean;
+}
+
 /**
  * @ngdoc react
  * @name DateTimeInput
@@ -41,48 +74,30 @@ export const DateTimeInput = ({
     toBeConfirmed,
     testId,
     ...props
-}) => (
-    <Row
-        flex={true}
-        halfWidth={halfWidth}
-        noPadding={!!invalid}
-        testId={testId}
-        className={{
-            'date-time-input__row': true,
-            'date-time-input__row--required': required,
-            'date-time-input__row--invalid': invalid,
-        }}
-    >
-        <Field
-            row={false}
-            component={DateInput}
-            field={`${field}.date`}
-            value={value}
-            item={item}
-            diff={diff}
-            readOnly={readOnly}
-            onChange={onChange}
-            errors={errors}
-            showErrors={showErrors}
-            noMargin={!invalid}
-            label={label}
-            required={required}
-            popupContainer={popupContainer}
-            onFocus={onFocus}
-            onPopupOpen={onPopupOpen}
-            onPopupClose={onPopupClose}
-            remoteTimeZone={remoteTimeZone}
-            isLocalTimeZoneDifferent={isLocalTimeZoneDifferent}
-            refNode={refNode}
-            halfWidth={!hideTime}
-        />
+}: IProps) => {
+    let timeValue = timeField ? diff?.timeField : value;
+
+    if (props.dateOnly) {
+        timeValue = null;
+    }
 
-        {!hideTime && (
+    return (
+        <Row
+            flex={true}
+            halfWidth={halfWidth}
+            noPadding={!!invalid}
+            testId={testId}
+            className={{
+                'date-time-input__row': true,
+                'date-time-input__row--required': required,
+                'date-time-input__row--invalid': invalid,
+            }}
+        >
             <Field
                 row={false}
-                component={TimeInput}
-                field={timeField ? timeField : `${field}.time`}
-                value={timeField ? get(diff, timeField) : value}
+                component={DateInput}
+                field={`${field}.date`}
+                value={value}
                 item={item}
                 diff={diff}
                 readOnly={readOnly}
@@ -90,32 +105,60 @@ export const DateTimeInput = ({
                 errors={errors}
                 showErrors={showErrors}
                 noMargin={!invalid}
+                label={label}
+                required={required}
                 popupContainer={popupContainer}
                 onFocus={onFocus}
                 onPopupOpen={onPopupOpen}
                 onPopupClose={onPopupClose}
                 remoteTimeZone={remoteTimeZone}
-                canClear={canClear}
-                allowInvalidText={allowInvalidTime}
-                isLocalTimeZoneDifferent={isLocalTimeZoneDifferent}
+                isLocalTimeZoneDifferent={isLocalTimeZoneDifferent && !props.dateOnly}
+                refNode={refNode}
                 halfWidth={!hideTime}
-                showToBeConfirmed={showToBeConfirmed}
-                onToBeConfirmed={onToBeConfirmed}
-                toBeConfirmed={toBeConfirmed}
-            />
-        )}
-        {canClear && (
-            <Button
-                onClick={() => onChange(field, null)}
-                icon="icon-close-small"
-                size="small"
-                iconOnly={true}
-                title={gettext('Clear date and time')}
-                className="btn--icon-only-circle"
+                dateOnly={props.dateOnly}
             />
-        )}
-    </Row>
-);
+
+            {!hideTime && (
+                <Field
+                    row={false}
+                    component={TimeInput}
+                    field={timeField ? timeField : `${field}.time`}
+                    value={timeValue}
+                    item={item}
+                    diff={diff}
+                    readOnly={readOnly}
+                    onChange={onChange}
+                    errors={errors}
+                    showErrors={showErrors}
+                    noMargin={!invalid}
+                    popupContainer={popupContainer}
+                    onFocus={onFocus}
+                    onPopupOpen={onPopupOpen}
+                    onPopupClose={onPopupClose}
+                    remoteTimeZone={remoteTimeZone}
+                    canClear={canClear}
+                    allowInvalidText={allowInvalidTime}
+                    isLocalTimeZoneDifferent={isLocalTimeZoneDifferent}
+                    halfWidth={!hideTime}
+                    showToBeConfirmed={showToBeConfirmed}
+                    onToBeConfirmed={onToBeConfirmed}
+                    toBeConfirmed={toBeConfirmed}
+                    required={false}
+                />
+            )}
+            {canClear && (
+                <Button
+                    onClick={() => onChange(field, null)}
+                    icon="icon-close-small"
+                    size="small"
+                    iconOnly={true}
+                    title={gettext('Clear date and time')}
+                    className="btn--icon-only-circle"
+                />
+            )}
+        </Row>
+    );
+};
 
 DateTimeInput.propTypes = {
     field: PropTypes.string.isRequired,
diff --git a/client/components/UI/Form/TimeInput/TimeInputPopup.tsx b/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
index a8b52bd0b..37657a51e 100644
--- a/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
+++ b/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
 import {range} from 'lodash';
 
@@ -10,12 +9,34 @@ import {Button} from '../../';
 
 import './style.scss';
 
+interface IProps {
+    value: any;
+    onChange(value: string): void;
+    close(): void;
+    target: string;
+    popupContainer(): void;
+    onPopupOpen(): void;
+    onPopupClose(): void;
+    showToBeConfirmed: boolean;
+    onToBeConfirmed(): void;
+    toBeConfirmedText: string;
+}
+
+interface IState {
+    currentTime: moment.Moment;
+    selectedHourIndex: number;
+    selectedMinuteIndex: number;
+}
+
 /**
  * @ngdoc react
  * @name TimeInputPopup
  * @description Main Popup Component of TimePicker
  */
-export class TimeInputPopup extends React.Component {
+export class TimeInputPopup extends React.Component<IProps, IState> {
+    hours = range(0, 24);
+    minutes = range(0, 60, 5);
+
     constructor(props) {
         super(props);
         this.state = {
@@ -23,9 +44,6 @@ export class TimeInputPopup extends React.Component {
             selectedMinuteIndex: 0,
             currentTime: moment(),
         };
-
-        this.hours = range(0, 24);
-        this.minutes = range(0, 60, 5);
     }
 
     componentWillMount() {
@@ -64,7 +82,7 @@ export class TimeInputPopup extends React.Component {
         const {onChange, close} = this.props;
 
         if (addMinutes) {
-            let newTime = moment.clone(this.state.currentTime);
+            let newTime = moment(this.state.currentTime);
 
             newTime.add(addMinutes, 'm');
             onChange(newTime.format('HH:mm'));
@@ -77,6 +95,13 @@ export class TimeInputPopup extends React.Component {
         close();
     }
 
+    handleClear() {
+        const {onChange, close} = this.props;
+
+        onChange(null);
+        close();
+    }
+
     render() {
         return (
             <Popup
@@ -89,23 +114,22 @@ export class TimeInputPopup extends React.Component {
                 onPopupClose={this.props.onPopupClose}
             >
                 <Header noBorder={true}>
-                    {!this.props.showToBeConfirmed && (
+                    {!this.props.showToBeConfirmed ? (
                         <div className="time-popup__header-row">
                             <Button
-                                onClick={this.handleConfirm.bind(this, 30)}
+                                onClick={() => this.handleConfirm(30)}
                                 text={gettext('in 30 min')}
                             />
                             <Button
-                                onClick={this.handleConfirm.bind(this, 60)}
+                                onClick={() => this.handleConfirm(60)}
                                 text={gettext('in 1 hr')}
                             />
                             <Button
-                                onClick={this.handleConfirm.bind(this, 120)}
+                                onClick={() => this.handleConfirm(120)}
                                 text={gettext('in 2 hrs')}
                             />
                         </div>
-                    )}
-                    {this.props.showToBeConfirmed && (
+                    ) : (
                         <div className="time-popup__header-row">
                             <Button
                                 onClick={() => {
@@ -126,7 +150,7 @@ export class TimeInputPopup extends React.Component {
                                 <li
                                     key={index}
                                     className={index === this.state.selectedHourIndex ? 'active' : ''}
-                                    onClick={this.setselectedHourIndex.bind(this, index)}
+                                    onClick={() => this.setselectedHourIndex(index)}
                                 >
                                     {hour < 10 ? '0' + hour : hour}
                                 </li>
@@ -140,7 +164,7 @@ export class TimeInputPopup extends React.Component {
                                 <li
                                     key={index}
                                     className={index === this.state.selectedMinuteIndex ? 'active' : ''}
-                                    onClick={this.setselectedMinuteIndex.bind(this, index)}
+                                    onClick={() => this.setselectedMinuteIndex(index)}
                                 >
                                     {minute < 10 ? '0' + minute : minute}
                                 </li>
@@ -150,12 +174,19 @@ export class TimeInputPopup extends React.Component {
                 </Content>
 
                 <Footer className="time-popup__footer">
+                    <Button
+                        text={gettext('Clear')}
+                        hollow
+                        size="small"
+                        pullRight
+                        onClick={() => this.handleClear()}
+                    />
                     <Button
                         text={gettext('Confirm')}
                         color="primary"
                         size="small"
                         pullRight={true}
-                        onClick={this.handleConfirm.bind(this, 0)}
+                        onClick={() => this.handleConfirm(0)}
                     />
                     <Button
                         text={gettext('Cancel')}
@@ -163,21 +194,9 @@ export class TimeInputPopup extends React.Component {
                         pullRight={true}
                         onClick={this.props.close}
                     />
+
                 </Footer>
             </Popup>
         );
     }
-}
-
-TimeInputPopup.propTypes = {
-    value: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    close: PropTypes.func.isRequired,
-    target: PropTypes.string.isRequired,
-    popupContainer: PropTypes.func,
-    onPopupOpen: PropTypes.func,
-    onPopupClose: PropTypes.func,
-    showToBeConfirmed: PropTypes.bool,
-    onToBeConfirmed: PropTypes.func,
-    toBeConfirmedText: PropTypes.string,
-};
+}
\ No newline at end of file
diff --git a/client/components/UI/Form/TimeInput/index.tsx b/client/components/UI/Form/TimeInput/index.tsx
index 7a3e72af7..301950cf9 100644
--- a/client/components/UI/Form/TimeInput/index.tsx
+++ b/client/components/UI/Form/TimeInput/index.tsx
@@ -21,6 +21,10 @@ import './style.scss';
  * @description Component to pick time in hours and minutes
  */
 export class TimeInput extends React.Component {
+    dom: {
+        inputField: HTMLInputElement;
+    };
+
     constructor(props) {
         super(props);
         this.state = {
@@ -90,7 +94,7 @@ export class TimeInput extends React.Component {
     }
 
     isValidInput(val) {
-        return moment(val, appConfig.planning.timeformat, true)
+        return val == null || moment(val, appConfig.planning.timeformat, true)
             .isValid();
     }
 
diff --git a/client/components/UI/utils.ts b/client/components/UI/utils.ts
index b758215d2..0521cebe3 100644
--- a/client/components/UI/utils.ts
+++ b/client/components/UI/utils.ts
@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {get} from 'lodash';
+import moment from 'moment-timezone';
 
 export {gettext, gettextCatalog} from '../../utils/gettext';
 
diff --git a/client/components/fields/editor/EndDateTime.tsx b/client/components/fields/editor/EndDateTime.tsx
index f498a5cc6..3808efda2 100644
--- a/client/components/fields/editor/EndDateTime.tsx
+++ b/client/components/fields/editor/EndDateTime.tsx
@@ -12,6 +12,7 @@ interface IProps extends IEditorFieldProps {
     isLocalTimeZoneDifferent?: boolean;
     remoteTimeZone?: string;
     onToBeConfirmed?(field: string): void;
+    dateOnly?: boolean;
 }
 
 export class EditorFieldEndDateTime extends React.PureComponent<IProps> {
diff --git a/client/components/fields/editor/EventSchedule.tsx b/client/components/fields/editor/EventSchedule.tsx
index 371d5d543..bafa9ef4c 100644
--- a/client/components/fields/editor/EventSchedule.tsx
+++ b/client/components/fields/editor/EventSchedule.tsx
@@ -4,14 +4,11 @@ import moment from 'moment-timezone';
 import {IEditorFieldProps, IEventFormProfile, IEventItem} from '../../../interfaces';
 import {superdeskApi} from '../../../superdeskApi';
 
-import {Switch} from 'superdesk-ui-framework/react';
-
 import {EditorFieldEndDateTime} from './EndDateTime';
 import {EditorFieldStartDateTime} from './StartDateTime';
 import {Row, TimeZoneInput} from '../../UI/Form';
-import {eventUtils, timeUtils} from '../../../utils';
+import {timeUtils} from '../../../utils';
 import {TO_BE_CONFIRMED_FIELD} from '../../../constants';
-import {isSameDay} from './../../../helpers';
 
 interface IProps extends IEditorFieldProps {
     item: IEventItem;
@@ -26,7 +23,6 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         super(props);
 
         this.changeSchedule = this.changeSchedule.bind(this);
-        this.onAllDayChange = this.onAllDayChange.bind(this);
         this.changeTimezone = this.changeTimezone.bind(this);
     }
 
@@ -42,7 +38,9 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         }
     }
 
-    changeStartDate(value: moment.Moment) {
+    changeStartDate(newValue: moment.Moment) {
+        let value = newValue.clone();
+
         const startDate = this.props.item?.dates?.start != null ?
             moment(this.props.item.dates.start) :
             null;
@@ -51,53 +49,58 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
             null;
         const changes = {'dates.start': value};
 
-        if (!startDate) {
-            value
-                .hour(0)
-                .minute(0);
-        } else {
+        if (this.props.item.dates?.all_day == null && this.props.item.dates?.no_end_time == null) {
+            changes['dates.all_day'] = true;
+        }
+
+        if (startDate != null) {
             value
                 .hour(startDate.hour())
-                .minute(startDate.minute());
+                .minute(startDate.minute())
+                .second(startDate.second());
+        } else {
+            value.hour(0)
+                .minute(0)
+                .second(0);
         }
 
-        if (endDate == null || endDate.isBefore(value)) {
-            // If we have an end date set, and the end date is before the new start date
-            // then set the end date to be the same as this new start date
-            changes['dates.end'] = (endDate || value).clone().add(value.diff(startDate));
+        if (this.props.item.dates?.all_day === true || changes['dates.all_day'] === true) {
+            value = localDateToUtc(value, this.props.item.dates?.tz);
+            changes['dates.start'] = value;
+        }
+
+        if (endDate == null) {
+            changes['dates.end'] = value.clone();
         }
 
         this.props.onChange(changes, null);
     }
 
     changeStartTime(value?: moment.Moment) {
+        const startDate = this.props.item?.dates?.start;
+        const endDate = this.props.item?.dates?.end;
+
         if (!value) {
-            this.props.onChange('_startTime', null);
+            const changes = {
+                _startTime: null,
+                _endTime: null,
+                'dates.start': startDate ? localDateToUtc(startDate, this.props.item?.dates?.tz) : null,
+                'dates.end': endDate ? localDateToUtc(endDate, this.props.item?.dates?.tz) : null,
+                'dates.all_day': true,
+                'dates.no_end_time': false,
+            };
+
+            this.props.onChange(changes, null);
             return;
         }
 
-        const startDate = this.props.item?.dates?.start;
-        const endDate = this.props.item?.dates?.end;
-        const _startTime = this.props.item?._startTime;
-        const defaultDurationOnChange = this.props.profile?.editor?.dates?.default_duration_on_change ?? 1;
-        const isAllDay = eventUtils.isEventAllDay(startDate, endDate, true);
-        const isMultiDay = !isSameDay(startDate, endDate);
-        const newStartDate = !startDate ?
-            value :
-            moment(startDate)
-                .hour(value.hour())
-                .minute(value.minute())
-                .second(value.second());
-
-        const changes = {'dates.start': newStartDate};
-
-        if (((_startTime && isAllDay) || !_startTime) &&
-            defaultDurationOnChange > 0 &&
-            !isMultiDay
-        ) {
-            changes['dates.end'] = newStartDate.clone().add(defaultDurationOnChange, 'h');
-            changes['_endTime'] = changes['dates.end'].clone();
-        }
+        const newStartDate = !startDate ? value : combineDateTime(startDate, value, this.props.item.dates?.tz);
+        const changes = {
+            'dates.start': newStartDate,
+            'dates.all_day': false,
+            'dates.no_end_time': this.props.item.dates.no_end_time ?? true,
+        };
+
         changes['_startTime'] = newStartDate;
         this.setToBeConfirmed(changes);
         this.props.onChange(changes, null);
@@ -107,41 +110,57 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         const startDate = this.props.item?.dates?.start;
         const changes = {'dates.end': value};
 
+        if (this.props.item.dates?.all_day == null && this.props.item.dates?.no_end_time == null) {
+            changes['dates.all_day'] = true;
+        }
+
+        if (this.props.item.dates?.all_day === true || changes['dates.all_day'] === true ||
+            this.props.item.dates?.no_end_time === true || changes['dates.no_end_time'] === true) {
+            changes['dates.end'] = localDateToUtc(value, this.props.item.dates?.tz);
+        }
+
         if (!startDate) {
             // If we have a new end date with no start date set
             // then set the start date as well
-            changes['dates.start'] = value.clone().startOf('day');
+            changes['dates.start'] = value.clone();
+        }
+
+        if (this.props.item.dates?.all_day === true || changes['dates.all_day'] === true ||
+            this.props.item.dates?.no_end_time === true || changes['dates.no_end_time'] === true) {
+            changes['dates.end'] = localDateToUtc(value, this.props.item.dates?.tz);
         }
+
         this.props.onChange(changes, null);
     }
 
     changeEndTime(value?: moment.Moment) {
         if (!value) {
-            this.props.onChange('_endTime', null);
+            const hasStartTime = this.props.item._startTime != null;
+            const changes = {
+                _endTime: null,
+                'dates.end': this.props.item.dates?.end ?
+                    localDateToUtc(this.props.item.dates.end, this.props.item.dates.tz)
+                    : null,
+                'dates.all_day': !hasStartTime,
+                'dates.no_end_time': hasStartTime,
+            };
+
+            this.props.onChange(changes, null);
             return;
         }
 
-        const startDate = this.props.item?.dates?.start;
         const endDate = this.props.item?.dates?.end != null ?
             moment(this.props.item.dates.end) :
             null;
-        const _endTime = this.props.item?._endTime;
-        const defaultDurationOnChange = this.props.profile?.editor?.dates?.default_duration_on_change ?? 1;
-        const newEndDate = endDate ?
-            endDate.hour(value.hour()).minute(value.minute()) :
-            value;
-        const isAllDay = eventUtils.isEventAllDay(startDate, endDate, true);
-        const isMultiDay = !isSameDay(startDate, endDate);
-        const changes = {'dates.end': newEndDate};
-
-        if (((_endTime && isAllDay) || !_endTime) &&
-            defaultDurationOnChange > 0 &&
-            !isMultiDay
-        ) {
-            changes['dates.start'] = newEndDate.clone().subtract(defaultDurationOnChange, 'h');
-            changes['_startTime'] = changes['dates.start'].clone();
-        }
-        changes['_endTime'] = newEndDate;
+        const newEndDate = endDate ? combineDateTime(endDate, value, this.props.item.dates?.tz) : value;
+
+        const changes = {
+            _endTime: newEndDate,
+            'dates.end': newEndDate,
+            'dates.all_day': false,
+            'dates.no_end_time': false,
+        };
+
         this.setToBeConfirmed(changes);
         this.props.onChange(changes, null);
     }
@@ -153,39 +172,6 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         }
     }
 
-    onAllDayChange(isAllDay: boolean) {
-        const dates = this.props.item?.dates ?? this.props.defaultValue ?? {};
-        const nowTz = dates.tz ?
-            moment.tz(dates.tz) :
-            moment();
-        const newStart = moment(dates.start || nowTz)
-            .startOf('day');
-        let newEnd: moment.Moment;
-        let startTime: moment.Moment;
-        let endTime: moment.Moment;
-
-        if (isAllDay) {
-            // If allDay is enabled, then set the event to all day
-            newEnd = moment(dates.end || nowTz).endOf('day');
-            startTime = newStart.clone();
-            endTime = newEnd.clone();
-        } else {
-            // If allDay is disabled, then set the new dates to the initial values
-            // since last save and time to empty
-            newEnd = moment(dates.end || newStart)
-                .hour(0)
-                .minute(1);
-        }
-
-        this.props.onChange({
-            'dates.start': newStart,
-            'dates.end': newEnd,
-            _startTime: startTime,
-            _endTime: endTime,
-            _time_to_be_confirmed: false,
-        }, null);
-    }
-
     changeTimezone(_: string, timezone?: string) {
         const dtFormat = 'DD/MM/YYYY HH:mm';
         const dates = this.props.item?.dates ?? {};
@@ -216,11 +202,6 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         const field = this.props.field ?? 'dates';
         const value = this.props.item?.dates ?? this.props.defaultValue ?? {};
         const eventRepeats = value?.recurring_rule != null;
-        const isAllDay = eventUtils.isEventAllDay(
-            this.props.item.dates?.start,
-            this.props.item.dates?.end,
-            true
-        );
         const isLocalTimeZoneDifferent = timeUtils.isEventInDifferentTimeZone(this.props.item);
         const {
             refNode,
@@ -247,6 +228,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
                     toBeConfirmed={this.props.item[TO_BE_CONFIRMED_FIELD] === true}
                     isLocalTimeZoneDifferent={isLocalTimeZoneDifferent}
                     remoteTimeZone={this.props.item.dates?.tz}
+                    dateOnly={this.props.item.dates?.all_day}
                 />
                 <EditorFieldEndDateTime
                     {...props}
@@ -265,22 +247,13 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
                     toBeConfirmed={this.props.item[TO_BE_CONFIRMED_FIELD] === true}
                     isLocalTimeZoneDifferent={isLocalTimeZoneDifferent}
                     remoteTimeZone={this.props.item.dates?.tz}
+                    dateOnly={this.props.item.dates?.no_end_time || this.props.item.dates?.all_day}
                 />
                 <Row
                     flex={true}
                     noPadding={true}
                 >
-                    {!this.props.showAllDay ? null : (
-                        <div data-test-id={`${this.props.testId}_all_day`}>
-                            <Switch
-                                label={{content: gettext('All Day')}}
-                                value={isAllDay}
-                                onChange={this.onAllDayChange}
-                            />
-                        </div>
-                    )}
-
-                    {!this.props.showTimeZone ? null : (
+                    {this.props.showTimeZone && this.props.item._startTime && (
                         <TimeZoneInput
                             testId={`${this.props.testId}_timezone`}
                             field="dates.tz"
@@ -297,3 +270,24 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         );
     }
 }
+
+/**
+ * Combines date from the first argument with time from the second argument
+ */
+function combineDateTime(date: moment.MomentInput, time: moment.Moment, tz?: string): moment.Moment {
+    return moment.tz(moment(date).format('YYYY-MM-DD'), tz) // we only want the date part
+        .hour(time.hour())
+        .minute(time.minute())
+        .second(time.second());
+}
+
+/**
+ * Converts datetime in given timezone to date only in utc
+ * eg. 2024-12-10T23:00:00-05:00 -> 2024-12-11T00:00:00Z
+ */
+function localDateToUtc(date: moment.MomentInput, tz?: string): moment.Moment {
+    return moment.utc(tz ?
+        moment.tz(date, tz).format('YYYY-MM-DD') :
+        moment(date).format('YYYY-MM-DD')
+    );
+}
\ No newline at end of file
diff --git a/client/components/fields/editor/StartDateTime.tsx b/client/components/fields/editor/StartDateTime.tsx
index 94207e156..935e6cda2 100644
--- a/client/components/fields/editor/StartDateTime.tsx
+++ b/client/components/fields/editor/StartDateTime.tsx
@@ -12,6 +12,7 @@ interface IProps extends IEditorFieldProps {
     isLocalTimeZoneDifferent?: boolean;
     remoteTimeZone?: string;
     onToBeConfirmed?(field: string): void;
+    dateOnly?: boolean;
 }
 
 export class EditorFieldStartDateTime extends React.PureComponent<IProps> {
diff --git a/client/components/fields/editor/base/dateTime.tsx b/client/components/fields/editor/base/dateTime.tsx
index 2dab13dde..47cfdf60a 100644
--- a/client/components/fields/editor/base/dateTime.tsx
+++ b/client/components/fields/editor/base/dateTime.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import moment from 'moment';
-import {get} from 'lodash';
 
 import {IEditorFieldProps} from '../../../../interfaces';
 import {DateTimeInput} from '../../../UI/Form';
+import {get} from 'lodash';
 
 interface IProps extends IEditorFieldProps {
     canClear?: boolean;
@@ -13,6 +13,7 @@ interface IProps extends IEditorFieldProps {
     remoteTimeZone?: string;
     singleValue?: boolean;
     onToBeConfirmed?(field: string): void;
+    dateOnly?: boolean;
 }
 
 export class EditorFieldDateTime extends React.PureComponent<IProps> {
@@ -43,10 +44,8 @@ export class EditorFieldDateTime extends React.PureComponent<IProps> {
     render() {
         const field = this.props.field;
         const value = get(this.props.item, field, this.props.defaultValue);
-        const momentValue = value != null ?
-            moment(value) :
-            null;
-        const error = get(this.props.errors ?? {}, field);
+        const momentValue = value != null ? moment(value) : undefined; // use moment.utc?
+        const error = get(this.props.errors ?? {}, field) || undefined;
 
         return (
             <DateTimeInput
@@ -63,6 +62,7 @@ export class EditorFieldDateTime extends React.PureComponent<IProps> {
                 refNode={(node) => {
                     this.node = node;
                 }}
+                dateOnly={this.props.dateOnly}
             />
         );
     }
diff --git a/client/utils/events.tsx b/client/utils/events.tsx
index 373970e95..ce821c459 100644
--- a/client/utils/events.tsx
+++ b/client/utils/events.tsx
@@ -1162,14 +1162,16 @@ function modifyForClient(event: Partial<IEventItem>): Partial<IEventItem> {
         delete event._status;
     }
 
-    if (get(event, 'dates.start')) {
+    if (event.dates?.start != null) {
         event.dates.start = timeUtils.getDateInRemoteTimeZone(event.dates.start, timeUtils.localTimeZone());
-        event._startTime = timeUtils.getDateInRemoteTimeZone(event.dates.start, timeUtils.localTimeZone());
+        event._startTime = event.dates.all_day ? null
+            : timeUtils.getDateInRemoteTimeZone(event.dates.start, timeUtils.localTimeZone());
     }
 
-    if (get(event, 'dates.end')) {
+    if (event.dates?.end != null) {
         event.dates.end = timeUtils.getDateInRemoteTimeZone(event.dates.end, timeUtils.localTimeZone());
-        event._endTime = timeUtils.getDateInRemoteTimeZone(event.dates.end, timeUtils.localTimeZone());
+        event._endTime = event.dates.all_day || event.dates.no_end_time ? null
+            : timeUtils.getDateInRemoteTimeZone(event.dates.end, timeUtils.localTimeZone());
     }
 
     if (get(event, 'dates.recurring_rule.until')) {
diff --git a/client/utils/time.ts b/client/utils/time.ts
index 71dfa6bb7..39c69e32e 100644
--- a/client/utils/time.ts
+++ b/client/utils/time.ts
@@ -114,7 +114,7 @@ function localTimeZone(): string {
     return moment.tz.guess();
 }
 
-function getDateInRemoteTimeZone(date: moment.Moment, tz: string = self.localTimeZone()): moment.Moment {
+function getDateInRemoteTimeZone(date: moment.MomentInput, tz: string = self.localTimeZone()): moment.Moment {
     let dateToCheck;
 
     if (!date) {
diff --git a/client/validators/events.ts b/client/validators/events.ts
index 2d8caf0c4..e603bf23a 100644
--- a/client/validators/events.ts
+++ b/client/validators/events.ts
@@ -26,12 +26,12 @@ const validateRequiredDates = ({value, errors, messages, diff}) => {
     }
 
     if (!get(diff, TO_BE_CONFIRMED_FIELD)) {
-        if (!get(value, '_startTime')) {
+        if (!value._startTime && value.all_day !== true) {
             set(errors, '_startTime', gettext('This field is required'));
             messages.push(gettext('START TIME is a required field'));
         }
 
-        if (!get(value, '_endTime')) {
+        if (!value._endTime && value.all_day !== true && value.no_end_time !== true) {
             set(errors, '_endTime', gettext('This field is required'));
             messages.push(gettext('END TIME is a required field'));
         }
@@ -42,11 +42,11 @@ const validateDateRange = ({value, errors, messages}) => {
     let startDate = moment(value.start);
     let endDate = moment(value.end);
 
-    if (!self.valdiateStartEndDateValues(value, startDate, endDate)) {
+    if (!self.validateStartEndDateValues(value, startDate, endDate)) {
         return;
     }
 
-    if (endDate.isSameOrBefore(startDate, 'minutes')) {
+    if (endDate.isSameOrBefore(startDate, 'minutes') && !value.all_day && !value.no_end_time) {
         if (isSameDay(value.start, value.end)) {
             set(errors, '_endTime', gettext('End time should be after start time'));
             messages.push(gettext('END TIME should be after START TIME'));
@@ -136,7 +136,7 @@ const validateMultiDayDuration = ({value, errors, messages}) => {
     let startDate = moment(value.start);
     let endDate = moment(value.end);
 
-    if (!self.valdiateStartEndDateValues(value, startDate, endDate)) {
+    if (!self.validateStartEndDateValues(value, startDate, endDate)) {
         return;
     }
 
@@ -292,10 +292,14 @@ const validateLinks = ({dispatch, getState, field, value, profile, errors, messa
     }
 };
 
-const valdiateStartEndDateValues = (value, startDate, endDate) => {
+const validStartTime = (value) => value.all_day || (value._startTime && moment.isMoment(value._startTime));
+const validEndTime = (value) => value.all_day || value.no_end_time || (
+    value._endTime && moment.isMoment(value._endTime)
+);
+
+const validateStartEndDateValues = (value, startDate, endDate) => {
     if (!get(value, 'start') || !get(value, 'end') || !moment.isMoment(value.start) || !moment.isMoment(value.end) ||
-        !get(value, '_startTime') || !get(value, '_endTime') || !moment.isMoment(value._startTime) ||
-        !moment.isMoment(value._endTime)) {
+        !validStartTime(value) || !validEndTime(value)) {
         return false;
     }
 
@@ -320,7 +324,7 @@ const self = {
     validateFiles,
     validateLinks,
     validateMultiDayDuration,
-    valdiateStartEndDateValues,
+    validateStartEndDateValues,
 };
 
 export default self;
diff --git a/client/validators/index.ts b/client/validators/index.ts
index 0d77b7797..8f05df611 100644
--- a/client/validators/index.ts
+++ b/client/validators/index.ts
@@ -58,8 +58,8 @@ export const validateItem = ({
         const getValue = (key) => (
             key !== 'dates' ? get(diff, key) : {
                 ...get(diff, key),
-                _startTime: get(diff, '_startTime'),
-                _endTime: get(diff, '_endTime'),
+                _startTime: diff._startTime,
+                _endTime: diff._endTime,
             }
         );
 
diff --git a/e2e/cypress/e2e/events/edit_event.cy.ts b/e2e/cypress/e2e/events/edit_event.cy.ts
index 10737cb75..9b7de9cf6 100644
--- a/e2e/cypress/e2e/events/edit_event.cy.ts
+++ b/e2e/cypress/e2e/events/edit_event.cy.ts
@@ -47,9 +47,6 @@ describe('Planning.Events: edit metadata', () => {
     });
 
     it('can create an Event', () => {
-        event['dates.allDay'] = true;
-        expectedEvent['dates.allDay'] = true;
-
         list.expectEmpty();
         editor.expectItemType();
         workqueue.expectTitle(0, 'Untitled*');
@@ -72,19 +69,18 @@ describe('Planning.Events: edit metadata', () => {
         list.expectEmpty();
         editor.expectItemType();
 
+        // TODO(petr): make recurring events work with all day events
         event = {
             ...event,
             'dates.recurring.enable': true,
-            'dates.recurring.until': moment().add(1, 'day').format(CLIENT_FORMAT),
-            'dates.allDay': true,
+            'dates.recurring.until': moment().add(2, 'day').format(CLIENT_FORMAT),
             slugline: 'slugline of the recurring event',
             name: 'name of the recurring event',
         };
         expectedEvent = {
             ...expectedEvent,
             'dates.recurring.enable': true,
-            'dates.recurring.until': moment().add(1, 'day').format(CLIENT_FORMAT),
-            'dates.allDay': true,
+            'dates.recurring.until': moment().add(2, 'day').format(CLIENT_FORMAT),
             slugline: 'slugline of the recurring event',
             name: 'name of the recurring event',
         };
@@ -135,7 +131,6 @@ describe('Planning.Events: edit metadata', () => {
         editor.expectItemType();
         editor.type({
             'dates.start.date': moment().format(CLIENT_FORMAT),
-            'dates.allDay': true,
             slugline: 'slugline of the event',
             name: 'name of the event',
         });
@@ -182,12 +177,14 @@ describe('Planning.Events: edit metadata', () => {
 describe('Planing.Events: edit existing events', () => {
     beforeEach(() => {
         setup({fixture_profile: 'planning_prepopulate_data'}, '/#/planning');
+
         addItems('events', [createEventFor.tomorrow({
             ...cloneDeep(TEST_EVENTS.date_01_02_2045),
         }), createEventFor.tomorrow({
             ...cloneDeep(TEST_EVENTS.date_02_02_2045),
             }, null),
         ]);
+
         login();
 
         waitForPageLoad.planning();
diff --git a/e2e/cypress/e2e/events/event_action_duplicate.cy.ts b/e2e/cypress/e2e/events/event_action_duplicate.cy.ts
index c9d28bd6f..84a03a37a 100644
--- a/e2e/cypress/e2e/events/event_action_duplicate.cy.ts
+++ b/e2e/cypress/e2e/events/event_action_duplicate.cy.ts
@@ -21,6 +21,7 @@ describe('Planning.Events: duplicate event', () => {
             definition_short: 'Desc.',
             'dates.start.date': now.format(CLIENT_FORMAT),
             'dates.start.time': '00:00',
+            'dates.end.time': '01:00',
             occur_status: 'Planned, occurs certainly',
             calendars: ['Sport'],
             anpa_category: ['Finance'],
diff --git a/e2e/cypress/e2e/events/event_all_day.cy.ts b/e2e/cypress/e2e/events/event_all_day.cy.ts
new file mode 100644
index 000000000..3a1a0103e
--- /dev/null
+++ b/e2e/cypress/e2e/events/event_all_day.cy.ts
@@ -0,0 +1,111 @@
+import moment from 'moment';
+import {setup, login, waitForPageLoad, SubNavBar, Workqueue, CLIENT_FORMAT} from '../../support/common';
+import {PlanningList, EventEditor} from '../../support/planning';
+import {getDateStringFor} from '../../support/utils/time';
+import {create} from 'lodash';
+
+describe('Planning.Events: all day', () => {
+    const editor = new EventEditor();
+    const subnav = new SubNavBar();
+    const list = new PlanningList();
+
+    const baseEvent = {
+        'dates.start.date': getDateStringFor.today(),
+        slugline: 'Event',
+        name: 'Test',
+        calendars: ['Sport'],
+    };
+
+    beforeEach(() => {
+        setup({fixture_profile: 'planning_prepopulate_data'}, '/#/planning');
+
+        login();
+
+        waitForPageLoad.planning();
+        subnav.createEvent();
+        editor.waitTillOpen();
+    });
+
+    const createEvent = (event, expectedEvent, expectedCount: number) => {
+        editor.openAllToggleBoxes();
+        editor.type(event);
+        editor.expect(expectedEvent);
+        editor.createButton
+            .should('exist')
+            .click();
+        list.expectItemCount(expectedCount);
+    }
+
+    it('can create single day event without start and end time', () => {
+        const event = {
+            ...baseEvent, 
+            'dates.start.date': moment().format(CLIENT_FORMAT),
+        };
+
+        const expectedEvent = {
+            ...event,
+            'dates.end.date': event['dates.start.date'],
+        };
+
+        createEvent(event, expectedEvent, 1);
+
+        list.item(0).find('[data-test-id="event-start-date"]').should('contain.text', event['dates.start.date']);
+        list.item(0).find('[data-test-id="event-end-date"]').should('contain.text', '');
+    });
+
+    it('can create multi day event without start and end time', () => {
+        const event = {
+            ...baseEvent, 
+            'dates.start.date': moment().format(CLIENT_FORMAT),
+            'dates.end.date': moment().add(1, 'day').format(CLIENT_FORMAT),
+        };
+
+        const expectedEvent = {
+            ...event,
+            'dates.end.date': event['dates.end.date'],
+        };
+
+        createEvent(event, expectedEvent, 2);
+
+        list.item(0).find('[data-test-id="event-start-date"]').should('contain.text', event['dates.start.date']);
+        list.item(0).find('[data-test-id="event-end-date"]').should('contain.text', event['dates.end.date']);
+    });
+
+    it('can create single day event with start time', () => {
+        const event = {
+            ...baseEvent, 
+            'dates.start.date': moment().format(CLIENT_FORMAT),
+            'dates.start.time': '12:00',
+        };
+
+        const expectedEvent = {
+            ...event,
+            'dates.end.date': event['dates.start.date'],
+        };
+
+        createEvent(event, expectedEvent, 1);
+
+        list.item(0).find('[data-test-id="event-start-date"]').should('contain.text', moment().format('DD/MM\xa0[12:00]')); // &nbsp;
+        list.item(0).find('[data-test-id="event-end-date"]').should('contain.text', '');
+    });
+
+    it('can create multi day event with start time', () => {
+        const event = {
+            ...baseEvent, 
+            'dates.start.date': moment().format(CLIENT_FORMAT),
+            'dates.start.time': '12:00',
+            'dates.end.date': moment().add(1, 'day').format(CLIENT_FORMAT),
+        };
+
+        const expectedEvent = {
+            ...event,
+            'dates.end.date': event['dates.end.date'],
+        };
+
+        createEvent(event, expectedEvent, 2);
+
+        list.item(0).find('[data-test-id="event-start-date"]').should('contain.text', moment().format('DD/MM\xa0[12:00]')); // &nbsp;
+        list.item(0).find('[data-test-id="event-end-date"]').should('contain.text', event['dates.end.date']);
+    });
+
+});
\ No newline at end of file
diff --git a/e2e/cypress/e2e/events/event_embedded_coverage.cy.ts b/e2e/cypress/e2e/events/event_embedded_coverage.cy.ts
index 4e67f897f..f1497a282 100644
--- a/e2e/cypress/e2e/events/event_embedded_coverage.cy.ts
+++ b/e2e/cypress/e2e/events/event_embedded_coverage.cy.ts
@@ -24,7 +24,6 @@ describe('Planning.Events: embedded coverage', () => {
         // Enter required fields (so we can create the Event & Planning)
         editor.type({
             'dates.start.date': moment().format(CLIENT_FORMAT),
-            'dates.allDay': true,
             slugline: 'slugline of the event',
             name: 'name of the event',
         });
@@ -335,7 +334,6 @@ describe('Planning.Events: embedded coverage', () => {
         // Fill in the dates (which should also update the Planning/Coverage dates)
         editor.type({
             'dates.start.date': now.format(CLIENT_FORMAT),
-            'dates.allDay': true,
         });
 
         // Make sure the date has been updated for the Coverage
diff --git a/e2e/cypress/support/planning/events/eventEditor.ts b/e2e/cypress/support/planning/events/eventEditor.ts
index 2d816b70b..254f38b7d 100644
--- a/e2e/cypress/support/planning/events/eventEditor.ts
+++ b/e2e/cypress/support/planning/events/eventEditor.ts
@@ -31,7 +31,6 @@ export class EventEditor extends Editor {
                     date: new Input(getParent, '[data-test-id="field-dates_end"] input[name="dates.end.date"]'),
                     time: new Input(getParent, '[data-test-id="field-dates_end"] input[name="_endTime"]'),
                 },
-                allDay: new ToggleInput(getParent, '[data-test-id="field-dates_all_day"]'),
                 recurring: {
                     enable: new ToggleInput(
                         getParent,
diff --git a/e2e/cypress/support/utils/time.ts b/e2e/cypress/support/utils/time.ts
index bd37fc049..7697820a2 100644
--- a/e2e/cypress/support/utils/time.ts
+++ b/e2e/cypress/support/utils/time.ts
@@ -28,18 +28,15 @@ export function getStartOfNextWeek(): moment.Moment {
 }
 
 export const getDateStringFor = {
-    today: () => moment()
+    today: () => moment.utc()
         .set({hour: 0})
-        .utc()
         .format('YYYY-MM-DD'),
-    yesterday: () => moment()
+    yesterday: () => moment.utc()
         .set({hour: 0})
-        .utc()
         .subtract(1, 'd')
         .format('YYYY-MM-DD'),
-    tomorrow: () => moment()
+    tomorrow: () => moment.utc()
         .set({hour: 0})
-        .utc()
         .add(1, 'd')
         .format('YYYY-MM-DD'),
     next_week: () => getStartOfNextWeek()
@@ -47,9 +44,8 @@ export const getDateStringFor = {
 };
 
 export function getTimeStringForHour(hour: number): string {
-    return moment()
+    return moment.utc()
         .set({hour: hour})
-        .utc()
         .format('THH:00:00+0000');
 }
 
diff --git a/e2e/package.json b/e2e/package.json
index 4652fb99b..279d04306 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@superdesk/build-tools": "^1.0.14",
-    "cypress": "^12.6.0",
+    "cypress": "^13.16.1",
     "cypress-real-events": "^1.7.6",
     "cypress-terminal-report": "^5.0.2",
     "extract-text-webpack-plugin": "3.0.2",
diff --git a/e2e/server/Procfile b/e2e/server/Procfile
index aec261efb..c710c11a5 100644
--- a/e2e/server/Procfile
+++ b/e2e/server/Procfile
@@ -1,3 +1,3 @@
 rest: gunicorn -c gunicorn_config.py wsgi
 wamp: python3 -u ws.py
-web: python3 -m http.server -d ../dist 9000
\ No newline at end of file
+web: python3 -m http.server -d ../dist 9000
diff --git a/package-lock.json b/package-lock.json
index 97136ad12..f255b59b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1336,6 +1336,16 @@
       "integrity": "sha512-nbE1WxOTTrUWIfsfZ4aHGYu5DOuNkbxGokjV6Z2kxfJK3uaAb8zNK1muzOeipoLHZjInT4Br88BHpzevc681xA==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -4416,6 +4426,13 @@
       "integrity": "sha512-0k45oWBokCqh2MOexeYKpyqmGKG+8mQ2Wd8iawx+uWd/weWJQAZ6SoPybagdCI4xFisag8iAR77WPm4h3pTfxA==",
       "dev": true
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
@@ -12240,7 +12257,7 @@
         "sass-loader": "6.0.6",
         "shortid": "2.2.8",
         "style-loader": "0.20.2",
-        "superdesk-ui-framework": "^4.0.0",
+        "superdesk-ui-framework": "4.0.3",
         "ts-loader": "3.5.0",
         "typescript": "4.9.5",
         "uuid": "8.3.1",
@@ -13331,6 +13348,7 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
@@ -13829,6 +13847,7 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
diff --git a/server/planning/events/events.py b/server/planning/events/events.py
index 058894b7f..655fea17d 100644
--- a/server/planning/events/events.py
+++ b/server/planning/events/events.py
@@ -14,7 +14,7 @@
 import logging
 import itertools
 from copy import deepcopy
-from datetime import timedelta
+from datetime import datetime, timedelta
 
 import pytz
 import re
@@ -357,13 +357,19 @@ def _validate_dates(self, updates, original=None):
         @:param dict event:
         """
         event = updates if updates.get("dates") or not original else original
-        start_date = event.get("dates", {}).get("start")
-        end_date = event.get("dates", {}).get("end")
+        dates = event.get("dates", {})
+        start_date = dates.get("start")
+        end_date = dates.get("end")
 
         if not start_date or not end_date:
             raise SuperdeskApiError(message="Event START DATE and END DATE are mandatory.")
 
-        if end_date < start_date:
+        if (
+            dates.get("no_end_time") is True
+            and end_date.date() < get_local_date(dates.get("start"), dates.get("tz")).date()
+        ):
+            raise SuperdeskApiError(message="END TIME should be after START TIME")
+        elif dates.get("no_end_time") is not True and end_date < start_date:
             raise SuperdeskApiError(message="END TIME should be after START TIME")
 
         if (
@@ -1031,3 +1037,10 @@ def generate_recurring_events(event, recurrence_id=None):
 def set_planning_schedule(event):
     if event and event.get("dates") and event["dates"].get("start"):
         event["_planning_schedule"] = [{"scheduled": event["dates"]["start"]}]
+
+
+def get_local_date(date: datetime, tz: str) -> datetime:
+    try:
+        return date.astimezone(pytz.timezone(tz))
+    except pytz.exceptions.UnknownTimeZoneError:
+        return date

From 653f3f90aa2451089f1ab99b6e669798a3538bdf Mon Sep 17 00:00:00 2001
From: Petr Jasek <jasekpetr@gmail.com>
Date: Thu, 12 Dec 2024 11:43:33 +0100
Subject: [PATCH 2/4] bump python version in github e2e action

---
 .github/workflows/ci-e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci-e2e.yml b/.github/workflows/ci-e2e.yml
index 6bcb6b1b6..6be47f922 100644
--- a/.github/workflows/ci-e2e.yml
+++ b/.github/workflows/ci-e2e.yml
@@ -8,7 +8,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        python-version: ['3.8']
+        python-version: ['3.10']
         node-version: ['14']
         e2e: ['a', 'b']
     env:

From 34e5e2fde0ceb329e8c2262acfec265f60769494 Mon Sep 17 00:00:00 2001
From: Petr Jasek <jasekpetr@gmail.com>
Date: Fri, 13 Dec 2024 10:46:01 +0100
Subject: [PATCH 3/4] handle feedback

---
 .../UI/Form/TimeInput/TimeInputPopup.tsx      |  4 ++--
 .../fields/editor/EventSchedule.tsx           | 24 +++++++++++--------
 .../fields/editor/base/dateTime.tsx           |  4 ++--
 client/interfaces.ts                          |  4 +++-
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/client/components/UI/Form/TimeInput/TimeInputPopup.tsx b/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
index 37657a51e..876c5ca66 100644
--- a/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
+++ b/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
@@ -11,7 +11,7 @@ import './style.scss';
 
 interface IProps {
     value: any;
-    onChange(value: string): void;
+    onChange(value: string | null): void;
     close(): void;
     target: string;
     popupContainer(): void;
@@ -82,7 +82,7 @@ export class TimeInputPopup extends React.Component<IProps, IState> {
         const {onChange, close} = this.props;
 
         if (addMinutes) {
-            let newTime = moment(this.state.currentTime);
+            const newTime = moment(this.state.currentTime);
 
             newTime.add(addMinutes, 'm');
             onChange(newTime.format('HH:mm'));
diff --git a/client/components/fields/editor/EventSchedule.tsx b/client/components/fields/editor/EventSchedule.tsx
index bafa9ef4c..9656c508a 100644
--- a/client/components/fields/editor/EventSchedule.tsx
+++ b/client/components/fields/editor/EventSchedule.tsx
@@ -26,7 +26,11 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         this.changeTimezone = this.changeTimezone.bind(this);
     }
 
-    changeSchedule(field: string, value: moment.Moment) {
+    changeSchedule(field: string | {[key: string]: any}, value?: moment.Moment) {
+        if (value == null) {
+            return; // shouldn't happen
+        }
+
         if (field === 'dates.start.date') {
             this.changeStartDate(value);
         } else if (field === '_startTime') {
@@ -73,7 +77,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
             changes['dates.end'] = value.clone();
         }
 
-        this.props.onChange(changes, null);
+        this.props.onChange(changes);
     }
 
     changeStartTime(value?: moment.Moment) {
@@ -90,7 +94,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
                 'dates.no_end_time': false,
             };
 
-            this.props.onChange(changes, null);
+            this.props.onChange(changes);
             return;
         }
 
@@ -103,7 +107,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
 
         changes['_startTime'] = newStartDate;
         this.setToBeConfirmed(changes);
-        this.props.onChange(changes, null);
+        this.props.onChange(changes);
     }
 
     changeEndDate(value: moment.Moment) {
@@ -130,7 +134,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
             changes['dates.end'] = localDateToUtc(value, this.props.item.dates?.tz);
         }
 
-        this.props.onChange(changes, null);
+        this.props.onChange(changes);
     }
 
     changeEndTime(value?: moment.Moment) {
@@ -145,7 +149,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
                 'dates.no_end_time': hasStartTime,
             };
 
-            this.props.onChange(changes, null);
+            this.props.onChange(changes);
             return;
         }
 
@@ -162,7 +166,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         };
 
         this.setToBeConfirmed(changes);
-        this.props.onChange(changes, null);
+        this.props.onChange(changes);
     }
 
     setToBeConfirmed(changes) {
@@ -194,7 +198,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         addChange('dates.end', dates.end);
         addChange('_endTime', _endTime);
 
-        this.props.onChange(changes, null);
+        this.props.onChange(changes);
     }
 
     render() {
@@ -223,7 +227,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
                     onChange={this.changeSchedule}
                     showToBeConfirmed
                     onToBeConfirmed={() => {
-                        this.props.onChange({[TO_BE_CONFIRMED_FIELD]: true}, null);
+                        this.props.onChange({[TO_BE_CONFIRMED_FIELD]: true});
                     }}
                     toBeConfirmed={this.props.item[TO_BE_CONFIRMED_FIELD] === true}
                     isLocalTimeZoneDifferent={isLocalTimeZoneDifferent}
@@ -242,7 +246,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
                     onChange={this.changeSchedule}
                     showToBeConfirmed
                     onToBeConfirmed={() => {
-                        this.props.onChange({[TO_BE_CONFIRMED_FIELD]: true}, null);
+                        this.props.onChange({[TO_BE_CONFIRMED_FIELD]: true});
                     }}
                     toBeConfirmed={this.props.item[TO_BE_CONFIRMED_FIELD] === true}
                     isLocalTimeZoneDifferent={isLocalTimeZoneDifferent}
diff --git a/client/components/fields/editor/base/dateTime.tsx b/client/components/fields/editor/base/dateTime.tsx
index 47cfdf60a..2100abb08 100644
--- a/client/components/fields/editor/base/dateTime.tsx
+++ b/client/components/fields/editor/base/dateTime.tsx
@@ -44,8 +44,8 @@ export class EditorFieldDateTime extends React.PureComponent<IProps> {
     render() {
         const field = this.props.field;
         const value = get(this.props.item, field, this.props.defaultValue);
-        const momentValue = value != null ? moment(value) : undefined; // use moment.utc?
-        const error = get(this.props.errors ?? {}, field) || undefined;
+        const momentValue = value != null ? moment(value) : undefined;
+        const error = get(this.props.errors ?? {}, field);
 
         return (
             <DateTimeInput
diff --git a/client/interfaces.ts b/client/interfaces.ts
index ba1378e20..bcc53f37a 100644
--- a/client/interfaces.ts
+++ b/client/interfaces.ts
@@ -1581,7 +1581,9 @@ export interface IEditorFieldProps {
     editorType?: EDITOR_TYPE;
     profile?: IPlanningContentProfile;
 
-    onChange(field: string | {[key: string]: any}, value: any): void;
+    onChange(field: string, value: any): void;
+    onChange(values: {[key: string]: any}): void;
+
     popupContainer?(): HTMLElement;
 }
 

From fe119a93c064f476f1af059d2c3715f528652e95 Mon Sep 17 00:00:00 2001
From: Petr Jasek <jasekpetr@gmail.com>
Date: Fri, 13 Dec 2024 11:05:20 +0100
Subject: [PATCH 4/4] fix extension compile

---
 .../src/ingest_rule_autopost/AutopostIngestRuleEditor.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/planning-extension/src/ingest_rule_autopost/AutopostIngestRuleEditor.tsx b/client/planning-extension/src/ingest_rule_autopost/AutopostIngestRuleEditor.tsx
index 7ce07ccee..8e0e1a1a8 100644
--- a/client/planning-extension/src/ingest_rule_autopost/AutopostIngestRuleEditor.tsx
+++ b/client/planning-extension/src/ingest_rule_autopost/AutopostIngestRuleEditor.tsx
@@ -42,7 +42,7 @@ export class AutopostIngestRuleEditor extends React.PureComponent<IProps, IState
         };
     }
 
-    updateAttributes<T extends keyof IExtraAttributes>(field: T, value: IExtraAttributes[T]) {
+    updateAttributes<T extends keyof IExtraAttributes>(field: T, value?: IExtraAttributes[T]) {
         this.props.updateRule({
             ...this.props.rule,
             actions: {