From 607f4b3862611d6354f41b466454b327b2f20cf3 Mon Sep 17 00:00:00 2001
From: nagyad <joevagyok@gmail.com>
Date: Tue, 15 Feb 2022 18:17:10 +0100
Subject: [PATCH] EWPP-1983: Replace event date fields with timezone ones.

---
 composer.json                                 |  2 +-
 ...ormat.oe_event_long_date_hour_timezone.yml |  7 +++
 ...re.date_format.oe_event_programme_date.yml |  7 ---
 ...te_format.oe_event_programme_date_hour.yml |  7 ---
 ....oe_event_programme_date_hour_timezone.yml |  7 +++
 ...ormat.oe_event_programme_date_timezone.yml |  7 +++
 ...entity_view_display.node.oe_event.full.yml |  6 +-
 ...ormat.oe_event_long_date_hour_timezone.yml |  7 +++
 ....oe_event_programme_date_hour_timezone.yml |  7 +++
 ...ormat.oe_event_programme_date_timezone.yml |  7 +++
 .../oe_theme_content_event.post_update.php    |  3 +
 .../ExtraField/Display/DetailsExtraField.php  |  5 +-
 .../Display/ProgrammeExtraField.php           | 13 ++--
 .../Display/RegistrationButtonExtraField.php  | 12 ++--
 .../datetime-range-timezone.html.twig         | 17 ++++++
 .../LivestreamDisplayDisclosingTest.php       |  2 +
 .../src/Functional/ContentEventRenderTest.php | 60 ++++++++++++-------
 .../src/Functional/ContentRenderTestBase.php  |  1 +
 tests/src/Kernel/EventRenderTest.php          |  1 +
 19 files changed, 123 insertions(+), 55 deletions(-)
 create mode 100644 modules/oe_theme_content_event/config/install/core.date_format.oe_event_long_date_hour_timezone.yml
 delete mode 100644 modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date.yml
 delete mode 100644 modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_hour.yml
 create mode 100644 modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_hour_timezone.yml
 create mode 100644 modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_timezone.yml
 create mode 100644 modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_long_date_hour_timezone.yml
 create mode 100644 modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_programme_date_hour_timezone.yml
 create mode 100644 modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_programme_date_timezone.yml
 create mode 100644 modules/oe_theme_content_event/templates/datetime-range-timezone.html.twig

diff --git a/composer.json b/composer.json
index b1ae7d8d2e..480c218d4e 100644
--- a/composer.json
+++ b/composer.json
@@ -47,7 +47,7 @@
         "openeuropa/behat-transformation-context": "~0.1",
         "openeuropa/code-review": "^2.0",
         "openeuropa/oe_contact_forms": "^1.2",
-        "openeuropa/oe_content": "dev-EPIC-EWPP-1539-Event-v2",
+        "openeuropa/oe_content": "dev-EWPP-1983",
         "openeuropa/oe_corporate_blocks": "^4.4",
         "openeuropa/oe_corporate_countries": "~2.0",
         "openeuropa/oe_media": "^1.15",
diff --git a/modules/oe_theme_content_event/config/install/core.date_format.oe_event_long_date_hour_timezone.yml b/modules/oe_theme_content_event/config/install/core.date_format.oe_event_long_date_hour_timezone.yml
new file mode 100644
index 0000000000..3bb1d4bd7f
--- /dev/null
+++ b/modules/oe_theme_content_event/config/install/core.date_format.oe_event_long_date_hour_timezone.yml
@@ -0,0 +1,7 @@
+langcode: en
+status: true
+dependencies: {  }
+id: oe_event_long_date_hour_timezone
+label: 'Event long date with hour and timezone'
+locked: false
+pattern: 'l j F Y, H:i T'
diff --git a/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date.yml b/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date.yml
deleted file mode 100644
index 9d02ec6b8c..0000000000
--- a/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-langcode: en
-status: true
-dependencies: {  }
-id: oe_event_programme_date
-label: 'Event programme date'
-locked: false
-pattern: 'j M Y'
diff --git a/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_hour.yml b/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_hour.yml
deleted file mode 100644
index 41218464ad..0000000000
--- a/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_hour.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-langcode: en
-status: true
-dependencies: {  }
-id: oe_event_programme_date_hour
-label: 'Event programme date with hour'
-locked: false
-pattern: 'j M Y, h:i A'
diff --git a/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_hour_timezone.yml b/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_hour_timezone.yml
new file mode 100644
index 0000000000..0f924baf1b
--- /dev/null
+++ b/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_hour_timezone.yml
@@ -0,0 +1,7 @@
+langcode: en
+status: true
+dependencies: {  }
+id: oe_event_programme_date_hour_timezone
+label: 'Event programme date with hour with timezone'
+locked: false
+pattern: 'j M Y, h:i A T'
diff --git a/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_timezone.yml b/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_timezone.yml
new file mode 100644
index 0000000000..7123d4b3b1
--- /dev/null
+++ b/modules/oe_theme_content_event/config/install/core.date_format.oe_event_programme_date_timezone.yml
@@ -0,0 +1,7 @@
+langcode: en
+status: true
+dependencies: {  }
+id: oe_event_programme_date_timezone
+label: 'Event programme date with timezone'
+locked: false
+pattern: 'j M Y T'
diff --git a/modules/oe_theme_content_event/config/install/core.entity_view_display.node.oe_event.full.yml b/modules/oe_theme_content_event/config/install/core.entity_view_display.node.oe_event.full.yml
index 024fd1fdde..0a057650f3 100644
--- a/modules/oe_theme_content_event/config/install/core.entity_view_display.node.oe_event.full.yml
+++ b/modules/oe_theme_content_event/config/install/core.entity_view_display.node.oe_event.full.yml
@@ -175,11 +175,11 @@ content:
     weight: 1
     label: above
     settings:
-      timezone_override: ''
-      format_type: oe_event_long_date_hour
+      display_timezone: false
+      format_type: oe_event_long_date_hour_timezone
       separator: '-'
     third_party_settings: {  }
-    type: daterange_default
+    type: daterange_timezone
     region: content
   oe_event_entrance_fee:
     weight: 9
diff --git a/modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_long_date_hour_timezone.yml b/modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_long_date_hour_timezone.yml
new file mode 100644
index 0000000000..3bb1d4bd7f
--- /dev/null
+++ b/modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_long_date_hour_timezone.yml
@@ -0,0 +1,7 @@
+langcode: en
+status: true
+dependencies: {  }
+id: oe_event_long_date_hour_timezone
+label: 'Event long date with hour and timezone'
+locked: false
+pattern: 'l j F Y, H:i T'
diff --git a/modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_programme_date_hour_timezone.yml b/modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_programme_date_hour_timezone.yml
new file mode 100644
index 0000000000..0f924baf1b
--- /dev/null
+++ b/modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_programme_date_hour_timezone.yml
@@ -0,0 +1,7 @@
+langcode: en
+status: true
+dependencies: {  }
+id: oe_event_programme_date_hour_timezone
+label: 'Event programme date with hour with timezone'
+locked: false
+pattern: 'j M Y, h:i A T'
diff --git a/modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_programme_date_timezone.yml b/modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_programme_date_timezone.yml
new file mode 100644
index 0000000000..7123d4b3b1
--- /dev/null
+++ b/modules/oe_theme_content_event/config/post_updates/30001_update_full_view_display/core.date_format.oe_event_programme_date_timezone.yml
@@ -0,0 +1,7 @@
+langcode: en
+status: true
+dependencies: {  }
+id: oe_event_programme_date_timezone
+label: 'Event programme date with timezone'
+locked: false
+pattern: 'j M Y T'
diff --git a/modules/oe_theme_content_event/oe_theme_content_event.post_update.php b/modules/oe_theme_content_event/oe_theme_content_event.post_update.php
index fbd1e06908..bb61404856 100644
--- a/modules/oe_theme_content_event/oe_theme_content_event.post_update.php
+++ b/modules/oe_theme_content_event/oe_theme_content_event.post_update.php
@@ -108,6 +108,9 @@ function oe_theme_content_event_post_update_30001() {
     'core.date_format.oe_event_programme_date',
     'core.date_format.oe_event_programme_date_hour',
     'core.date_format.oe_event_programme_hour',
+    'core.date_format.oe_event_programme_date_timezone',
+    'core.date_format.oe_event_programme_date_hour_timezone',
+    'core.date_format.oe_event_long_date_hour_timezone',
   ];
   foreach ($date_formats as $date_format_name) {
     $config = $storage->read($date_format_name);
diff --git a/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/DetailsExtraField.php b/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/DetailsExtraField.php
index 84dcb4e97a..b3983e8be4 100755
--- a/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/DetailsExtraField.php
+++ b/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/DetailsExtraField.php
@@ -144,10 +144,11 @@ protected function getRenderableSubject(ContentEntityInterface $entity): array {
   protected function getRenderableDates(ContentEntityInterface $entity): array {
     return $this->entityTypeManager->getViewBuilder('node')->viewField($entity->get('oe_event_dates'), [
       'label' => 'hidden',
-      'type' => 'daterange_default',
+      'type' => 'daterange_timezone',
       'settings' => [
-        'format_type' => 'oe_event_date_hour',
+        'format_type' => 'oe_event_date_hour_timezone',
         'separator' => '-',
+        'display_timezone' => FALSE,
       ],
     ]);
   }
diff --git a/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/ProgrammeExtraField.php b/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/ProgrammeExtraField.php
index 49b1efb7b0..07cdc9d218 100755
--- a/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/ProgrammeExtraField.php
+++ b/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/ProgrammeExtraField.php
@@ -32,12 +32,12 @@ class ProgrammeExtraField extends EventExtraFieldBase {
   /**
    * Programme datetime format.
    */
-  const PROGRAMME_DATETIME_FORMAT = 'oe_event_programme_date_hour';
+  const PROGRAMME_DATETIME_FORMAT = 'oe_event_programme_date_hour_timezone';
 
   /**
    * Programme date format.
    */
-  const PROGRAMME_DATE_FORMAT = 'oe_event_programme_date';
+  const PROGRAMME_DATE_FORMAT = 'oe_event_programme_date_timezone';
 
   /**
    * Programme time format.
@@ -186,6 +186,7 @@ public function viewElements(ContentEntityInterface $entity) {
   protected function generateEventProgrammeLabel(ProgrammeItemInterface $programme, ?string $previous_end_date = NULL): ?array {
     $start_datetime = $programme->get('oe_event_programme_dates')->start_date;
     $end_datetime = $programme->get('oe_event_programme_dates')->end_date;
+    $timezone = $programme->get('oe_event_programme_dates')->timezone;
 
     $start_day = $this->dateFormatter->format($start_datetime->getTimestamp(), 'custom', 'Ymd');
     $end_day = $this->dateFormatter->format($end_datetime->getTimestamp(), 'custom', 'Ymd');
@@ -196,16 +197,16 @@ protected function generateEventProgrammeLabel(ProgrammeItemInterface $programme
     $end_date_format = $start_day === $end_day ? self::PROGRAMME_TIME_FORMAT : self::PROGRAMME_DATETIME_FORMAT;
     $template = '{% trans %}{{ start_date }} - {{ end_date }}{% endtrans %}';
     $context = [
-      'start_date' => $this->dateFormatter->format($start_datetime->getTimestamp(), $start_date_format),
-      'end_date' => $this->dateFormatter->format($end_datetime->getTimestamp(), $end_date_format),
+      'start_date' => $this->dateFormatter->format($start_datetime->getTimestamp(), $start_date_format, '', $timezone),
+      'end_date' => $this->dateFormatter->format($end_datetime->getTimestamp(), $end_date_format, '', $timezone),
     ];
     // If the event program item running within 1 day and there are no
     // other event program items in the current day coming before,
     // show the date with time range within a day.
     if ($start_date_format === self::PROGRAMME_DATETIME_FORMAT && $end_date_format === self::PROGRAMME_TIME_FORMAT) {
       $template = '{% trans %}{{ start_day }},<br>{{ start_date }} - {{ end_date }}{% endtrans %}';
-      $context['start_day'] = $this->dateFormatter->format($start_datetime->getTimestamp(), self::PROGRAMME_DATE_FORMAT);
-      $context['start_date'] = $this->dateFormatter->format($start_datetime->getTimestamp(), self::PROGRAMME_TIME_FORMAT);
+      $context['start_day'] = $this->dateFormatter->format($start_datetime->getTimestamp(), self::PROGRAMME_DATE_FORMAT, '', $timezone);
+      $context['start_date'] = $this->dateFormatter->format($start_datetime->getTimestamp(), self::PROGRAMME_TIME_FORMAT, '', $timezone);
     }
 
     return [
diff --git a/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/RegistrationButtonExtraField.php b/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/RegistrationButtonExtraField.php
index fa385e47dd..b2c9714c87 100644
--- a/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/RegistrationButtonExtraField.php
+++ b/modules/oe_theme_content_event/src/Plugin/ExtraField/Display/RegistrationButtonExtraField.php
@@ -110,15 +110,15 @@ public function viewElements(ContentEntityInterface $entity) {
       // show different message.
       if ($datetime_start->format('Ymd') === $request_datetime->format('Ymd')) {
         $build['#description'] = $this->t('Registration will open today, @start_date.', [
-          '@start_date' => $this->dateFormatter->format($datetime_start->getTimestamp(), 'oe_event_date_hour'),
+          '@start_date' => $this->dateFormatter->format($datetime_start->getTimestamp(), 'oe_event_date_hour_timezone', '', $event->getRegistrationTimezone()),
         ]);
       }
       else {
         $date_diff_formatted = $this->dateFormatter->formatDiff($this->requestTime, $datetime_start->getTimestamp(), ['granularity' => 1]);
         $build['#description'] = $this->t('Registration will open in @time_left. You can register from @start_date, until @end_date.', [
           '@time_left' => $date_diff_formatted,
-          '@start_date' => $this->dateFormatter->format($datetime_start->getTimestamp(), 'oe_event_date_hour'),
-          '@end_date' => $this->dateFormatter->format($datetime_end->getTimestamp(), 'oe_event_date_hour'),
+          '@start_date' => $this->dateFormatter->format($datetime_start->getTimestamp(), 'oe_event_date_hour_timezone', '', $event->getRegistrationTimezone()),
+          '@end_date' => $this->dateFormatter->format($datetime_end->getTimestamp(), 'oe_event_date_hour_timezone', '', $event->getRegistrationTimezone()),
         ]);
       }
 
@@ -144,14 +144,14 @@ public function viewElements(ContentEntityInterface $entity) {
       // show different message.
       if ($datetime_end->format('Ymd') === $request_datetime->format('Ymd')) {
         $build['#description'] = $this->t('Book your seat, the registration will end today, @end_date', [
-          '@end_date' => $this->dateFormatter->format($datetime_end->getTimestamp(), 'oe_event_date_hour'),
+          '@end_date' => $this->dateFormatter->format($datetime_end->getTimestamp(), 'oe_event_date_hour_timezone', '', $event->getRegistrationTimezone()),
         ]);
       }
       else {
         $date_diff_formatted = $this->dateFormatter->formatDiff($this->requestTime, $datetime_end->getTimestamp(), ['granularity' => 1]);
         $build['#description'] = $this->t('Book your seat, @time_left left to register, registration will end on @end_date', [
           '@time_left' => $date_diff_formatted,
-          '@end_date' => $this->dateFormatter->format($datetime_end->getTimestamp(), 'oe_event_date_hour'),
+          '@end_date' => $this->dateFormatter->format($datetime_end->getTimestamp(), 'oe_event_date_hour_timezone', '', $event->getRegistrationTimezone()),
         ]);
       }
 
@@ -167,7 +167,7 @@ public function viewElements(ContentEntityInterface $entity) {
     if ($event->isRegistrationPeriodOver($this->requestDateTime)) {
       $datetime_end = $event->getRegistrationEndDate();
       $build['#description'] = $this->t('Registration period ended on @date', [
-        '@date' => $this->dateFormatter->format($datetime_end->getTimestamp(), 'oe_event_long_date_hour'),
+        '@date' => $this->dateFormatter->format($datetime_end->getTimestamp(), 'oe_event_long_date_hour_timezone', '', $event->getRegistrationTimezone()),
       ]);
       $build['#show_button'] = FALSE;
 
diff --git a/modules/oe_theme_content_event/templates/datetime-range-timezone.html.twig b/modules/oe_theme_content_event/templates/datetime-range-timezone.html.twig
new file mode 100644
index 0000000000..375ca1affc
--- /dev/null
+++ b/modules/oe_theme_content_event/templates/datetime-range-timezone.html.twig
@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Theme override for the datetime-range-timezone template.
+ *
+ * @see \Drupal\datetime_range_timezone\Plugin\Field\FieldFormatter\DateRangeTimezone::viewElements()
+ */
+#}
+<div class='daterange'>
+    <span class='daterange__date daterange__start-date'>{{ start_date }}</span>
+    <span class='daterange__separtor'> {{ separator }} </span>
+    <span class='daterange__date daterange__end-date'>{{ end_date }}</span>
+
+    {% if timezone %}
+        <span class='daterange__timezone'> {{ timezone }}</span>
+    {% endif %}
+</div>
diff --git a/modules/oe_theme_content_event/tests/src/FunctionalJavascript/LivestreamDisplayDisclosingTest.php b/modules/oe_theme_content_event/tests/src/FunctionalJavascript/LivestreamDisplayDisclosingTest.php
index 65066b120e..b7c4e47f90 100644
--- a/modules/oe_theme_content_event/tests/src/FunctionalJavascript/LivestreamDisplayDisclosingTest.php
+++ b/modules/oe_theme_content_event/tests/src/FunctionalJavascript/LivestreamDisplayDisclosingTest.php
@@ -76,10 +76,12 @@ public function testLivestreamDisplayDisclosing(): void {
         'oe_event_dates' => [
           'value' => $start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
           'end_value' => $start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+          'timezone' => 'Europe/Brussels',
         ],
         'oe_event_online_dates' => [
           'value' => $start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
           'end_value' => $start_date->modify('+3 hours')->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+          'timezone' => 'Europe/Brussels',
         ],
         'oe_event_languages' => [
           ['target_id' => 'http://publications.europa.eu/resource/authority/language/EST'],
diff --git a/tests/src/Functional/ContentEventRenderTest.php b/tests/src/Functional/ContentEventRenderTest.php
index 52b633ff2d..472ac1a8cf 100644
--- a/tests/src/Functional/ContentEventRenderTest.php
+++ b/tests/src/Functional/ContentEventRenderTest.php
@@ -136,6 +136,7 @@ public function testEventFeaturedMediaTranslation(): void {
       'oe_event_dates' => [
         'value' => '2030-05-10T12:00:00',
         'end_value' => '2030-05-15T12:00:00',
+        'timezone' => 'Europe/Brussels',
       ],
       'oe_event_featured_media' => [
         'target_id' => (int) $media->id(),
@@ -189,6 +190,7 @@ public function testEventRendering(): void {
       'oe_event_dates' => [
         'value' => $start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
         'end_value' => $start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+        'timezone' => DateTimeItemInterface::STORAGE_TIMEZONE,
       ],
       'oe_event_languages' => [
         ['target_id' => 'http://publications.europa.eu/resource/authority/language/EST'],
@@ -228,7 +230,7 @@ public function testEventRendering(): void {
           'size' => 'm',
         ], [
           'icon' => 'calendar',
-          'text' => '28 February 2020, 01:00',
+          'text' => '27 February 2020, 14:00 UTC - 27 February 2020, 14:00 UTC',
           'size' => 'm',
         ],
       ],
@@ -245,7 +247,7 @@ public function testEventRendering(): void {
       'items' => [
         [
           'label' => 'When',
-          'body' => 'Friday 28 February 2020, 01:00',
+          'body' => 'Thursday 27 February 2020, 14:00 UTC - Thursday 27 February 2020, 14:00 UTC',
         ], [
           'label' => 'Languages',
           'body' => 'Estonian, French',
@@ -258,11 +260,12 @@ public function testEventRendering(): void {
     // The event didn't start yet so no status message should be displayed.
     $this->assertSession()->elementNotExists('css', 'div.ecl-message.ecl-u-mb-2xl');
 
-    // Check case when start and end dates are different.
+    // Check case when start and end dates are different in another timezone.
     $end_date = (clone $static_time)->modify('+ 20 days');
     $node->set('oe_event_dates', [
       'value' => $start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
       'end_value' => $end_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+      'timezone' => 'Europe/Brussels',
     ]);
     // Add 'Who should attend' field value.
     $node->set('oe_event_who_should_attend', 'Types of audiences that this event targets');
@@ -278,7 +281,7 @@ public function testEventRendering(): void {
           'size' => 'm',
         ], [
           'icon' => 'calendar',
-          'text' => "28 February 2020, 01:00\n - 9 March 2020, 01:00",
+          'text' => "27 February 2020, 15:00 CET - 8 March 2020, 15:00 CET",
           'size' => 'm',
         ],
       ],
@@ -289,7 +292,7 @@ public function testEventRendering(): void {
       'items' => [
         [
           'label' => 'When',
-          'body' => "Friday 28 February 2020, 01:00\n - Monday 9 March 2020, 01:00",
+          'body' => "Thursday 27 February 2020, 15:00 CET - Sunday 8 March 2020, 15:00 CET",
         ], [
           'label' => 'Who should attend',
           'body' => 'Types of audiences that this event targets',
@@ -319,7 +322,7 @@ public function testEventRendering(): void {
           'body' => "event_venue\n  Address event_venue, 1001 <Brussels>, Belgium",
         ], [
           'label' => 'When',
-          'body' => "Friday 28 February 2020, 01:00\n - Monday 9 March 2020, 01:00",
+          'body' => "Thursday 27 February 2020, 15:00 CET - Sunday 8 March 2020, 15:00 CET",
         ], [
           'label' => 'Who should attend',
           'body' => 'Types of audiences that this event targets',
@@ -392,6 +395,7 @@ public function testEventRendering(): void {
     $node->set('oe_event_online_dates', [
       'value' => $online_start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
       'end_value' => $online_end_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+      'timezone' => 'Europe/Brussels',
     ])->save();
     $this->drupalGet($node->toUrl());
 
@@ -404,7 +408,7 @@ public function testEventRendering(): void {
           'body' => 'Online only',
         ], [
           'label' => 'When',
-          'body' => "Friday 28 February 2020, 01:00\n - Monday 9 March 2020, 01:00",
+          'body' => "Thursday 27 February 2020, 15:00 CET - Sunday 8 March 2020, 15:00 CET",
         ], [
           'label' => 'Livestream',
           'body' => 'Starts on Wednesday 18 March 2020, 01:00',
@@ -528,12 +532,13 @@ public function testEventRendering(): void {
     $node->set('oe_event_registration_dates', [
       'value' => $registration_start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
       'end_value' => $registration_end_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+      'timezone' => 'Europe/Brussels',
     ])->save();
     $this->drupalGet($node->toUrl());
 
     $this->assertRegistrationButtonDisabled($registration_content, 'Register here');
     $registration_info_content = $this->assertSession()->elementExists('css', 'p.ecl-u-type-paragraph.ecl-u-type-color-grey-75');
-    $this->assertEquals('Registration will open in 1 day. You can register from 19 February 2020, 01:00, until 22 February 2020, 01:00.', $registration_info_content->getText());
+    $this->assertEquals('Registration will open in 1 day. You can register from 18 February 2020, 15:00 CET, until 21 February 2020, 15:00 CET.', $registration_info_content->getText());
 
     // Assert "Registration date" field when registration will start today in
     // one hour.
@@ -543,7 +548,7 @@ public function testEventRendering(): void {
     $this->drupalGet($node->toUrl());
 
     $this->assertRegistrationButtonDisabled($registration_content, 'Register here');
-    $this->assertEquals('Registration will open today, 19 February 2020, 01:00.', $registration_info_content->getText());
+    $this->assertEquals('Registration will open today, 18 February 2020, 15:00 CET.', $registration_info_content->getText());
 
     // Assert "Registration date" field when registration is in progress.
     $static_time = new DrupalDateTime('2020-02-20 14:00:00', DateTimeItemInterface::STORAGE_TIMEZONE);
@@ -552,7 +557,7 @@ public function testEventRendering(): void {
     $this->drupalGet($node->toUrl());
 
     $this->assertRegistrationButtonEnabled($registration_content, 'Register here', 'http://www.example.com/registation');
-    $this->assertEquals('Book your seat, 1 day left to register, registration will end on 22 February 2020, 01:00', $registration_info_content->getText());
+    $this->assertEquals('Book your seat, 1 day left to register, registration will end on 21 February 2020, 15:00 CET', $registration_info_content->getText());
 
     // Assert "Registration date" field when registration will finish today in
     // one hour.
@@ -562,7 +567,7 @@ public function testEventRendering(): void {
     $this->drupalGet($node->toUrl());
 
     $this->assertRegistrationButtonEnabled($registration_content, 'Register here', 'http://www.example.com/registation');
-    $this->assertEquals('Book your seat, the registration will end today, 22 February 2020, 01:00', $registration_info_content->getText());
+    $this->assertEquals('Book your seat, the registration will end today, 21 February 2020, 15:00 CET', $registration_info_content->getText());
 
     // Assert "Registration date" field in the past.
     $static_time = new DrupalDateTime('2020-02-24 13:00:00', DateTimeItemInterface::STORAGE_TIMEZONE);
@@ -571,7 +576,7 @@ public function testEventRendering(): void {
     $this->drupalGet($node->toUrl());
 
     $this->assertSession()->elementNotExists('css', 'a.ecl-u-mt-2xl.ecl-link.ecl-link--cta', $registration_content);
-    $this->assertEquals('Registration period ended on Saturday 22 February 2020, 01:00', $registration_info_content->getText());
+    $this->assertEquals('Registration period ended on Friday 21 February 2020, 15:00 CET', $registration_info_content->getText());
 
     // Assert "Report text" and "Summary for report" fields when event is
     // finished.
@@ -697,7 +702,7 @@ public function testEventRendering(): void {
       'items' => [
         [
           'label' => 'When',
-          'body' => "Friday 28 February 2020, 01:00\n - Monday 9 March 2020, 01:00",
+          'body' => "Thursday 27 February 2020, 15:00 CET - Sunday 8 March 2020, 15:00 CET",
         ], [
           'label' => 'Livestream',
           'body' => 'Starts on Wednesday 18 March 2020, 01:00Link to online event',
@@ -732,7 +737,7 @@ public function testEventRendering(): void {
           'size' => 'm',
         ], [
           'icon' => 'calendar',
-          'text' => "28 February 2020, 01:00\n - 9 March 2020, 01:00",
+          'text' => "27 February 2020, 15:00 CET - 8 March 2020, 15:00 CET",
           'size' => 'm',
         ], [
           'icon' => 'livestreaming',
@@ -777,15 +782,15 @@ public function testEventRendering(): void {
     $timeline_expected_values = [
       'items' => [
         [
-          'label' => '18 Feb 2020, 01:00 AM - 28 Feb 2020, 01:00 AM',
+          'label' => '17 Feb 2020, 02:00 PM UTC - 27 Feb 2020, 02:00 PM UTC',
           'title' => 'Session 1',
           'body' => 'Description Session 1',
         ], [
-          'label' => '18 Feb 2020, 01:00 AM - 28 Feb 2020, 01:00 AM',
+          'label' => '17 Feb 2020, 02:00 PM UTC - 27 Feb 2020, 02:00 PM UTC',
           'title' => 'Session 2',
           'body' => 'Description Session 2',
         ], [
-          'label' => '18 Feb 2020, 01:00 AM - 28 Feb 2020, 01:00 AM',
+          'label' => '17 Feb 2020, 02:00 PM UTC - 27 Feb 2020, 02:00 PM UTC',
           'title' => 'Session 3',
           'body' => 'Description Session 3',
         ],
@@ -798,12 +803,14 @@ public function testEventRendering(): void {
     $session3->set('oe_event_programme_dates', [
       'value' => '2019-11-15T11:00:00',
       'end_value' => '2019-11-15T15:00:00',
+      'timezone' => 'UTC',
     ]);
     $session3->save();
 
     $session1->set('oe_event_programme_dates', [
       'value' => '2019-11-15T22:00:00',
       'end_value' => '2019-11-15T23:00:00',
+      'timezone' => 'UTC',
     ]);
     $session1->save();
     $this->drupalGet($node->toUrl());
@@ -812,15 +819,15 @@ public function testEventRendering(): void {
     $timeline_expected_values = [
       'items' => [
         [
-          'label' => '15 Nov 2019, 10:00 PM - 16 Nov 2019, 02:00 AM',
+          'label' => '15 Nov 2019, 11:00 AM UTC - 15 Nov 2019, 03:00 PM UTC',
           'title' => 'Session 3',
           'body' => 'Description Session 3',
         ], [
-          'label' => '09:00 AM - 10:00 AM',
+          'label' => '10:00 PM - 11:00 PM',
           'title' => 'Session 1',
           'body' => 'Description Session 1',
         ], [
-          'label' => '18 Feb 2020, 01:00 AM - 28 Feb 2020, 01:00 AM',
+          'label' => '17 Feb 2020, 02:00 PM UTC - 27 Feb 2020, 02:00 PM UTC',
           'title' => 'Session 2',
           'body' => 'Description Session 2',
         ],
@@ -833,17 +840,20 @@ public function testEventRendering(): void {
     $session3->set('oe_event_programme_dates', [
       'value' => '2019-11-14T21:00:00',
       'end_value' => '2019-11-14T22:00:00',
+      'timezone' => 'UTC',
     ]);
     $session3->save();
 
     $session1->set('oe_event_programme_dates', [
       'value' => '2019-11-14T22:15:00',
       'end_value' => '2019-11-14T23:15:00',
+      'timezone' => 'UTC',
     ]);
     $session1->save();
     $session2->set('oe_event_programme_dates', [
       'value' => '2019-11-15T22:00:00',
       'end_value' => '2019-11-15T23:00:00',
+      'timezone' => 'UTC',
     ]);
     $session2->save();
     $this->drupalGet($node->toUrl());
@@ -852,15 +862,15 @@ public function testEventRendering(): void {
     $timeline_expected_values = [
       'items' => [
         [
-          'label' => '15 Nov 2019,<br>08:00 AM - 09:00 AM',
+          'label' => '14 Nov 2019 UTC,<br>09:00 PM - 10:00 PM',
           'title' => 'Session 3',
           'body' => 'Description Session 3',
         ], [
-          'label' => '09:15 AM - 10:15 AM',
+          'label' => '10:15 PM - 11:15 PM',
           'title' => 'Session 1',
           'body' => 'Description Session 1',
         ], [
-          'label' => '16 Nov 2019,<br>09:00 AM - 10:00 AM',
+          'label' => '15 Nov 2019 UTC,<br>10:00 PM - 11:00 PM',
           'title' => 'Session 2',
           'body' => 'Description Session 2',
         ],
@@ -962,6 +972,7 @@ public function testEventRendering(): void {
     $node->set('oe_event_dates', [
       'value' => $start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
       'end_value' => $end_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+      'timezone' => 'Europe/Brussels',
     ])->save();
     $this->drupalGet($node->toUrl());
     // Assert the message is updated.
@@ -972,6 +983,7 @@ public function testEventRendering(): void {
     $node->set('oe_event_dates', [
       'value' => $start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
       'end_value' => $end_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+      'timezone' => 'Europe/Brussels',
     ])->save();
     $this->drupalGet($node->toUrl());
     $this->assertStringContainsString('This event has started. You can also watch it via livestream.', $status_container->find('css', 'div.ecl-message__content div.ecl-message__title')->getText());
@@ -981,6 +993,7 @@ public function testEventRendering(): void {
     $node->set('oe_event_online_dates', [
       'value' => $online_start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
       'end_value' => $online_end_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+      'timezone' => 'Europe/Brussels',
     ])->save();
     $this->drupalGet($node->toUrl());
     $this->assertStringContainsString('This event has started. The livestream will start at 15 June 2020, 23:00 AEST.', $status_container->find('css', 'div.ecl-message__content div.ecl-message__title')->getText());
@@ -991,6 +1004,7 @@ public function testEventRendering(): void {
     $node->set('oe_event_online_dates', [
       'value' => $online_start_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
       'end_value' => $online_end_date->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+      'timezone' => 'Europe/Brussels',
     ]);
     $node->set('oe_event_status_description', 'Event status message.')->save();
     $this->drupalGet($node->toUrl());
diff --git a/tests/src/Functional/ContentRenderTestBase.php b/tests/src/Functional/ContentRenderTestBase.php
index 32be03a638..10361c61da 100644
--- a/tests/src/Functional/ContentRenderTestBase.php
+++ b/tests/src/Functional/ContentRenderTestBase.php
@@ -359,6 +359,7 @@ protected function createProgrammeItemEntity(string $name, string $bundle = 'oe_
       'oe_event_programme_dates' => [
         'value' => $start_datetime->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
         'end_value' => $end_datetime->format(DateTimeItemInterface::DATETIME_STORAGE_FORMAT),
+        'timezone' => 'UTC',
       ],
       'oe_description' => "Description $name",
       'status' => $status,
diff --git a/tests/src/Kernel/EventRenderTest.php b/tests/src/Kernel/EventRenderTest.php
index c144754777..b5e35910b4 100644
--- a/tests/src/Kernel/EventRenderTest.php
+++ b/tests/src/Kernel/EventRenderTest.php
@@ -31,6 +31,7 @@ class EventRenderTest extends ContentRenderTestBase {
   public static $modules = [
     'address',
     'datetime_range',
+    'datetime_range_timezone',
     'entity_reference_revisions',
     'link',
     'image',