From ed9a9d024adf9749ed5844ec3af35a0dae910828 Mon Sep 17 00:00:00 2001
From: Bruno Boi <boi@odoo.com>
Date: Mon, 26 Sep 2022 12:56:41 +0000
Subject: [PATCH] [REF] *: calendar view in owl

This commit introduces the new calendar view written in owl.

closes odoo/odoo#101185

X-original-commit: e88988f58582d5b49a32d7102a74a176f40c4c69
Related: odoo/enterprise#31808
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Bruno Boi (boi) <boi@odoo.com>
Co-authored-by: Bruno Boi <boi@odoo.com>
Co-authored-by: Jorge Pinna Puissant <jpp@odoo.com>
---
 .../hr_holidays/static/src/scss/time_off.scss |    2 +-
 .../tests/tours/project_update_tour_tests.js  |    2 +-
 addons/web/__manifest__.py                    |    6 +-
 addons/web/static/src/core/l10n/dates.js      |   11 +
 .../js/views/calendar/calendar_renderer.js    |    2 +-
 addons/web/static/src/legacy/scss/views.scss  |    5 +-
 .../static/src/legacy/scss/web_calendar.scss  |  333 +-
 .../static/src/legacy/xml/web_calendar.xml    |    2 +-
 .../src/search/control_panel/control_panel.js |    1 +
 .../search/control_panel/control_panel.scss   |    2 +-
 .../search/control_panel/control_panel.xml    |   13 +-
 .../views/calendar/calendar_arch_parser.js    |  195 +
 .../calendar_common_popover.js                |   98 +
 .../calendar_common_popover.scss              |   71 +
 .../calendar_common_popover.xml               |   82 +
 .../calendar_common_renderer.js               |  296 ++
 .../calendar_common_renderer.xml              |   18 +
 .../src/views/calendar/calendar_controller.js |  221 +
 .../views/calendar/calendar_controller.scss   |  239 +
 .../views/calendar/calendar_controller.xml    |   76 +
 .../calendar/calendar_controller_mobile.scss  |   48 +
 .../src/views/calendar/calendar_model.js      |  821 ++++
 .../src/views/calendar/calendar_renderer.js   |   37 +
 .../src/views/calendar/calendar_renderer.scss |  697 +++
 .../src/views/calendar/calendar_renderer.xml  |   16 +
 .../calendar/calendar_renderer_mobile.scss    |   34 +
 .../src/views/calendar/calendar_view.js       |   38 +
 .../calendar_year/calendar_year_popover.js    |   91 +
 .../calendar_year/calendar_year_popover.xml   |   68 +
 .../calendar_year/calendar_year_renderer.js   |  192 +
 .../calendar_year/calendar_year_renderer.xml  |   18 +
 .../web/static/src/views/calendar/colors.js   |   24 +
 .../date_picker/calendar_date_picker.js       |  101 +
 .../filter_panel/calendar_filter_panel.js     |  226 +
 .../filter_panel/calendar_filter_panel.scss   |   13 +
 .../filter_panel/calendar_filter_panel.xml    |  150 +
 addons/web/static/src/views/calendar/hooks.js |  118 +
 .../calendar_mobile_filter_panel.js           |   28 +
 .../calendar_mobile_filter_panel.xml          |   25 +
 .../quick_create/calendar_quick_create.js     |   86 +
 .../quick_create/calendar_quick_create.xml    |   32 +
 .../many2many_tags/many2many_tags_field.js    |    3 +
 .../src/views/fields/relational_utils.xml     |    1 +
 addons/web/static/src/views/record.js         |   19 +-
 .../web/static/src/views/relational_model.js  |    5 +-
 addons/web/static/src/views/view.js           |    9 +-
 .../src/webclient/actions/action_service.js   |   11 +-
 addons/web/static/tests/helpers/utils.js      |    2 +-
 .../tests/legacy/core/owl_dialog_tests.js     |    3 +
 .../tests/legacy/views/calendar_tests.js      |   11 +-
 addons/web/static/tests/mobile/helpers.js     |   66 +
 .../tests/mobile/views/calendar_view_tests.js |  396 ++
 .../calendar/calendar_arch_parser_tests.js    |  169 +
 .../calendar/calendar_common_popover_tests.js |  222 +
 .../calendar_common_renderer_tests.js         |  162 +
 .../calendar/calendar_date_picker_tests.js    |  117 +
 .../calendar/calendar_filter_panel_tests.js   |  213 +
 .../calendar/calendar_quick_create_tests.js   |  119 +
 .../views/calendar/calendar_view_tests.js     | 3937 +++++++++++++++++
 .../calendar/calendar_year_popover_tests.js   |  120 +
 .../calendar/calendar_year_renderer_tests.js  |  139 +
 .../static/tests/views/calendar/helpers.js    |  536 +++
 addons/web/tooling/_eslintrc.json             |    1 +
 odoo/addons/test_lint/tests/eslintrc          |    1 +
 64 files changed, 10439 insertions(+), 361 deletions(-)
 create mode 100644 addons/web/static/src/views/calendar/calendar_arch_parser.js
 create mode 100644 addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.js
 create mode 100644 addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.scss
 create mode 100644 addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
 create mode 100644 addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js
 create mode 100644 addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml
 create mode 100644 addons/web/static/src/views/calendar/calendar_controller.js
 create mode 100644 addons/web/static/src/views/calendar/calendar_controller.scss
 create mode 100644 addons/web/static/src/views/calendar/calendar_controller.xml
 create mode 100644 addons/web/static/src/views/calendar/calendar_controller_mobile.scss
 create mode 100644 addons/web/static/src/views/calendar/calendar_model.js
 create mode 100644 addons/web/static/src/views/calendar/calendar_renderer.js
 create mode 100644 addons/web/static/src/views/calendar/calendar_renderer.scss
 create mode 100644 addons/web/static/src/views/calendar/calendar_renderer.xml
 create mode 100644 addons/web/static/src/views/calendar/calendar_renderer_mobile.scss
 create mode 100644 addons/web/static/src/views/calendar/calendar_view.js
 create mode 100644 addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js
 create mode 100644 addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
 create mode 100644 addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js
 create mode 100644 addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.xml
 create mode 100644 addons/web/static/src/views/calendar/colors.js
 create mode 100644 addons/web/static/src/views/calendar/date_picker/calendar_date_picker.js
 create mode 100644 addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.js
 create mode 100644 addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
 create mode 100644 addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
 create mode 100644 addons/web/static/src/views/calendar/hooks.js
 create mode 100644 addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.js
 create mode 100644 addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml
 create mode 100644 addons/web/static/src/views/calendar/quick_create/calendar_quick_create.js
 create mode 100644 addons/web/static/src/views/calendar/quick_create/calendar_quick_create.xml
 create mode 100644 addons/web/static/tests/mobile/views/calendar_view_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/calendar_arch_parser_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/calendar_common_popover_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/calendar_common_renderer_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/calendar_date_picker_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/calendar_filter_panel_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/calendar_quick_create_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/calendar_view_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/calendar_year_popover_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/calendar_year_renderer_tests.js
 create mode 100644 addons/web/static/tests/views/calendar/helpers.js

diff --git a/addons/hr_holidays/static/src/scss/time_off.scss b/addons/hr_holidays/static/src/scss/time_off.scss
index a549bf18356..ccad3e23d9d 100644
--- a/addons/hr_holidays/static/src/scss/time_off.scss
+++ b/addons/hr_holidays/static/src/scss/time_off.scss
@@ -30,7 +30,7 @@
         color: #adb5bd;
     }
 
-    .o_calendar_view .o_calendar_widget .fc-dayGridMonth-view {
+    .o_legacy_calendar_view .o_calendar_widget .fc-dayGridMonth-view {
         .fc-week-number {
             padding-top: 0.2rem !important;
             padding-bottom: 0.3rem !important;
diff --git a/addons/project/static/tests/tours/project_update_tour_tests.js b/addons/project/static/tests/tours/project_update_tour_tests.js
index 5dd5daf5e90..f4b5f56f916 100644
--- a/addons/project/static/tests/tours/project_update_tour_tests.js
+++ b/addons/project/static/tests/tours/project_update_tour_tests.js
@@ -173,7 +173,7 @@ tour.register('project_update_tour', {
 }, ...openProjectUpdateAndReturnToTasks("Pivot", "o_pivot_view"), {
     trigger: '.o_switch_view.o_calendar',
     content: 'Open Calendar View of Tasks',
-}, ...openProjectUpdateAndReturnToTasks("Calendar", "o_calendar_view"), {
+}, ...openProjectUpdateAndReturnToTasks("Calendar", "o_legacy_calendar_view"), {
     trigger: '.o_switch_view.o_activity',
     content: 'Open Activity View of Tasks',
 }, ...openProjectUpdateAndReturnToTasks("Activity", "o_activity_view"),
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 7c3e9e1e33c..57d02c4bbda 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -86,6 +86,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/lib/underscore/underscore.js',
             'web/static/lib/underscore.string/lib/underscore.string.js',
             'web/static/lib/moment/moment.js',
+            'web/static/lib/luxon/luxon.js',
             'web/static/lib/owl/owl.js',
             'web/static/src/owl2_compatibility/*.js',
             'web/static/src/legacy/js/component_extension.js',
@@ -204,7 +205,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/env.js',
 
             'web/static/lib/jquery.scrollTo/jquery.scrollTo.js',
-            'web/static/lib/luxon/luxon.js',
             'web/static/lib/py.js/lib/py.js',
             'web/static/lib/py.js/lib/py_extras.js',
             'web/static/lib/jquery.ba-bbq/jquery.ba-bbq.js',
@@ -601,6 +601,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/lib/fullcalendar/daygrid/main.js',
             'web/static/lib/fullcalendar/timegrid/main.js',
             'web/static/lib/fullcalendar/list/main.js',
+            'web/static/lib/fullcalendar/luxon/main.js',
 
             'web/static/lib/ace/ace.js',
             'web/static/lib/ace/javascript_highlight_rules.js',
@@ -620,7 +621,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/tests/helpers/**/*.js',
             'web/static/tests/views/helpers.js',
             'web/static/tests/search/helpers.js',
-            'web/static/tests/views/helpers.js',
+            'web/static/tests/views/calendar/helpers.js',
             'web/static/tests/webclient/**/helpers.js',
             'web/static/tests/qunit.js',
             'web/static/tests/main.js',
@@ -645,6 +646,7 @@ This module provides the core of the Odoo Web Client.
             ('remove', 'web/static/tests/search/helpers.js'),
             'web/static/tests/views/**/*.js',
             ('remove', 'web/static/tests/views/helpers.js'),
+            ('remove', 'web/static/tests/views/calendar/helpers.js'),
             'web/static/tests/webclient/**/*.js',
             ('remove', 'web/static/tests/webclient/**/helpers.js'),
             'web/static/tests/legacy/**/*.js',
diff --git a/addons/web/static/src/core/l10n/dates.js b/addons/web/static/src/core/l10n/dates.js
index 05db2bace57..48f4956bedc 100644
--- a/addons/web/static/src/core/l10n/dates.js
+++ b/addons/web/static/src/core/l10n/dates.js
@@ -168,6 +168,17 @@ export const luxonToMomentFormat = memoize(function luxonToMomentFormat(format)
 // Formatting
 // -----------------------------------------------------------------------------
 
+/**
+ * Returns true if the given format is a 24-hour format.
+ * Returns false otherwise.
+ *
+ * @param {string} [format=localization.timeFormat]
+ * @returns true if the format contains a 24 hour format
+ */
+export function is24HourFormat(format) {
+    return (format || localization.timeFormat).indexOf("H") !== -1;
+}
+
 /**
  * Formats a DateTime object to a date string
  *
diff --git a/addons/web/static/src/legacy/js/views/calendar/calendar_renderer.js b/addons/web/static/src/legacy/js/views/calendar/calendar_renderer.js
index ee51cbce9d1..37fe3b66ef6 100644
--- a/addons/web/static/src/legacy/js/views/calendar/calendar_renderer.js
+++ b/addons/web/static/src/legacy/js/views/calendar/calendar_renderer.js
@@ -674,7 +674,7 @@ return AbstractRenderer.extend({
      * @override
      */
     async _renderView() {
-        this.$('.o_calendar_view')[0].prepend(this.calendarElement);
+        this.$('.o_legacy_calendar_view')[0].prepend(this.calendarElement);
         if (this._isInDOM) {
             this._renderCalendar();
         }
diff --git a/addons/web/static/src/legacy/scss/views.scss b/addons/web/static/src/legacy/scss/views.scss
index 0ee60cf000e..a268abdf71c 100644
--- a/addons/web/static/src/legacy/scss/views.scss
+++ b/addons/web/static/src/legacy/scss/views.scss
@@ -3,7 +3,10 @@
  * all renderers. For field default rules, see the fields.scss file.
  */
 
-.o_debug .o_legacy_form_view, .o_debug .o_legacy_kanban_view, .o_debug .o_legacy_list_view {
+.o_debug .o_legacy_form_view,
+.o_debug .o_legacy_kanban_view,
+.o_debug .o_legacy_list_view,
+.o_debug .o_legacy_calendar_view {
     border-top: 3px solid red;
 }
 
diff --git a/addons/web/static/src/legacy/scss/web_calendar.scss b/addons/web/static/src/legacy/scss/web_calendar.scss
index ee29e606d8d..a40b30d2a7b 100644
--- a/addons/web/static/src/legacy/scss/web_calendar.scss
+++ b/addons/web/static/src/legacy/scss/web_calendar.scss
@@ -1,20 +1,4 @@
-// Variables
-$o-cw-color-today-accent: #FC3D39;
-$o-cw-popup-avatar-size: 16px;
-$o-cw-filter-avatar-size: 20px;
-
-// Animations
-@keyframes backgroundfade {
-    from { background-color: rgba($info, 0.5); }
-    to   { background-color: rgba($info, 0.1); }
-}
-
-.o_calendar_container {
-    height: 100%;
-    display: flex;
-}
-
-.o_calendar_view {
+.o_legacy_calendar_view {
     flex: 1 1 auto;
     min-width: 0;
     height: 100%;
@@ -558,289 +542,11 @@ $o-cw-filter-avatar-size: 20px;
     }
 }
 
-.o_calendar_sidebar_container {
-    flex: 0 0 auto;
-    position: relative;
-    @include o-webclient-padding($top: $o-horizontal-padding/2);
-    background-color: $o-view-background-color;
-    border-left: 1px solid $border-color;
-    overflow-y:auto;
-
-    .o_calendar_sidebar {
-        width: 200px;
-        font-size: 14px;
-
-        @include media-breakpoint-up('xl') {
-            width: 250px;
-        }
-        // sync buttons are only displayed on calendar.event views
-        .o_calendar_sync {
-            padding-top: 0.5em;
-        }
-    }
-
-    .ui-datepicker {
-        margin: 0;
-        width: 100%;
-        padding: 0;
-
-        &, td, .ui-datepicker-header, td a, td span {
-            border: 0;
-        }
-
-        th {
-            padding: .7em .2em;
-            width: 14%;
-
-            > span {
-                color: #666666;
-            }
-        }
-
-        td {
-            padding: 0;
-
-            a, span {
-                padding: 5px 0;
-                background: none;
-                text-align: center;
-                vertical-align: middle;
-                font-size: 1.2rem;
-                color: map-get($grays, '900');
-                font-weight: 400;
-            }
-
-            &.ui-datepicker-current-day a {
-                background: $info;
-                color: color-contrast($info);
-                font-weight: bold;
-            }
-
-            &.ui-datepicker-today a {
-                margin: auto;
-                border-radius: 100%;
-                padding: .1em;
-                width: 25px;
-                background: mix($o-cw-color-today-accent, white, 80%);
-                color: white;
-            }
-
-            &.ui-datepicker-current-day.ui-datepicker-today a {
-                background: $o-cw-color-today-accent;
-            }
-        }
-
-        .ui-datepicker-header {
-            background: none;
-        }
-
-        .ui-datepicker-header {
-            border-radius: 0;
-
-            .ui-datepicker-title {
-                color: map-get($grays, '600');
-                font-size: 1.2rem;
-                font-weight: normal;
-            }
-
-            .ui-icon {
-                background-image: none;
-                text-indent: 0;
-                color: transparent;
-
-                &:before {
-                    font: normal normal normal 13px/1 FontAwesome;
-                    content: "\f053";
-                    color: map-get($grays, '400');
-                }
-                &.ui-icon-circle-triangle-e:before {
-                    content: "\f054"
-                }
-            }
-
-            .ui-state-hover.ui-datepicker-next-hover, .ui-state-hover.ui-datepicker-prev-hover {
-                background: none;
-                border: none;
-                cursor: pointer;
-
-                span:before {
-                    color: map-get($grays, '800');
-                }
-            }
-        }
-
-        .o_selected_range.o_color:not(.ui-datepicker-unselectable) {
-            background-color: $info;
-            animation: backgroundfade 2s forwards;
-        }
-    }
-
-    .o_calendar_filter {
-        font-size: 0.9em;
-        padding: 2em 0 1em;
-
-        .o_cw_filter_collapse_icon {
-            transition: all 0.3s ease;
-            @include o-hover-opacity();
-            font-size: 0.7em;
-        }
-
-        .collapsed .o_cw_filter_collapse_icon {
-            transform: rotate(90deg);
-            opacity: 1;
-        }
-
-        .o_calendar_filter_items_checkall, .o_calendar_filter_item {
-            cursor: pointer;
-            overflow: hidden;
-
-            input {
-                z-index: -1;
-                opacity: 0;
-            }
-
-            .o_cw_filter_input_bg {
-                width: 1.3em;
-                height: 1.3em;
-                border-width: 2px;
-                border-style: solid;
-                border-radius: 1px;
-                overflow: hidden;
-
-                &.o_beside_avatar {
-                    width: $o-cw-filter-avatar-size;
-                    height: $o-cw-filter-avatar-size;
-                    border-radius: 2px;
-                    object-fit: cover;
-                }
-            }
-
-            input:not(:checked) + label .o_cw_filter_input_bg {
-                background: transparent!important;
-
-                i.fa {
-                    visibility: hidden;
-                }
-            }
-
-
-            .o_cw_filter_avatar {
-                width: $o-cw-filter-avatar-size;
-                height: $o-cw-filter-avatar-size;
-                border-radius: 2px;
-
-                &.fa {
-                    padding: 4px 3px;
-                }
-            }
-
-            .o_cw_filter_title {
-                line-height: $o-line-height-base;
-                flex-grow: 1;
-            }
-
-            button.o_remove {
-                @include o-position-absolute(0,0,0);
-                transform: translateX(100%);
-                transition: transform 0.2s;
-            }
-
-            &:hover {
-                button.o_remove {
-                    transform: translateX(0%);
-                }
-            }
-        }
-
-        .o_field_many2one {
-            margin-top: 1rem;
-            width: 100%;
-        }
-    }
-}
-
-.o_cw_popover {
-    min-width: 256px;
-    max-width: 328px;
-    font-size: $font-size-base;
-
-    .card-header, .card-header .popover-header {
-        font-size: 1.05em;
-        font-weight: 500;
-        line-height: 1;
-    }
-
-    .card-footer {
-        background: none;
-    }
-
-    .o_footer_shrink {
-        padding-top: 0px;
-        padding-bottom: 0px;
-    }
-    .o_cw_popover_close {
-        cursor: pointer;
-    }
-
-    .o_calendar_avatars {
-        line-height: 1;
-    }
-
-    .o_calendar_avatars img {
-        margin-right: 0.4rem;
-        width: $o-cw-popup-avatar-size;
-        height: $o-cw-popup-avatar-size;
-        border-radius: 100%;
-    }
-
-    .list-group-item {
-        padding: 0.5rem 1rem;
-        border: none;
-    }
-
-    .o_cw_popover_fields_secondary {
-        max-height: 170px; // Fallback for old browsers
-        max-height: 25vh;
-        overflow: auto;
-        padding-bottom: 1px; // prevents the scrollbar to show when not needed
-
-        &::-webkit-scrollbar {
-            background: map-get($grays, '200');
-            width: 6px;
-        }
-        &::-webkit-scrollbar-thumb {
-            background: map-get($grays, '500');
-        }
-    }
-
-    .fc-rtl & {
-        text-align: right;
-        .o_calendar_avatars {
-            > div {
-                justify-content: flex-end;
-            }
-            img {
-                order: 2;
-                margin: 0 0 0 0.4rem;
-            }
-        }
-    }
-}
-
-// Generated with http://phrogz.net/css/distinct-colors.html
-// Do not modify the first 12 colors of this list or it will break the colors in the Time Off Calendar
-$o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, #EB7E7F, #2C8397, #475577,
-                    #D6145F, #30C381, #9365B8, #ff1e00, #bf9600, #0003b3, #ff006a, #cc3300, #ffea00, #00cc85,
-                    #007ab3, #6900cc, #ff0048, #c2cc00, #00ffc8, #008cff, #bf0036, #b24400, #d0ff00, #00ffea,
-                    #0062b3, #ea00ff, #ff0026, #8bcc00, #00bfaf, #006aff, #af00bf, #bf001d, #bf6300, #8cff00,
-                    #00f2ff, #004ab3, #ff00d0, #ffa600, #3acc00, #00b6bf, #0048ff, #bf7c00, #04ff00, #00d0ff,
-                    #0036bf, #ff008c, #00bf49, #0092b3, #0004ff, #b20062, #649173 !default;
-
 // ===============  Generate color classes ===============
 @for $i from 1 through length($o-filter_colors) {
     $color: nth($o-filter_colors, $i);
 
-    .o_calendar_view .fc-view {
+    .o_legacy_calendar_view .fc-view {
         .o_calendar_hatched_#{$i - 1} {
             background: repeating-linear-gradient(
                 45deg,
@@ -947,39 +653,4 @@ $o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814
             }
         }
     }
-
-    .o_cw_filter_color_#{$i - 1} {
-        .o_cw_filter_input_bg {
-            border-color: $color;
-            background: $color;
-            color: color-contrast($color);
-        }
-    }
-
-    .o_cw_popover.o_calendar_color_#{$i - 1} {
-        $color-subdle: mix(white, $color, 90%);
-
-        .card-header, .card-header .popover-header {
-            background-color: $color-subdle;
-            color: color-contrast($color-subdle);
-        }
-
-        .card-header {
-            padding-left: 2px;
-            border-color: mix($card-border-color, mix(white, $color));
-        }
-    }
-}
-
-.modal {
-    .o_attendee_head {
-        width: 32px;
-        margin-right: 5px;
-    }
-}
-
-.o_dashboard {
-    .o_calendar_container .o_calendar_sidebar_container {
-        display: none;
-    }
 }
diff --git a/addons/web/static/src/legacy/xml/web_calendar.xml b/addons/web/static/src/legacy/xml/web_calendar.xml
index 6d511f565c3..1972507c360 100644
--- a/addons/web/static/src/legacy/xml/web_calendar.xml
+++ b/addons/web/static/src/legacy/xml/web_calendar.xml
@@ -1,6 +1,6 @@
 <template>
     <div t-name="CalendarView" class="o_calendar_container">
-        <div class="o_calendar_view">
+        <div class="o_legacy_calendar_view">
             <div class="o_calendar_buttons" role="toolbar" aria-label="Calendar toolbar"/>
             <div class="o_calendar_widget" />
         </div>
diff --git a/addons/web/static/src/search/control_panel/control_panel.js b/addons/web/static/src/search/control_panel/control_panel.js
index 220d25f4617..2f8c47d5c3f 100644
--- a/addons/web/static/src/search/control_panel/control_panel.js
+++ b/addons/web/static/src/search/control_panel/control_panel.js
@@ -28,6 +28,7 @@ export class ControlPanel extends Component {
         this.pagerProps = this.env.config.pagerProps
             ? useState(this.env.config.pagerProps)
             : undefined;
+        this.breadcrumbs = useState(this.env.config.breadcrumbs);
 
         this.root = useRef("root");
 
diff --git a/addons/web/static/src/search/control_panel/control_panel.scss b/addons/web/static/src/search/control_panel/control_panel.scss
index b17df5f9897..f49181af4f0 100644
--- a/addons/web/static/src/search/control_panel/control_panel.scss
+++ b/addons/web/static/src/search/control_panel/control_panel.scss
@@ -190,7 +190,7 @@
     .o_cp_bottom_right {
         display: flex;
         flex-wrap: wrap;
-        justify-content: flex-end;
+        justify-content: space-between;
         column-gap: $o-horizontal-padding;
 
         > .o_cp_pager {
diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index b21e31d5ad9..ff8270e3edb 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -39,8 +39,8 @@
                     </div>
                 </t>
 
-                <div class="o_cp_pager" role="search">
-                    <Pager t-if="pagerProps and pagerProps.total > 0" t-props="pagerProps"/>
+                <div t-if="pagerProps and pagerProps.total > 0" class="o_cp_pager" role="search">
+                    <Pager t-props="pagerProps"/>
                 </div>
 
                 <t t-if="env.config.viewSwitcherEntries.length > 1">
@@ -135,8 +135,8 @@
                     <t t-slot="control-panel-bottom-left"/>
                 </div>
                 <div t-if="display['bottom-right']" class="o_cp_bottom_right">
-                    <div class="o_cp_pager" role="search">
-                        <Pager t-if="pagerProps and pagerProps.total > 0" t-props="pagerProps"/>
+                    <div t-if="pagerProps and pagerProps.total > 0" class="o_cp_pager" role="search">
+                        <Pager t-props="pagerProps"/>
                     </div>
 
                     <t t-if="env.config.viewSwitcherEntries.length > 1">
@@ -172,8 +172,8 @@
 
     <t t-name="web.Breadcrumbs" owl="1">
         <ol class="breadcrumb">
-            <t t-foreach="env.config.breadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
-                <t t-set="isPenultimate" t-value="breadcrumb_index === env.config.breadcrumbs.length - 2"/>
+            <t t-foreach="breadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
+                <t t-set="isPenultimate" t-value="breadcrumb_index === breadcrumbs.length - 2"/>
                 <li t-if="!breadcrumb_last" class="breadcrumb-item" t-att-data-hotkey="isPenultimate and 'b'" t-att-class="{ o_back_button: isPenultimate}" t-on-click.prevent="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
                     <a href="#">
                         <t t-if="breadcrumb.name" t-esc="breadcrumb.name"/>
@@ -190,7 +190,6 @@
 
     <t t-name="web.Breadcrumbs.Small" owl="1">
         <ol class="breadcrumb">
-            <t t-set="breadcrumbs" t-value="env.config.breadcrumbs" />
             <t t-if="breadcrumbs.length > 1">
                 <t t-set="breadcrumb" t-value="breadcrumbs[breadcrumbs.length - 2]" />
                 <li class="breadcrumb-item o_back_button btn btn-secondary"
diff --git a/addons/web/static/src/views/calendar/calendar_arch_parser.js b/addons/web/static/src/views/calendar/calendar_arch_parser.js
new file mode 100644
index 00000000000..3e39b6c7793
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_arch_parser.js
@@ -0,0 +1,195 @@
+/** @odoo-module **/
+
+import { evaluateExpr } from "@web/core/py_js/py";
+import { XMLParser } from "@web/core/utils/xml";
+import { Field } from "@web/views/fields/field";
+import { archParseBoolean } from "@web/views/utils";
+
+const FIELD_ATTRIBUTE_NAMES = [
+    "date_start",
+    "date_delay",
+    "date_stop",
+    "all_day",
+    "recurrence_update",
+    "create_name_field",
+    "color",
+];
+const SCALES = ["day", "week", "month", "year"];
+
+export class CalendarParseArchError extends Error {}
+
+export class CalendarArchParser extends XMLParser {
+    parse(arch, models, modelName) {
+        const fields = models[modelName];
+        const fieldNames = new Set(fields.display_name ? ["display_name"] : []);
+        const fieldMapping = { date_start: "date_start" };
+        let jsClass = null;
+        let eventLimit = 5;
+        let scales = [...SCALES];
+        let scale = "week";
+        let canCreate = true;
+        let canDelete = true;
+        let hasQuickCreate = true;
+        let hasEditDialog = false;
+        let showUnusualDays = false;
+        let isDateHidden = false;
+        let isTimeHidden = false;
+        let formViewId = false;
+        const popoverFields = {};
+        const filtersInfo = {};
+
+        this.visitXML(arch, (node) => {
+            switch (node.tagName) {
+                case "calendar": {
+                    if (!node.hasAttribute("date_start")) {
+                        throw new CalendarParseArchError(
+                            `Calendar view has not defined "date_start" attribute.`
+                        );
+                    }
+
+                    jsClass = node.getAttribute("js_class");
+
+                    for (const fieldAttrName of FIELD_ATTRIBUTE_NAMES) {
+                        if (node.hasAttribute(fieldAttrName)) {
+                            const fieldName = node.getAttribute(fieldAttrName);
+                            fieldNames.add(fieldName);
+                            fieldMapping[fieldAttrName] = fieldName;
+                        }
+                    }
+
+                    if (node.hasAttribute("event_limit")) {
+                        eventLimit = evaluateExpr(node.getAttribute("event_limit"));
+                        if (!Number.isInteger(eventLimit)) {
+                            throw new CalendarParseArchError(
+                                `Calendar view's event limit should be a number`
+                            );
+                        }
+                    }
+                    if (node.hasAttribute("scales")) {
+                        const scalesAttr = node.getAttribute("scales");
+                        scales = scalesAttr.split(",").filter((scale) => SCALES.includes(scale));
+                    }
+                    if (node.hasAttribute("mode")) {
+                        scale = node.getAttribute("mode");
+                        if (!scales.includes(scale)) {
+                            throw new CalendarParseArchError(
+                                `Calendar view cannot display mode: ${scale}`
+                            );
+                        }
+                    }
+                    if (node.hasAttribute("create")) {
+                        canCreate = archParseBoolean(node.getAttribute("create"), true);
+                    }
+                    if (node.hasAttribute("delete")) {
+                        canDelete = archParseBoolean(node.getAttribute("delete"), true);
+                    }
+                    if (node.hasAttribute("quick_add")) {
+                        hasQuickCreate = archParseBoolean(node.getAttribute("quick_add"), true);
+                    }
+                    if (node.hasAttribute("event_open_popup")) {
+                        hasEditDialog = archParseBoolean(node.getAttribute("event_open_popup"));
+                    }
+                    if (node.hasAttribute("show_unusual_days")) {
+                        showUnusualDays = archParseBoolean(node.getAttribute("show_unusual_days"));
+                    }
+                    if (node.hasAttribute("hide_date")) {
+                        isDateHidden = archParseBoolean(node.getAttribute("hide_date"));
+                    }
+                    if (node.hasAttribute("hide_time")) {
+                        isTimeHidden = archParseBoolean(node.getAttribute("hide_time"));
+                    }
+                    if (node.hasAttribute("form_view_id")) {
+                        formViewId = parseInt(node.getAttribute("form_view_id"), 10);
+                    }
+
+                    break;
+                }
+                case "field": {
+                    const fieldName = node.getAttribute("name");
+                    fieldNames.add(fieldName);
+
+                    const fieldInfo = Field.parseFieldNode(
+                        node,
+                        models,
+                        modelName,
+                        "calendar",
+                        jsClass
+                    );
+                    popoverFields[fieldName] = fieldInfo;
+
+                    const field = fields[fieldName];
+                    if (!node.hasAttribute("invisible") || node.hasAttribute("filters")) {
+                        let filterInfo = null;
+                        if (
+                            node.hasAttribute("avatar_field") ||
+                            node.hasAttribute("write_model") ||
+                            node.hasAttribute("write_field") ||
+                            node.hasAttribute("color") ||
+                            node.hasAttribute("filters")
+                        ) {
+                            filtersInfo[fieldName] = filtersInfo[fieldName] || {
+                                avatarFieldName: null,
+                                colorFieldName: null,
+                                fieldName,
+                                filterFieldName: null,
+                                label: field.string,
+                                resModel: field.relation,
+                                writeFieldName: null,
+                                writeResModel: null,
+                            };
+                            filterInfo = filtersInfo[fieldName];
+                        }
+                        if (node.hasAttribute("filter_field")) {
+                            filterInfo.filterFieldName = node.getAttribute("filter_field");
+                        }
+                        if (node.hasAttribute("avatar_field")) {
+                            filterInfo.avatarFieldName = node.getAttribute("avatar_field");
+                        }
+                        if (node.hasAttribute("write_model")) {
+                            filterInfo.writeResModel = node.getAttribute("write_model");
+                        }
+                        if (node.hasAttribute("write_field")) {
+                            filterInfo.writeFieldName = node.getAttribute("write_field");
+                        }
+                        if (node.hasAttribute("filters")) {
+                            if (node.hasAttribute("color")) {
+                                filterInfo.colorFieldName = node.getAttribute("color");
+                            }
+                            if (node.hasAttribute("avatar_field") && field.relation) {
+                                if (
+                                    field.relation.includes([
+                                        "res.users",
+                                        "res.partners",
+                                        "hr.employee",
+                                    ])
+                                ) {
+                                    filterInfo.avatarFieldName = "image_128";
+                                }
+                            }
+                        }
+                    }
+
+                    break;
+                }
+            }
+        });
+
+        return {
+            canCreate,
+            canDelete,
+            eventLimit,
+            fieldMapping,
+            fieldNames: [...fieldNames],
+            filtersInfo,
+            formViewId,
+            hasEditDialog,
+            hasQuickCreate,
+            isDateHidden,
+            isTimeHidden,
+            popoverFields,
+            scale,
+            scales,
+            showUnusualDays,
+        };
+    }
+}
diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.js b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.js
new file mode 100644
index 00000000000..214f7d6072d
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.js
@@ -0,0 +1,98 @@
+/** @odoo-module **/
+
+import { Dialog } from "@web/core/dialog/dialog";
+import { is24HourFormat } from "@web/core/l10n/dates";
+import { Field } from "@web/views/fields/field";
+import { Record } from "@web/views/record";
+
+const { Component } = owl;
+
+export class CalendarCommonPopover extends Component {
+    setup() {
+        this.time = null;
+        this.timeDuration = null;
+        this.date = null;
+        this.dateDuration = null;
+
+        this.computeDateTimeAndDuration();
+    }
+
+    get isEventEditable() {
+        return true;
+    }
+    get isEventDeletable() {
+        return this.props.model.canDelete;
+    }
+
+    computeDateTimeAndDuration() {
+        const record = this.props.record;
+        const { start, end } = record;
+        const isSameDay = start.hasSame(end, "day");
+
+        if (!record.isTimeHidden && !record.isAllDay && isSameDay) {
+            const timeFormat = is24HourFormat() ? "HH:mm" : "hh:mm a";
+            this.time = `${start.toFormat(timeFormat)} - ${end.toFormat(timeFormat)}`;
+
+            const duration = end.diff(start, ["hours", "minutes"]);
+            const formatParts = [];
+            if (duration.hours > 0) {
+                const hourString =
+                    duration.hours === 1 ? this.env._t("hour") : this.env._t("hours");
+                formatParts.push(`h '${hourString}'`);
+            }
+            if (duration.minutes > 0) {
+                const minuteStr =
+                    duration.minutes === 1 ? this.env._t("minute") : this.env._t("minutes");
+                formatParts.push(`m '${minuteStr}'`);
+            }
+            this.timeDuration = duration.toFormat(formatParts.join(", "));
+        }
+
+        if (!this.props.model.isDateHidden) {
+            this.date = this.getFormattedDate(start, end, record.isAllDay);
+
+            if (record.isAllDay) {
+                if (isSameDay) {
+                    this.dateDuration = this.env._t("All day");
+                } else {
+                    const duration = end.plus({ day: 1 }).diff(start, "days");
+                    this.dateDuration = duration.toFormat(`d '${this.env._t("days")}'`);
+                }
+            }
+        }
+    }
+    getFormattedDate(start, end, isAllDay) {
+        const isSameDay = start.hasSame(end, "day");
+        if (!isSameDay && start.hasSame(end, "month")) {
+            // Simplify date-range if an event occurs into the same month (eg. "August, 4-5 2019")
+            return start.toFormat("LLLL d") + "-" + end.toFormat("d, y");
+        } else {
+            return isSameDay
+                ? start.toFormat("DDDD")
+                : start.toFormat("DDD") + " - " + end.toFormat("DDD");
+        }
+    }
+
+    onEditEvent() {
+        this.props.editRecord(this.props.record);
+        this.props.close();
+    }
+    onDeleteEvent() {
+        this.props.deleteRecord(this.props.record);
+        this.props.close();
+    }
+}
+CalendarCommonPopover.components = {
+    Dialog,
+    Field,
+    Record,
+};
+CalendarCommonPopover.template = "web.CalendarCommonPopover";
+CalendarCommonPopover.props = {
+    close: Function,
+    record: Object,
+    model: Object,
+    createRecord: Function,
+    deleteRecord: Function,
+    editRecord: Function,
+};
diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.scss b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.scss
new file mode 100644
index 00000000000..47fec579845
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.scss
@@ -0,0 +1,71 @@
+// Variables
+$o-cw-popup-avatar-size: 16px;
+
+.o_cw_popover {
+    min-width: 256px;
+    max-width: 328px;
+    font-size: $font-size-base;
+
+    .card-header,
+    .card-header .popover-header {
+        font-size: 1.05em;
+        font-weight: 500;
+        line-height: 1;
+    }
+
+    .card-footer {
+        background: none;
+    }
+
+    .o_footer_shrink {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+    .o_cw_popover_close {
+        cursor: pointer;
+    }
+
+    .o_calendar_avatars {
+        line-height: 1;
+    }
+
+    .o_calendar_avatars img {
+        margin-right: 0.4rem;
+        width: $o-cw-popup-avatar-size;
+        height: $o-cw-popup-avatar-size;
+        border-radius: 100%;
+    }
+
+    .list-group-item {
+        padding: 0.5rem 1rem;
+        border: none;
+    }
+
+    .o_cw_popover_fields_secondary {
+        max-height: 170px; // Fallback for old browsers
+        max-height: 25vh;
+        overflow: auto;
+        padding-bottom: 1px; // prevents the scrollbar to show when not needed
+
+        &::-webkit-scrollbar {
+            background: map-get($grays, "200");
+            width: 6px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: map-get($grays, "500");
+        }
+    }
+
+    .fc-rtl & {
+        text-align: right;
+        .o_calendar_avatars {
+            > div {
+                justify-content: flex-end;
+            }
+            img {
+                order: 2;
+                margin: 0 0 0 0.4rem;
+            }
+        }
+    }
+}
diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
new file mode 100644
index 00000000000..7f3593d7847
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CalendarCommonPopover" owl="1">
+        <t t-if="env.isSmall">
+            <Dialog title="props.record.title">
+                <t t-call="web.CalendarCommonPopover.body" />
+                <t t-set-slot="footer">
+                    <t t-call="web.CalendarCommonPopover.footer" />
+                </t>
+            </Dialog>
+        </t>
+        <t t-else="">
+            <t t-call="web.CalendarCommonPopover.popover" />
+        </t>
+    </t>
+
+    <t t-name="web.CalendarCommonPopover.popover" owl="1">
+        <div class="card-header d-flex justify-content-between py-2 pe-2">
+            <h4 class="p-0 pt-1">
+                <span class="popover-header border-0" t-esc="props.record.title" />
+            </h4>
+            <span class="o_cw_popover_close ms-4 mt-2 me-2" t-on-click.stop="() => props.close()">
+                <i class="fa fa-close" />
+            </span>
+        </div>
+        <div class="o_cw_body">
+            <t t-call="web.CalendarCommonPopover.body" />
+            <div class="card-footer border-top" t-att-class="{ 'o_footer_shrink': isEventEditable and isEventDeletable }">
+                <t t-call="web.CalendarCommonPopover.footer" />
+            </div>
+        </div>
+    </t>
+
+    <t t-name="web.CalendarCommonPopover.body" owl="1">
+        <ul class="list-group list-group-flush">
+            <li t-if="date" class="list-group-item">
+                <i class="fa fa-fw fa-calendar-o" />
+                <b class="text-capitalize" t-esc="date" /> <small t-if="dateDuration"><b t-esc="`(${dateDuration})`" /></small>
+            </li>
+            <li t-if="time" class="list-group-item">
+                <i class="fa fa-fw fa-clock-o" />
+                <b t-esc="time" /> <small t-if="timeDuration"><b t-esc="`(${timeDuration})`" /></small>
+            </li>
+        </ul>
+        <ul class="list-group list-group-flush o_cw_popover_fields_secondary">
+            <Record resModel="props.model.resModel" resId="props.record.id" fields="props.model.fields" activeFields="props.model.popoverFields" mode="'readonly'" initialValues="props.record.rawRecord" t-slot-scope="slot">
+                <t t-foreach="slot.record.fieldNames" t-as="fieldName" t-key="fieldName">
+                    <t t-if="!slot.record.isInvisible(fieldName)">
+                        <t t-set="fieldInfo" t-value="props.model.popoverFields[fieldName]" />
+                        <li class="list-group-item flex-shrink-0 d-flex flex-wrap align-items-center" t-att-class="fieldInfo.rawAttrs.class">
+                            <strong class="me-2">
+                                <t t-if="fieldInfo.options.icon">
+                                    <b>
+                                        <i t-att-class="fieldInfo.options.icon" />
+                                    </b>
+                                </t>
+                                <t t-else="">
+                                    <t t-esc="fieldInfo.string" />
+                                    :
+                                </t>
+                            </strong>
+                            <div class="flex-grow-1">
+                                <Field name="fieldName" record="slot.record" fieldInfo="fieldInfo" />
+                            </div>
+                        </li>
+                    </t>
+                </t>
+            </Record>
+        </ul>
+    </t>
+
+    <t t-name="web.CalendarCommonPopover.footer" owl="1">
+        <t t-if="isEventEditable">
+            <a href="#" class="btn btn-primary o_cw_popover_edit" t-on-click="onEditEvent">Edit</a>
+        </t>
+        <t t-if="isEventDeletable">
+            <a href="#" class="btn btn-secondary o_cw_popover_delete ms-2" t-on-click="onDeleteEvent">Delete</a>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js
new file mode 100644
index 00000000000..afe5a78fc77
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js
@@ -0,0 +1,296 @@
+/** @odoo-module **/
+
+import { is24HourFormat } from "@web/core/l10n/dates";
+import { localization } from "@web/core/l10n/localization";
+import { renderToString } from "@web/core/utils/render";
+import { useDebounced } from "@web/core/utils/timing";
+import { getColor } from "../colors";
+import { useCalendarPopover, useClickHandler, useFullCalendar } from "../hooks";
+import { CalendarCommonPopover } from "./calendar_common_popover";
+
+const { Component, useEffect } = owl;
+
+const SCALE_TO_FC_VIEW = {
+    day: "timeGridDay",
+    week: "timeGridWeek",
+    month: "dayGridMonth",
+};
+const SCALE_TO_HEADER_FORMAT = {
+    day: "DDD",
+    week: "EEE d",
+    month: "EEEE",
+};
+const SHORT_SCALE_TO_HEADER_FORMAT = {
+    ...SCALE_TO_HEADER_FORMAT,
+    day: "D",
+    month: "EEE",
+};
+const HOUR_FORMATS = {
+    12: {
+        hour: "numeric",
+        minute: "2-digit",
+        omitZeroMinute: true,
+        meridiem: "short",
+    },
+    24: {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: false,
+    },
+};
+
+export class CalendarCommonRenderer extends Component {
+    setup() {
+        this.fc = useFullCalendar("fullCalendar", this.options);
+        this.click = useClickHandler(this.onClick, this.onDblClick);
+        this.popover = useCalendarPopover(this.constructor.components.Popover);
+        this.onWindowResizeDebounced = useDebounced(this.onWindowResize, 200);
+
+        useEffect(() => {
+            this.updateSize();
+        });
+
+        useEffect(
+            (view) => {
+                this.env.config.setDisplayName(`${this.props.displayName} (${view.title})`);
+            },
+            () => [this.fc.api.view]
+        );
+    }
+
+    get options() {
+        return {
+            allDaySlot: this.props.model.hasAllDaySlot,
+            allDayText: this.env._t("All day"),
+            columnHeaderFormat: this.env.isSmall
+                ? SHORT_SCALE_TO_HEADER_FORMAT[this.props.model.scale]
+                : SCALE_TO_HEADER_FORMAT[this.props.model.scale],
+            dateClick: this.onDateClick,
+            dayRender: this.onDayRender,
+            defaultDate: this.props.model.date.toISO(),
+            defaultView: SCALE_TO_FC_VIEW[this.props.model.scale],
+            dir: localization.direction,
+            droppable: true,
+            editable: this.props.model.canEdit,
+            eventClick: this.onEventClick,
+            eventDragStart: this.onEventDragStart,
+            eventDrop: this.onEventDrop,
+            eventLimit: this.props.model.eventLimit,
+            eventLimitClick: this.onEventLimitClick,
+            eventMouseEnter: this.onEventMouseEnter,
+            eventMouseLeave: this.onEventMouseLeave,
+            eventRender: this.onEventRender,
+            eventResizableFromStart: true,
+            eventResize: this.onEventResize,
+            eventResizeStart: this.onEventResizeStart,
+            events: (_, successCb) => successCb(this.mapRecordsToEvents()),
+            firstDay: this.props.model.firstDayOfWeek % 7,
+            header: false,
+            height: "parent",
+            locale: luxon.Settings.defaultLocale,
+            longPressDelay: 500,
+            navLinks: false,
+            nowIndicator: true,
+            plugins: ["dayGrid", "interaction", "timeGrid", "luxon"],
+            select: this.onSelect,
+            selectAllow: this.isSelectionAllowed,
+            selectMinDistance: 5, // needed to not trigger select when click
+            selectMirror: true,
+            selectable: this.props.model.canCreate,
+            slotLabelFormat: is24HourFormat() ? HOUR_FORMATS[24] : HOUR_FORMATS[12],
+            snapDuration: { minutes: 15 },
+            timeZone: luxon.Settings.defaultZone.name,
+            unselectAuto: false,
+            weekLabel:
+                this.props.model.scale === "month" && this.env.isSmall ? "" : this.env._t("Week"),
+            weekNumberCalculation: "ISO",
+            weekNumbers: true,
+            weekNumbersWithinDays: !this.env.isSmall,
+            windowResize: this.onWindowResizeDebounced,
+        };
+    }
+
+    getStartTime(record) {
+        const timeFormat = is24HourFormat() ? "HH:mm" : "hh:mm a";
+        return record.start.toFormat(timeFormat);
+    }
+
+    computeEventSelector(event) {
+        return `[data-event-id="${event.id}"]`;
+    }
+    highlightEvent(event, className) {
+        for (const el of this.fc.el.querySelectorAll(this.computeEventSelector(event))) {
+            el.classList.add(className);
+        }
+    }
+    unhighlightEvent(event, className) {
+        for (const el of this.fc.el.querySelectorAll(this.computeEventSelector(event))) {
+            el.classList.remove(className);
+        }
+    }
+    mapRecordsToEvents() {
+        return Object.values(this.props.model.records).map((r) => this.convertRecordToEvent(r));
+    }
+    convertRecordToEvent(record) {
+        return {
+            id: record.id,
+            title: record.title,
+            start: record.start.toISO(),
+            end:
+                ["week", "month"].includes(this.props.model.scale) && record.isAllDay
+                    ? record.end.plus({ days: 1 }).toISO()
+                    : record.end.toISO(),
+            allDay: record.isAllDay,
+        };
+    }
+    getPopoverProps(record) {
+        return {
+            record,
+            model: this.props.model,
+            createRecord: this.props.createRecord,
+            deleteRecord: this.props.deleteRecord,
+            editRecord: this.props.editRecord,
+        };
+    }
+    openPopover(target, record) {
+        this.popover.open(
+            target,
+            this.getPopoverProps(record),
+            `o_cw_popover o_calendar_color_${record.colorIndex}`
+        );
+    }
+    updateSize() {
+        const height = window.innerHeight - this.fc.el.getBoundingClientRect().top;
+        this.fc.el.style.height = `${height}px`;
+        this.fc.api.updateSize();
+    }
+
+    onClick(info) {
+        this.openPopover(info.el, this.props.model.records[info.event.id]);
+        this.highlightEvent(info.event, "o_cw_custom_highlight");
+    }
+    onDateClick(info) {
+        if (this.env.isSmall && this.props.model.scale === "month") {
+            this.props.model.load({
+                date: luxon.DateTime.fromISO(info.dateStr),
+                scale: "day",
+            });
+            return;
+        }
+        this.props.createRecord(this.fcEventToRecord(info));
+    }
+    onDayRender(info) {
+        const date = luxon.DateTime.fromJSDate(info.date).toISODate();
+        if (this.props.model.unusualDays.includes(date)) {
+            info.el.classList.add("o_calendar_disabled");
+        }
+    }
+    onDblClick(info) {
+        this.props.editRecord(this.props.model.records[info.event.id]);
+    }
+    onEventClick(info) {
+        this.click(info);
+    }
+    onEventRender(info) {
+        const { el, event } = info;
+        el.dataset.eventId = event.id;
+        el.classList.add("o_event", "py-0");
+        const record = this.props.model.records[event.id];
+
+        if (record) {
+            // This is needed in order to give the possibility to change the event template.
+            const injectedContentStr = renderToString(this.constructor.eventTemplate, {
+                ...record,
+                startTime: this.getStartTime(record),
+            });
+            const domParser = new DOMParser();
+            const { children } = domParser.parseFromString(injectedContentStr, "text/html").body;
+            el.querySelector(".fc-content").replaceWith(...children);
+
+            const color = getColor(record.colorIndex);
+            if (typeof color === "string") {
+                el.style.backgroundColor = color;
+            } else if (typeof color === "number") {
+                el.classList.add(`o_calendar_color_${color}`);
+            } else {
+                el.classList.add("o_calendar_color_1");
+            }
+
+            if (record.isHatched) {
+                el.classList.add("o_event_hatched");
+            }
+            if (record.isStriked) {
+                el.classList.add("o_event_striked");
+            }
+        }
+
+        if (!el.querySelector(".fc-bg")) {
+            const bg = document.createElement("div");
+            bg.classList.add("fc-bg");
+            el.appendChild(bg);
+        }
+    }
+    async onSelect(info) {
+        this.popover.close();
+        await this.props.createRecord(this.fcEventToRecord(info));
+        this.fc.api.unselect();
+    }
+    isSelectionAllowed(event) {
+        return event.end.getDate() === event.start.getDate() || event.allDay;
+    }
+    onEventDrop(info) {
+        this.fc.api.unselect();
+        this.props.model.updateRecord(this.fcEventToRecord(info.event), { moved: true });
+    }
+    onEventResize(info) {
+        this.fc.api.unselect();
+        this.props.model.updateRecord(this.fcEventToRecord(info.event));
+    }
+    fcEventToRecord(event) {
+        const { id, allDay, date, start, end } = event;
+        const res = {
+            start: luxon.DateTime.fromJSDate(date || start),
+            isAllDay: allDay,
+        };
+        if (end) {
+            res.end = luxon.DateTime.fromJSDate(end);
+            if (["week", "month"].includes(this.props.model.scale) && allDay) {
+                res.end = res.end.minus({ days: 1 });
+            }
+        }
+        if (id) {
+            res.id = this.props.model.records[id].id;
+        }
+        return res;
+    }
+    onEventMouseEnter(info) {
+        this.highlightEvent(info.event, "o_cw_custom_highlight");
+    }
+    onEventMouseLeave(info) {
+        if (!info.event.id) {
+            return;
+        }
+        this.unhighlightEvent(info.event, "o_cw_custom_highlight");
+    }
+    onEventDragStart(info) {
+        info.el.classList.add(info.view.type);
+        this.fc.api.unselect();
+        this.highlightEvent(info.event, "o_cw_custom_highlight");
+    }
+    onEventResizeStart(info) {
+        this.fc.api.unselect();
+        this.highlightEvent(info.event, "o_cw_custom_highlight");
+    }
+    onEventLimitClick() {
+        this.fc.api.unselect();
+        return "popover";
+    }
+    onWindowResize() {
+        this.updateSize();
+    }
+}
+CalendarCommonRenderer.components = {
+    Popover: CalendarCommonPopover,
+};
+CalendarCommonRenderer.template = "web.CalendarCommonRenderer";
+CalendarCommonRenderer.eventTemplate = "web.CalendarCommonRenderer.event";
diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml
new file mode 100644
index 00000000000..91b09e7004b
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CalendarCommonRenderer" owl="1">
+        <div class="o_calendar_widget" t-ref="fullCalendar" />
+    </t>
+
+    <t t-name="web.CalendarCommonRenderer.event" owl="1">
+        <div class="fc-content">
+            <t t-if="!isTimeHidden">
+                <span class="fc-time" t-esc="startTime" />
+                <t> </t>
+            </t>
+            <div class="o_event_title" t-esc="title"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/calendar/calendar_controller.js b/addons/web/static/src/views/calendar/calendar_controller.js
new file mode 100644
index 00000000000..aa84206ebf8
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_controller.js
@@ -0,0 +1,221 @@
+/** @odoo-module **/
+
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { _lt, _t } from "@web/core/l10n/translation";
+import { useOwnedDialogs, useService } from "@web/core/utils/hooks";
+import { Layout } from "@web/search/layout";
+import { useModel } from "@web/views/model";
+import { FormViewDialog } from "@web/views/view_dialogs/form_view_dialog";
+import { useSetupView } from "@web/views/view_hook";
+import { CalendarDatePicker } from "./date_picker/calendar_date_picker";
+import { CalendarFilterPanel } from "./filter_panel/calendar_filter_panel";
+import { CalendarMobileFilterPanel } from "./mobile_filter_panel/calendar_mobile_filter_panel";
+import { CalendarQuickCreate } from "./quick_create/calendar_quick_create";
+
+const { Component, useState } = owl;
+
+const SCALE_LABELS = {
+    day: _lt("Day"),
+    week: _lt("Week"),
+    month: _lt("Month"),
+    year: _lt("Year"),
+};
+
+function useUniqueDialog() {
+    const displayDialog = useOwnedDialogs();
+    let close = null;
+    return (...args) => {
+        if (close) {
+            close();
+        }
+        close = displayDialog(...args);
+    };
+}
+
+export class CalendarController extends Component {
+    setup() {
+        this.action = useService("action");
+        this.orm = useService("orm");
+        this.displayDialog = useUniqueDialog();
+
+        this.model = useModel(this.props.Model, {
+            ...this.props.archInfo,
+            resModel: this.props.resModel,
+            domain: this.props.domain,
+            fields: this.props.fields,
+        });
+        this.displayName = this.env.config.getDisplayName();
+
+        useSetupView({
+            getLocalState: () => this.model.exportedState,
+        });
+
+        this.state = useState({
+            showSideBar: !this.env.isSmall,
+        });
+    }
+
+    get rendererProps() {
+        return {
+            model: this.model,
+            createRecord: this.createRecord.bind(this),
+            deleteRecord: this.deleteRecord.bind(this),
+            editRecord: this.editRecord.bind(this),
+            setDate: this.setDate.bind(this),
+            displayName: this.displayName,
+        };
+    }
+    get containerProps() {
+        return {
+            model: this.model,
+        };
+    }
+    get datePickerProps() {
+        return {
+            model: this.model,
+        };
+    }
+    get filterPanelProps() {
+        return {
+            model: this.model,
+        };
+    }
+    get mobileFilterPanelProps() {
+        return {
+            model: this.model,
+            sideBarShown: this.state.showSideBar,
+            toggleSideBar: () => (this.state.showSideBar = !this.state.showSideBar),
+        };
+    }
+    get scaleLabels() {
+        return SCALE_LABELS;
+    }
+    get showCalendar() {
+        return !this.env.isSmall || !this.state.showSideBar;
+    }
+
+    get showSideBar() {
+        return this.state.showSideBar;
+    }
+
+    get className() {
+        return this.props.className;
+    }
+
+    getTodayDay() {
+        return luxon.DateTime.local().day;
+    }
+
+    async setDate(move) {
+        let date = null;
+        switch (move) {
+            case "next":
+                date = this.model.date.plus({ [`${this.model.scale}s`]: 1 });
+                break;
+            case "previous":
+                date = this.model.date.minus({ [`${this.model.scale}s`]: 1 });
+                break;
+            case "today":
+                date = luxon.DateTime.local().startOf("day");
+                break;
+        }
+        await this.model.load({ date });
+    }
+    async setScale(scale) {
+        await this.model.load({ scale });
+    }
+
+    getQuickCreateProps(record) {
+        return {
+            record,
+            model: this.model,
+            editRecord: this.editRecordInCreation.bind(this),
+        };
+    }
+
+    createRecord(record) {
+        if (!this.model.canCreate) {
+            return;
+        }
+        if (this.model.hasQuickCreate) {
+            return new Promise((resolve) => {
+                this.displayDialog(
+                    this.constructor.components.QuickCreate,
+                    this.getQuickCreateProps(record),
+                    { onClose: () => resolve() }
+                );
+            });
+        } else {
+            return this.editRecordInCreation(record);
+        }
+    }
+    async editRecord(record, context = {}, shouldFetchFormViewId = true) {
+        if (this.model.hasEditDialog) {
+            return new Promise((resolve) => {
+                this.displayDialog(
+                    FormViewDialog,
+                    {
+                        resModel: this.model.resModel,
+                        resId: record.id || false,
+                        context,
+                        title: record.id ? `${_t("Open")}: ${record.title}` : _t("New Event"),
+                        viewId: this.model.formViewId,
+                        onRecordSaved: () => this.model.load(),
+                    },
+                    { onClose: () => resolve() }
+                );
+            });
+        } else {
+            let formViewId = this.model.formViewId;
+            if (shouldFetchFormViewId) {
+                formViewId = await this.orm.call(
+                    this.model.resModel,
+                    "get_formview_id",
+                    [[record.id]],
+                    context
+                );
+            }
+            const action = {
+                type: "ir.actions.act_window",
+                res_model: this.model.resModel,
+                views: [[formViewId || false, "form"]],
+                target: "current",
+                context,
+            };
+            if (record.id) {
+                action.res_id = record.id;
+            }
+            this.action.doAction(action);
+        }
+    }
+    editRecordInCreation(record) {
+        const rawRecord = this.model.buildRawRecord(record);
+        const context = this.model.makeContextDefaults(rawRecord);
+        return this.editRecord(record, context, false);
+    }
+    deleteRecord(record) {
+        this.displayDialog(ConfirmationDialog, {
+            title: this.env._t("Confirmation"),
+            body: this.env._t("Are you sure you want to delete this record ?"),
+            confirm: () => {
+                this.model.unlinkRecord(record.id);
+            },
+            cancel: () => {
+                // `ConfirmationDialog` needs this prop to display the cancel
+                // button but we do nothing on cancel.
+            },
+        });
+    }
+}
+CalendarController.components = {
+    DatePicker: CalendarDatePicker,
+    FilterPanel: CalendarFilterPanel,
+    MobileFilterPanel: CalendarMobileFilterPanel,
+    QuickCreate: CalendarQuickCreate,
+    Layout,
+    Dropdown,
+    DropdownItem,
+};
+CalendarController.template = "web.CalendarController";
diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss
new file mode 100644
index 00000000000..d33c8c36055
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_controller.scss
@@ -0,0 +1,239 @@
+// Variables
+$o-cw-color-today-accent: #fc3d39;
+$o-cw-filter-avatar-size: 20px;
+
+// Animations
+@keyframes backgroundfade {
+    from {
+        background-color: rgba($info, 0.5);
+    }
+    to {
+        background-color: rgba($info, 0.1);
+    }
+}
+
+.o_calendar_container {
+    height: 100%;
+    display: flex;
+}
+
+.o_calendar_sidebar_container {
+    flex: 0 0 auto;
+    position: relative;
+    @include o-webclient-padding($top: $o-horizontal-padding/2);
+    background-color: $o-view-background-color;
+    border-left: 1px solid $border-color;
+    overflow-y: auto;
+
+    .o_calendar_sidebar {
+        width: 200px;
+        font-size: 14px;
+
+        @include media-breakpoint-up("xl") {
+            width: 250px;
+        }
+        // sync buttons are only displayed on calendar.event views
+        .o_calendar_sync {
+            padding-top: 0.5em;
+        }
+    }
+
+    .ui-datepicker {
+        margin: 0;
+        width: 100%;
+        padding: 0;
+
+        &,
+        td,
+        .ui-datepicker-header,
+        td a,
+        td span {
+            border: 0;
+        }
+
+        th {
+            padding: 0.7em 0.2em;
+            width: 14%;
+
+            > span {
+                color: #666666;
+            }
+        }
+
+        td {
+            padding: 0;
+
+            a,
+            span {
+                padding: 5px 0;
+                background: none;
+                text-align: center;
+                vertical-align: middle;
+                font-size: 1.2rem;
+                color: map-get($grays, "900");
+                font-weight: 400;
+            }
+
+            &.ui-datepicker-current-day a {
+                background: $info;
+                color: color-contrast($info);
+                font-weight: bold;
+            }
+
+            &.ui-datepicker-today a {
+                margin: auto;
+                border-radius: 100%;
+                padding: 0.1em;
+                width: 25px;
+                background: mix($o-cw-color-today-accent, white, 80%);
+                color: white;
+            }
+
+            &.ui-datepicker-current-day.ui-datepicker-today a {
+                background: $o-cw-color-today-accent;
+            }
+        }
+
+        .ui-datepicker-header {
+            background: none;
+        }
+
+        .ui-datepicker-header {
+            border-radius: 0;
+
+            .ui-datepicker-title {
+                color: map-get($grays, "600");
+                font-size: 1.2rem;
+                font-weight: normal;
+            }
+
+            .ui-icon {
+                background-image: none;
+                text-indent: 0;
+                color: transparent;
+
+                &:before {
+                    font: normal normal normal 13px/1 FontAwesome;
+                    content: "\f053";
+                    color: map-get($grays, "400");
+                }
+                &.ui-icon-circle-triangle-e:before {
+                    content: "\f054";
+                }
+            }
+
+            .ui-state-hover.ui-datepicker-next-hover,
+            .ui-state-hover.ui-datepicker-prev-hover {
+                background: none;
+                border: none;
+                cursor: pointer;
+
+                span:before {
+                    color: map-get($grays, "800");
+                }
+            }
+        }
+
+        .o_selected_range.o_color:not(.ui-datepicker-unselectable) {
+            background-color: $info;
+            animation: backgroundfade 2s forwards;
+        }
+    }
+
+    .o_calendar_filter {
+        font-size: 0.9em;
+        padding: 2em 0 1em;
+
+        .o_cw_filter_collapse_icon {
+            transition: all 0.3s ease;
+            @include o-hover-opacity();
+            font-size: 0.7em;
+        }
+
+        .collapsed .o_cw_filter_collapse_icon {
+            transform: rotate(90deg);
+            opacity: 1;
+        }
+
+        .o_calendar_filter_items_checkall,
+        .o_calendar_filter_item {
+            cursor: pointer;
+            overflow: hidden;
+
+            input {
+                z-index: -1;
+                opacity: 0;
+            }
+
+            .o_cw_filter_input_bg {
+                width: 1.3em;
+                height: 1.3em;
+                border-width: 2px;
+                border-style: solid;
+                border-radius: 1px;
+                overflow: hidden;
+                display: flex;
+
+                &.o_beside_avatar {
+                    width: $o-cw-filter-avatar-size;
+                    height: $o-cw-filter-avatar-size;
+                    border-radius: 2px;
+                    object-fit: cover;
+                }
+            }
+
+            input:not(:checked) + label .o_cw_filter_input_bg {
+                background: transparent !important;
+
+                i.fa {
+                    visibility: hidden;
+                }
+            }
+
+            .o_cw_filter_avatar {
+                width: $o-cw-filter-avatar-size;
+                height: $o-cw-filter-avatar-size;
+                border-radius: 2px;
+
+                &.fa {
+                    padding: 4px 3px;
+                }
+            }
+
+            .o_cw_filter_title {
+                line-height: $o-line-height-base;
+                flex-grow: 1;
+            }
+
+            button.o_remove {
+                @include o-position-absolute(0, 0, 0);
+                transform: translateX(100%);
+                transition: transform 0.2s;
+            }
+
+            &:hover {
+                button.o_remove {
+                    transform: translateX(0%);
+                }
+            }
+        }
+
+        .o_field_many2one {
+            margin-top: 1rem;
+            width: 100%;
+        }
+    }
+}
+
+.modal {
+    .o_attendee_head {
+        width: 32px;
+        margin-right: 5px;
+    }
+}
+
+.o_dashboard {
+    .o_calendar_container .o_calendar_sidebar_container {
+        display: none;
+    }
+}
diff --git a/addons/web/static/src/views/calendar/calendar_controller.xml b/addons/web/static/src/views/calendar/calendar_controller.xml
new file mode 100644
index 00000000000..d8b6c27b096
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_controller.xml
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CalendarController" owl="1">
+        <div t-att-class="className" t-ref="root">
+            <Layout className="model.useSampleModel ? 'o_view_sample_data' : ''" display="props.display">
+                <t t-set-slot="layout-buttons">
+                    <t t-call="{{ props.buttonTemplate }}"/>
+                </t>
+
+                <div class="o_calendar_container">
+                    <MobileFilterPanel t-if="env.isSmall" t-props="mobileFilterPanelProps" />
+                    <t t-if="showCalendar" t-component="props.Renderer" t-props="rendererProps" />
+                    <div t-if="showSideBar" class="o_calendar_sidebar_container d-md-block">
+                        <div class="o_calendar_sidebar">
+                            <DatePicker t-if="!env.isSmall" t-props="datePickerProps" />
+                            <FilterPanel t-props="filterPanelProps" />
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        </div>
+    </t>
+
+    <t t-name="web.CalendarController.controlButtons" owl="1">
+        <div class="o_calendar_buttons">
+            <span t-if="!env.isSmall" class="o_calendar_navigation_buttons me-1">
+                <button
+                    class="btn btn-primary o_calendar_button_prev"
+                    title="Previous"
+                    aria-label="Previous"
+                    t-on-click.stop="() => this.setDate('previous')"
+                >
+                    <i class="fa fa-arrow-left" />
+                </button>
+                <button
+                    class="btn btn-primary mx-1 o_calendar_button_today"
+                    t-on-click.stop="() => this.setDate('today')"
+                >
+                    Today
+                </button>
+                <button
+                    class="btn btn-primary o_calendar_button_next"
+                    title="Next"
+                    aria-label="Next"
+                    t-on-click.stop="() => this.setDate('next')"
+                >
+                    <i class="fa fa-arrow-right" />
+                </button>
+            </span>
+            <span class="o_calendar_scale_buttons">
+                <Dropdown class="'btn-group'" togglerClass="'btn btn-secondary scale_button_selection text-uppercase'" hotkey="'v'" showCaret="true">
+                    <t t-set-slot="toggler">
+                        <t t-esc="scaleLabels[model.scale]" />
+                    </t>
+                    <t t-foreach="model.scales" t-as="scale" t-key="scale">
+                        <DropdownItem
+                            class="`o_calendar_button_${scale} btn btn-secondary text-uppercase`"
+                            hotkey="scale[0]"
+                            onSelected="() => this.setScale(scale)"
+                        >
+                            <t t-esc="scaleLabels[scale]" />
+                        </DropdownItem>
+                    </t>
+                </Dropdown>
+            </span>
+            <button t-if="env.isSmall" class="o_cp_today_button btn btn-sm btn-link" t-on-click="() => this.setDate('today')">
+                <span class="fa-stack o_calendar_button_today">
+                    <i class="fa fa-calendar-o fa-stack-2x" role="img" aria-label="Today" title="Today" />
+                    <strong class="o_calendar_text fa-stack-1x" t-esc="getTodayDay()" />
+                </span>
+            </button>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/calendar/calendar_controller_mobile.scss b/addons/web/static/src/views/calendar/calendar_controller_mobile.scss
new file mode 100644
index 00000000000..7c767ba35e4
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_controller_mobile.scss
@@ -0,0 +1,48 @@
+@include media-breakpoint-down(md) {
+    .o_control_panel {
+        .o_calendar_button_today {
+            font-size: 0.7em;
+            line-height: 1.9em;
+            > .o_calendar_text {
+                margin-top: 3px;
+            }
+        }
+    }
+
+    .o_calendar_container {
+        flex-direction: column;
+
+        .o_other_calendar_panel {
+            padding: 8px 16px;
+
+            .fa-filter {
+                min-height: 1.59rem;
+                line-height: 1.59rem;
+            }
+
+            > .o_filter {
+                > span > span {
+                    font-size: x-small;
+                    &:nth-child(1) {
+                        font-size: xx-small;
+                    }
+                }
+                @for $i from 1 through length($o-colors-complete) {
+                    $color: nth($o-colors-complete, $i);
+
+                    .o_color_#{$i - 1} {
+                        color: $color;
+                    }
+                }
+            }
+        }
+
+        .o_calendar_sidebar_container {
+            flex-grow: 1;
+
+            > .o_calendar_sidebar {
+                width: auto;
+            }
+        }
+    }
+}
diff --git a/addons/web/static/src/views/calendar/calendar_model.js b/addons/web/static/src/views/calendar/calendar_model.js
new file mode 100644
index 00000000000..17a7f08f6d3
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_model.js
@@ -0,0 +1,821 @@
+/** @odoo-module **/
+
+import {
+    serializeDate,
+    serializeDateTime,
+    deserializeDate,
+    deserializeDateTime,
+} from "@web/core/l10n/dates";
+import { localization } from "@web/core/l10n/localization";
+import { _t } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { KeepLast } from "@web/core/utils/concurrency";
+import { Model } from "@web/views/model";
+
+export class CalendarModel extends Model {
+    setup(params, services) {
+        /** @protected */
+        this.user = services.user;
+
+        /** @protected */
+        this.keepLast = new KeepLast();
+
+        const formViewFromConfig = (this.env.config.views || []).find((view) => view[1] === "form");
+        const formViewIdFromConfig = formViewFromConfig ? formViewFromConfig[0] : false;
+        this.meta = {
+            ...params,
+            firstDayOfWeek: localization.weekStart,
+            formViewId: params.formViewId || formViewIdFromConfig,
+        };
+
+        this.data = {
+            filters: {},
+            filterSections: {},
+            hasCreateRight: null,
+            range: null,
+            records: {},
+            unusualDays: [],
+        };
+    }
+    async load(params = {}) {
+        Object.assign(this.meta, params);
+        if (!this.meta.date) {
+            this.meta.date =
+                params.context && params.context.initial_date
+                    ? deserializeDateTime(params.context.initial_date)
+                    : luxon.DateTime.local();
+        }
+        const data = { ...this.data };
+        await this.keepLast.add(this.updateData(data));
+        this.data = data;
+        this.notify();
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    get date() {
+        return this.meta.date;
+    }
+    get canCreate() {
+        return this.meta.canCreate && this.data.hasCreateRight;
+    }
+    get canDelete() {
+        return this.meta.canDelete;
+    }
+    get canEdit() {
+        return !this.meta.fields[this.meta.fieldMapping.date_start].readonly;
+    }
+    get eventLimit() {
+        return this.meta.eventLimit;
+    }
+    get exportedState() {
+        return this.meta;
+    }
+    get fieldMapping() {
+        return this.meta.fieldMapping;
+    }
+    get fields() {
+        return this.meta.fields;
+    }
+    get filterSections() {
+        return Object.values(this.data.filterSections);
+    }
+    get firstDayOfWeek() {
+        return this.meta.firstDayOfWeek;
+    }
+    get formViewId() {
+        return this.meta.formViewId;
+    }
+    get hasAllDaySlot() {
+        return (
+            this.meta.fieldMapping.all_day ||
+            this.meta.fields[this.meta.fieldMapping.date_start].type === "date"
+        );
+    }
+    get hasEditDialog() {
+        return this.meta.hasEditDialog;
+    }
+    get hasQuickCreate() {
+        return this.meta.hasQuickCreate;
+    }
+    get isDateHidden() {
+        return this.meta.isDateHidden;
+    }
+    get isTimeHidden() {
+        return this.meta.isTimeHidden;
+    }
+    get popoverFields() {
+        return this.meta.popoverFields;
+    }
+    get rangeEnd() {
+        return this.data.range.end;
+    }
+    get rangeStart() {
+        return this.data.range.start;
+    }
+    get records() {
+        return this.data.records;
+    }
+    get resModel() {
+        return this.meta.resModel;
+    }
+    get scale() {
+        return this.meta.scale;
+    }
+    get scales() {
+        return this.meta.scales;
+    }
+    get unusualDays() {
+        return this.data.unusualDays;
+    }
+
+    //--------------------------------------------------------------------------
+
+    async createFilter(fieldName, filterValue) {
+        const info = this.meta.filtersInfo[fieldName];
+        if (info && info.writeFieldName && info.writeResModel) {
+            const data = {
+                user_id: this.user.userId,
+                [info.writeFieldName]: filterValue,
+            };
+            if (info.filterFieldName) {
+                data[info.filterFieldName] = true;
+            }
+            await this.orm.create(info.writeResModel, [data]);
+            await this.load();
+        }
+    }
+    async createRecord(record) {
+        const rawRecord = this.buildRawRecord(record);
+        const context = this.makeContextDefaults(rawRecord);
+        await this.orm.create(this.meta.resModel, [rawRecord], { context });
+        await this.load();
+    }
+    async unlinkFilter(fieldName, recordId) {
+        const info = this.meta.filtersInfo[fieldName];
+        if (info && info.writeResModel) {
+            await this.orm.unlink(info.writeResModel, [recordId]);
+            await this.load();
+        }
+    }
+    async unlinkRecord(recordId) {
+        await this.orm.unlink(this.meta.resModel, [recordId]);
+        await this.load();
+    }
+    async updateFilters(fieldName, filters) {
+        const section = this.data.filterSections[fieldName];
+        if (section) {
+            for (const value in filters) {
+                const active = filters[value];
+                const filter = section.filters.find((filter) => filter.value == value);
+                if (filter) {
+                    filter.active = active;
+                    const info = this.meta.filtersInfo[fieldName];
+                    if (
+                        filter.recordId &&
+                        info &&
+                        info.writeFieldName &&
+                        info.writeResModel &&
+                        info.filterFieldName
+                    ) {
+                        const data = {
+                            [info.filterFieldName]: active,
+                        };
+                        await this.orm.write(info.writeResModel, [filter.recordId], data);
+                    }
+                }
+            }
+        }
+        await this.load();
+    }
+    async updateRecord(record, options = {}) {
+        const rawRecord = this.buildRawRecord(record, options);
+        delete rawRecord.name; // name is immutable.
+        await this.orm.write(this.meta.resModel, [record.id], rawRecord, {
+            context: { from_ui: true },
+        });
+        await this.load();
+    }
+
+    //--------------------------------------------------------------------------
+
+    buildRawRecord(partialRecord, options = {}) {
+        const data = {};
+        data[this.meta.fieldMapping.create_name_field || "name"] = partialRecord.title;
+
+        let start = partialRecord.start;
+        let end = partialRecord.end;
+
+        if (!end || !end.isValid) {
+            // Set end date if not existing
+            if (partialRecord.isAllDay) {
+                end = start;
+            } else {
+                // in week mode or day mode, convert allday event to event
+                end = start.plus({ hours: 2 });
+            }
+        }
+
+        const isDateEvent = this.fields[this.meta.fieldMapping.date_start].type === "date";
+        // An "all day" event without the "all_day" option is not considered
+        // as a 24h day. It's just a part of the day (by default: 7h-19h).
+        if (partialRecord.isAllDay) {
+            if (!this.hasAllDaySlot && !isDateEvent && !partialRecord.id) {
+                // default hours in the user's timezone
+                start = start.set({ hours: 7 });
+                end = end.set({ hours: 19 });
+            }
+        }
+
+        if (this.meta.fieldMapping.all_day) {
+            data[this.meta.fieldMapping.all_day] = partialRecord.isAllDay;
+        }
+
+        data[this.meta.fieldMapping.date_start] =
+            (partialRecord.isAllDay && this.hasAllDaySlot
+                ? "date"
+                : this.fields[this.meta.fieldMapping.date_start].type) === "date"
+                ? serializeDate(start)
+                : serializeDateTime(start);
+
+        if (this.meta.fieldMapping.date_stop) {
+            data[this.meta.fieldMapping.date_stop] =
+                (partialRecord.isAllDay && this.hasAllDaySlot
+                    ? "date"
+                    : this.fields[this.meta.fieldMapping.date_start].type) === "date"
+                    ? serializeDate(end)
+                    : serializeDateTime(end);
+        }
+
+        if (this.meta.fieldMapping.date_delay) {
+            if (this.meta.scale !== "month" || !options.moved) {
+                data[this.meta.fieldMapping.date_delay] = end.diff(start, "hours").hours;
+            }
+        }
+        return data;
+    }
+    makeContextDefaults(rawRecord) {
+        const { fieldMapping, scale } = this.meta;
+
+        const context = { ...this.meta.context };
+        const fieldNames = [
+            fieldMapping.create_name_field || "name",
+            fieldMapping.date_start,
+            fieldMapping.date_stop,
+            fieldMapping.date_delay,
+            fieldMapping.all_day || "allday",
+        ];
+        for (const fieldName of fieldNames) {
+            // fieldName could be in rawRecord but not defined
+            if (rawRecord[fieldName] !== undefined) {
+                context[`default_${fieldName}`] = rawRecord[fieldName];
+            }
+        }
+        if (["month", "year"].includes(scale)) {
+            context[`default_${fieldMapping.all_day || "allday"}`] = true;
+        }
+
+        return context;
+    }
+
+    //--------------------------------------------------------------------------
+    // Protected
+    //--------------------------------------------------------------------------
+
+    /**
+     * @protected
+     */
+    async updateData(data) {
+        if (data.hasCreateRight === null) {
+            data.hasCreateRight = await this.orm.call(this.meta.resModel, "check_access_rights", [
+                "create",
+                false,
+            ]);
+        }
+        data.range = this.computeRange();
+        if (this.meta.showUnusualDays) {
+            data.unusualDays = await this.loadUnusualDays(data);
+        }
+
+        const { sections, dynamicFiltersInfo } = await this.loadFilters(data);
+
+        // Load records and dynamic filters only with fresh filters
+        data.filterSections = sections;
+        data.records = await this.loadRecords(data);
+        const dynamicSections = await this.loadDynamicFilters(data, dynamicFiltersInfo);
+
+        // Apply newly computed filter sections
+        Object.assign(data.filterSections, dynamicSections);
+
+        // Remove records that don't match dynamic filters
+        for (const [recordId, record] of Object.entries(data.records)) {
+            for (const [fieldName, filterInfo] of Object.entries(dynamicSections)) {
+                for (const filter of filterInfo.filters) {
+                    const rawValue = record.rawRecord[fieldName];
+                    const value = Array.isArray(rawValue) ? rawValue[0] : rawValue;
+                    if (filter.value === value && !filter.active) {
+                        delete data.records[recordId];
+                    }
+                }
+            }
+        }
+    }
+
+    //--------------------------------------------------------------------------
+
+    /**
+     * @protected
+     */
+    computeRange() {
+        const { scale, date, firstDayOfWeek } = this.meta;
+        let start = date;
+        let end = date;
+
+        if (scale !== "week") {
+            // startOf("week") does not depend on locale and will always give the
+            // "Monday" of the week...
+            start = start.startOf(scale);
+            end = end.endOf(scale);
+        }
+
+        if (["week", "month"].includes(scale)) {
+            const weekday = start.weekday < firstDayOfWeek ? firstDayOfWeek - 7 : firstDayOfWeek;
+            start = start.set({ weekday });
+            end = start.plus({ weeks: scale === "week" ? 1 : 6, days: -1 });
+        }
+
+        start = start.startOf("day");
+        end = end.endOf("day");
+
+        return { start, end };
+    }
+
+    //--------------------------------------------------------------------------
+
+    /**
+     * @protected
+     */
+    computeDomain(data) {
+        return [
+            ...this.meta.domain,
+            ...this.computeRangeDomain(data),
+            ...this.computeFiltersDomain(data),
+        ];
+    }
+    /**
+     * @protected
+     */
+    computeFiltersDomain(data) {
+        // List authorized values for every field
+        // fields with an active "all" filter are skipped
+        const authorizedValues = {};
+        const avoidValues = {};
+
+        for (const [fieldName, filterSection] of Object.entries(data.filterSections)) {
+            // Skip "all" filters because they do not affect the domain
+            const filterAll = filterSection.filters.find((f) => f.type === "all");
+            if (!(filterAll && filterAll.active)) {
+                const filterSectionInfo = this.meta.filtersInfo[fieldName];
+
+                // Loop over subfilters to complete authorizedValues
+                for (const filter of filterSection.filters) {
+                    if (filterSectionInfo.writeResModel) {
+                        if (!authorizedValues[fieldName]) {
+                            authorizedValues[fieldName] = [];
+                        }
+                        if (filter.active) {
+                            authorizedValues[fieldName].push(filter.value);
+                        }
+                    } else {
+                        if (!filter.active) {
+                            if (!avoidValues[fieldName]) {
+                                avoidValues[fieldName] = [];
+                            }
+                            avoidValues[fieldName].push(filter.value);
+                        }
+                    }
+                }
+            }
+        }
+
+        // Compute the domain
+        const domain = [];
+        for (const field in authorizedValues) {
+            domain.push([field, "in", authorizedValues[field]]);
+        }
+        for (const field in avoidValues) {
+            if (avoidValues[field].length > 0) {
+                domain.push([field, "not in", avoidValues[field]]);
+            }
+        }
+        return domain;
+    }
+    /**
+     * @protected
+     */
+    computeRangeDomain(data) {
+        const { fieldMapping } = this.meta;
+        const formattedEnd = serializeDateTime(data.range.end);
+        const formattedStart = serializeDateTime(data.range.start);
+
+        const domain = [[fieldMapping.date_start, "<=", formattedEnd]];
+        if (fieldMapping.date_stop) {
+            domain.push([fieldMapping.date_stop, ">=", formattedStart]);
+        } else if (!fieldMapping.date_delay) {
+            domain.push([fieldMapping.date_start, ">=", formattedStart]);
+        }
+        return domain;
+    }
+
+    //--------------------------------------------------------------------------
+
+    /**
+     * @protected
+     */
+    fetchUnusualDays(data) {
+        return this.orm.call(this.meta.resModel, "get_unusual_days", [
+            serializeDateTime(data.range.start),
+            serializeDateTime(data.range.end),
+        ]);
+    }
+    /**
+     * @protected
+     */
+    async loadUnusualDays(data) {
+        const unusualDays = await this.fetchUnusualDays(data);
+        return Object.entries(unusualDays)
+            .filter((entry) => entry[1])
+            .map((entry) => entry[0]);
+    }
+
+    //--------------------------------------------------------------------------
+
+    /**
+     * @protected
+     */
+    fetchRecords(data) {
+        const { fieldNames, resModel } = this.meta;
+        return this.orm.searchRead(resModel, this.computeDomain(data), fieldNames);
+    }
+    /**
+     * @protected
+     */
+    async loadRecords(data) {
+        const rawRecords = await this.fetchRecords(data);
+        const records = {};
+        for (const rawRecord of rawRecords) {
+            records[rawRecord.id] = this.normalizeRecord(rawRecord);
+        }
+        return records;
+    }
+    /**
+     * @protected
+     * @param {Record<string, any>} rawRecord
+     */
+    normalizeRecord(rawRecord) {
+        const { fields, fieldMapping, filtersInfo, isTimeHidden, scale } = this.meta;
+
+        const startType = fields[fieldMapping.date_start].type;
+        let start =
+            startType === "date"
+                ? deserializeDate(rawRecord[fieldMapping.date_start])
+                : deserializeDateTime(rawRecord[fieldMapping.date_start]);
+
+        let end = start;
+        let endType = startType;
+        if (fieldMapping.date_stop) {
+            endType = fields[fieldMapping.date_stop].type;
+            end =
+                endType === "date"
+                    ? deserializeDate(rawRecord[fieldMapping.date_stop])
+                    : deserializeDateTime(rawRecord[fieldMapping.date_stop]);
+        }
+
+        const duration = rawRecord[fieldMapping.date_delay] || 1;
+
+        const isAllDay =
+            startType === "date" ||
+            (fieldMapping.all_day && rawRecord[fieldMapping.all_day]) ||
+            false;
+
+        if (isAllDay) {
+            start = start.startOf("day");
+            end = end.startOf("day");
+        }
+        if (!fieldMapping.date_stop && duration) {
+            end = start.plus({ hours: duration });
+        }
+
+        const showTime =
+            !(fieldMapping.all_day && rawRecord[fieldMapping.all_day]) &&
+            scale === "month" &&
+            startType !== "date" &&
+            start.day === end.day;
+
+        let colorValue = rawRecord[fieldMapping.color];
+        let colorIndex = Array.isArray(colorValue) ? colorValue[0] : colorValue;
+        const filterInfo = Object.values(filtersInfo).find((info) => info.colorFieldName);
+        if (filterInfo && filterInfo.colorFieldName) {
+            colorValue = rawRecord[filterInfo.colorFieldName];
+            colorIndex = Array.isArray(colorValue) ? colorValue[0] : colorValue;
+        }
+
+        const title = rawRecord[fieldMapping.create_name_field || "display_name"];
+
+        return {
+            id: rawRecord.id,
+            title,
+            isAllDay,
+            start,
+            startType,
+            end,
+            endType,
+            duration,
+            colorIndex,
+            isHatched: rawRecord["is_hatched"] || false,
+            isStriked: rawRecord["is_striked"] || false,
+            isTimeHidden: isTimeHidden || !showTime,
+            rawRecord,
+        };
+    }
+
+    //--------------------------------------------------------------------------
+
+    /**
+     * @protected
+     */
+    loadFilterColor(filterInfo, fieldName, rawRecord, color) {
+        const { fields, fieldMapping } = this.meta;
+        const field = fields[fieldName];
+        const colorField = fields[fieldMapping.color];
+        const relatedField = `${fieldName}.${filterInfo.colorFieldName}`;
+        let rawValue = null;
+        if (
+            !!colorField &&
+            (field.relation === colorField.relation || colorField.related === relatedField)
+        ) {
+            if (rawRecord[fieldName]) {
+                // The color field is a related field of the current field.
+                rawValue = color ? color[fieldMapping.color] : rawRecord[fieldName][0];
+            } else {
+                // Re use the color of the record
+                rawValue = rawRecord[fieldMapping.color];
+            }
+        }
+        const value = Array.isArray(rawValue) ? rawValue[0] : rawValue;
+        return value || null;
+    }
+    /**
+     * @protected
+     */
+    fetchFilters(resModel, fieldNames) {
+        return this.orm.searchRead(resModel, [["user_id", "=", this.user.userId]], fieldNames);
+    }
+    /**
+     * @protected
+     */
+    async loadFilters(data) {
+        const previousSections = data.filterSections;
+        const sections = {};
+        const dynamicFiltersInfo = {};
+        for (const [fieldName, filterInfo] of Object.entries(this.meta.filtersInfo)) {
+            const previousSection = previousSections[fieldName];
+            if (filterInfo.writeResModel) {
+                sections[fieldName] = await this.loadFilterSection(
+                    fieldName,
+                    filterInfo,
+                    previousSection
+                );
+            } else {
+                dynamicFiltersInfo[fieldName] = { filterInfo, previousSection };
+            }
+        }
+        return { sections, dynamicFiltersInfo };
+    }
+    /**
+     * @protected
+     */
+    async loadFilterSection(fieldName, filterInfo, previousSection) {
+        const fields = [filterInfo.writeFieldName, filterInfo.filterFieldName].filter(Boolean);
+        const rawRecords = await this.fetchFilters(filterInfo.writeResModel, fields);
+        const previousFilters = previousSection ? previousSection.filters : [];
+        const filters = rawRecords.map((r) => {
+            const previousRecordFilter = previousFilters.find(
+                (f) => f.type === "record" && f.recordId === r.id
+            );
+            return this.makeFilterRecord(
+                filterInfo,
+                previousRecordFilter,
+                r,
+                filterInfo.writeFieldName,
+                filterInfo.filterFieldName
+            );
+        });
+
+        const field = this.meta.fields[fieldName];
+        const isUserOrPartner = ["res.users", "res.partner"].includes(field.relation);
+        if (isUserOrPartner) {
+            const previousUserFilter = previousFilters.find((f) => f.type === "user");
+            filters.push(
+                this.makeFilterUser(filterInfo, previousUserFilter, fieldName, rawRecords)
+            );
+        }
+        const previousAllFilter = previousFilters.find((f) => f.type === "all");
+        filters.push(this.makeFilterAll(previousAllFilter, isUserOrPartner));
+
+        return {
+            label: filterInfo.label,
+            fieldName,
+            filters,
+            avatar: {
+                field: filterInfo.avatarFieldName,
+                model: filterInfo.resModel,
+            },
+            hasAvatar: !!filterInfo.avatarFieldName,
+            write: {
+                field: filterInfo.writeFieldName,
+                model: filterInfo.writeResModel,
+            },
+            canCollapse: filters.length > 2,
+            canAddFilter: !!filterInfo.writeResModel,
+        };
+    }
+    /**
+     * @protected
+     */
+    async loadDynamicFilters(data, filtersInfo) {
+        const fieldNames = Object.keys(filtersInfo);
+        if (this.meta.fieldMapping.color) {
+            fieldNames.push(this.meta.fieldMapping.color);
+        }
+
+        const sections = {};
+        for (const [fieldName, { filterInfo, previousSection }] of Object.entries(filtersInfo)) {
+            sections[fieldName] = await this.loadDynamicFilterSection(
+                data,
+                fieldName,
+                filterInfo,
+                previousSection
+            );
+        }
+
+        return sections;
+    }
+    /**
+     * @protected
+     */
+    async loadDynamicFilterSection(data, fieldName, filterInfo, previousSection) {
+        const { fields, fieldMapping } = this.meta;
+        const field = fields[fieldName];
+        const previousFilters = previousSection ? previousSection.filters : [];
+
+        const treatedValues = new Map();
+        const relatedIds = new Set();
+
+        for (const record of Object.values(data.records)) {
+            if (record.rawRecord[fieldName]) {
+                relatedIds.add(record.rawRecord[fieldName][0]);
+            }
+
+            const rawValues = ["many2many", "one2many"].includes(field.type)
+                ? record.rawRecord[fieldName]
+                : [record.rawRecord[fieldName]];
+
+            for (const rawValue of rawValues) {
+                const value = Array.isArray(rawValue) ? rawValue[0] : rawValue;
+                if (!treatedValues.has(value)) {
+                    treatedValues.set(value, { record, rawValue });
+                }
+            }
+        }
+
+        // TODO: refactor this and merge in with loadFilterColor
+        //       in order to simplify makeFilterDynamic
+        const rawColors =
+            filterInfo.colorFieldName && relatedIds.size
+                ? await this.orm.searchRead(
+                      fields[fieldName].relation,
+                      [["id", "in", Array.from(relatedIds)]],
+                      [fieldMapping.color]
+                  )
+                : [];
+
+        const filters = Array.from(treatedValues).map(([value, { record, rawValue }]) => {
+            const color = rawColors.find((r) => r.id === value);
+            const previousDynamicFilter = previousFilters.find(
+                (f) => f.type === "dynamic" && f.value === value
+            );
+            return this.makeFilterDynamic(
+                filterInfo,
+                previousDynamicFilter,
+                rawValue,
+                fieldName,
+                record,
+                color
+            );
+        });
+
+        return {
+            label: filterInfo.label,
+            fieldName,
+            filters,
+            avatar: {
+                field: filterInfo.avatarFieldName,
+                model: filterInfo.resModel,
+            },
+            hasAvatar: !!filterInfo.avatarFieldName,
+            write: {
+                field: filterInfo.writeFieldName,
+                model: filterInfo.writeResModel,
+            },
+            canCollapse: filters.length > 2,
+            canAddFilter: !!filterInfo.writeResModel,
+        };
+    }
+    /**
+     * @protected
+     */
+    makeFilterDynamic(filterInfo, previousFilter, rawValue, fieldName, record, color) {
+        const field = this.meta.fields[fieldName];
+        const formatter = registry.category("formatters").get(field.type);
+        const value = Array.isArray(rawValue) ? rawValue[0] : rawValue;
+        return {
+            type: "dynamic",
+            recordId: null,
+            value,
+            label: formatter(rawValue) || _t("Undefined"),
+            active: previousFilter ? previousFilter.active : true,
+            canRemove: false,
+            colorIndex: this.loadFilterColor(filterInfo, fieldName, record.rawRecord, color),
+            hasAvatar: !!value,
+        };
+    }
+    /**
+     * @protected
+     */
+    makeFilterRecord(filterInfo, previousFilter, record, fieldName, filterFieldName) {
+        const raw = record[fieldName];
+        const value = Array.isArray(raw) ? raw[0] : raw;
+        const field = this.meta.fields[fieldName];
+        const isX2Many = ["many2many", "one2many"].includes(field.type);
+        const formatter = registry.category("formatters").get(isX2Many ? "many2one" : field.type);
+        let active = false;
+        if (previousFilter) {
+            active = previousFilter.active;
+        } else if (filterFieldName) {
+            active = record[filterFieldName];
+        }
+        return {
+            type: "record",
+            recordId: record.id,
+            value,
+            label: formatter(raw),
+            active,
+            canRemove: true,
+            colorIndex: this.loadFilterColor(filterInfo, fieldName, record),
+            hasAvatar: !!value,
+        };
+    }
+    /**
+     * @protected
+     */
+    makeFilterUser(filterInfo, previousFilter, fieldName, rawRecords) {
+        const field = this.meta.fields[fieldName];
+        const userFieldName = field.relation === "res.partner" ? "partnerId" : "userId";
+        const value = this.user[userFieldName];
+        return {
+            type: "user",
+            recordId: null,
+            value,
+            label: this.user.name,
+            active: previousFilter ? previousFilter.active : true,
+            canRemove: false,
+            colorIndex: this.loadFilterColor(
+                filterInfo,
+                fieldName,
+                rawRecords.find((r) => r.id === value) || {}
+            ),
+            hasAvatar: !!value,
+        };
+    }
+    /**
+     * @protected
+     */
+    makeFilterAll(previousAllFilter, isUserOrPartner) {
+        return {
+            type: "all",
+            recordId: null,
+            value: "all",
+            label: isUserOrPartner
+                ? this.env._t("Everybody's calendars")
+                : this.env._t("Everything"),
+            active: previousAllFilter ? previousAllFilter.active : false,
+            canRemove: false,
+            colorIndex: null,
+            hasAvatar: false,
+        };
+    }
+}
+CalendarModel.services = ["user"];
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.js b/addons/web/static/src/views/calendar/calendar_renderer.js
new file mode 100644
index 00000000000..f536a5b053a
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_renderer.js
@@ -0,0 +1,37 @@
+/** @odoo-module **/
+
+import { ActionSwiper } from "@web/core/action_swiper/action_swiper";
+import { CalendarCommonRenderer } from "./calendar_common/calendar_common_renderer";
+import { CalendarYearRenderer } from "./calendar_year/calendar_year_renderer";
+
+const { Component } = owl;
+
+export class CalendarRenderer extends Component {
+    get calendarComponent() {
+        return this.constructor.components[this.props.model.scale];
+    }
+    get calendarKey() {
+        return `${this.props.model.scale}_${this.props.model.date.valueOf()}`;
+    }
+    get actionSwiperProps() {
+        return {
+            onLeftSwipe: this.env.isSmall
+                ? { action: () => this.props.setDate("next") }
+                : undefined,
+            onRightSwipe: this.env.isSmall
+                ? { action: () => this.props.setDate("previous") }
+                : undefined,
+            animationOnMove: false,
+            animationType: "forwards",
+            swipeDistanceRatio: 6,
+        };
+    }
+}
+CalendarRenderer.components = {
+    day: CalendarCommonRenderer,
+    week: CalendarCommonRenderer,
+    month: CalendarCommonRenderer,
+    year: CalendarYearRenderer,
+    ActionSwiper,
+};
+CalendarRenderer.template = "web.CalendarRenderer";
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
new file mode 100644
index 00000000000..86406c5cc17
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -0,0 +1,697 @@
+.o_calendar_renderer {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    background-color: map-get($grays, "100");
+    background: linear-gradient(-45deg, map-get($grays, "100"), white);
+
+    .fc-event {
+        margin: 0 1px;
+        border-style: solid;
+        border-width: 0 0 0 3px;
+        box-sizing: border-box;
+        overflow: hidden;
+        background: none;
+        font-size: 11px;
+        line-height: 1;
+
+        &:not([href]):not([tabindex]) {
+            color: $body-color;
+        }
+
+        &.fc-dragging.fc-day-grid-event.dayGridMonth .fc-content {
+            @include text-truncate();
+            margin: 4px 4px 3px;
+        }
+
+        .fc-bg {
+            background-color: mix(
+                map-get($theme-colors, "primary"),
+                white
+            ); // Used for placeholder events only (on creation)
+            width: 101%;
+            height: 101%; // Compensate border
+            opacity: 0.7;
+            transition: opacity 0.2s;
+        }
+
+        .fc-content {
+            white-space: normal;
+            margin: 0.25rem;
+            font-size: 1.1em;
+            font-weight: 500;
+        }
+
+        // Try to show one full lien for short event
+        &.fc-short .fc-content {
+            margin-top: 1px;
+        }
+
+        &.o_cw_custom_highlight {
+            z-index: 10 !important;
+
+            .fc-bg {
+                opacity: 0.95;
+            }
+        }
+    }
+
+    .o_calendar_widget {
+        height: 100%;
+
+        > .fc-view-container {
+            height: 100%;
+        }
+
+        // ===  Adapt calendar table borders ===
+        // =====================================
+
+        td {
+            border-color: $border-color;
+        }
+
+        .fc-time-grid .fc-slats .fc-minor td {
+            border-top-color: map-get($grays, "400");
+        }
+
+        .fc-widget-content {
+            border-left-color: transparent;
+        }
+
+        .fc-widget-header {
+            border-color: transparent;
+            border-bottom-color: $border-color;
+            padding: 3px 0 5px;
+        }
+
+        hr.fc-widget-header {
+            padding: 1px;
+            border: 0;
+            background: map-get($grays, "400");
+        }
+
+        .fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
+            padding: 0.5em;
+        }
+
+        .fc-event-container {
+            color: white;
+        }
+
+        .fc-more-popover {
+            .fc-header {
+                padding-left: 1rem;
+                .fc-title {
+                    font-weight: bold;
+                }
+            }
+
+            .fc-body {
+                max-height: 500px;
+                overflow: auto;
+            }
+        }
+
+        .o_calendar_disabled {
+            background-color: $gray-200;
+        }
+
+        // ======  Specific agenda types ======
+        // ====================================
+
+        // ====== Both Day and Week agenda
+        .fc-timeGridDay-view,
+        .fc-timeGridWeek-view {
+            .fc-axis {
+                padding-left: $o-horizontal-padding;
+            }
+
+            .fc-widget-header.fc-today {
+                border-radius: 25px;
+                background: $o-brand-odoo;
+                color: white;
+            }
+
+            // Reinfornce default border color
+            tbody td {
+                border-top-color: map-get($grays, "400");
+            }
+
+            // Remove dotted borders (half-hours)
+            .fc-time-grid .fc-slats .fc-minor td {
+                border-top-style: none;
+            }
+
+            // Align labels and timelines
+            .fc-axis.fc-time {
+                border-top-color: transparent;
+
+                span {
+                    max-width: 45px;
+                    margin-top: -19px;
+                    position: relative;
+                    display: block;
+                }
+            }
+
+            // Add a small gap on top to show the first time label (0:00)
+            .fc-scroller .fc-time-grid > .fc-slats,
+            .fc-scroller .fc-time-grid > .fc-bg {
+                padding-top: 15px;
+            }
+
+            // Row containing "all day" events
+            div.fc-day-grid {
+                background-color: $o-view-background-color;
+                box-shadow: 0 6px 12px -6px rgba(black, 0.16);
+                border-left-color: rgba($o-brand-odoo, 0.3);
+                border-right-color: rgba($o-brand-odoo, 0.3);
+
+                + hr.fc-widget-header {
+                    padding: 1px 0 0;
+                    background: map-get($grays, "300");
+                }
+
+                .fc-content-skeleton tr:not(:first-child) .fc-h-event {
+                    margin-top: 3px;
+                }
+            }
+
+            // Create a 'preudo-border' for the first row. The actual border
+            // it's hidden because of border-collapse settings.
+            .fc-slats tr:first-child td.fc-widget-content:last-child {
+                box-shadow: inset 0 1px 0 map-get($grays, "400");
+            }
+
+            .fc-day.fc-widget-content.fc-today:not(.o_calendar_disabled) {
+                border-left-color: rgba($o-brand-odoo, 0.3);
+                border-right-color: rgba($o-brand-odoo, 0.3);
+                background: $o-view-background-color;
+            }
+
+            .fc-event {
+                // Prevent events with similar color to visually overlap each other
+                box-shadow: 0 0 0 1px white;
+
+                &.fc-event:not(.fc-h-event) {
+                    border-width: 3px 0 0;
+
+                    &.fc-not-start {
+                        border-width: 0 0 3px;
+
+                        &.fc-not-end {
+                            border-width: 0;
+                        }
+                    }
+                }
+            }
+
+            // Reset position to keep the "nowIndicator" line visible
+            .fc-content-col {
+                position: initial;
+            }
+        }
+
+        // ====== Day only
+        .fc-timeGridDay-view .fc-event {
+            padding: 10px;
+            font-size: 14px;
+
+            // Try to avoid showing no title for short event
+            &.fc-short {
+                padding-top: 0;
+                padding-bottom: 0;
+            }
+
+            .fc-content {
+                margin-top: 1px !important;
+            }
+        }
+
+        // ====== Week only
+        .fc-timeGridWeek-view {
+            .fc-now-indicator {
+                left: $o-horizontal-padding;
+            }
+
+            // Expand tiny events on hover/select
+            .fc-event:not(.fc-h-event).o_cw_custom_highlight,
+            .fc-event:not(.fc-h-event).o_cw_custom_hover {
+                transition: margin 0.1s 0.3s, left 0.1s 0.3s, right 0.1s 0.3s;
+                margin: 0 !important;
+                right: 1px !important;
+                left: 1px !important;
+            }
+        }
+
+        // ====== Month only
+        .fc-dayGridMonth-view {
+            padding-left: $o-horizontal-padding;
+
+            .fc-event {
+                border-radius: 25px;
+            }
+
+            .fc-widget-header {
+                padding: 3px 0;
+            }
+
+            .fc-week-number {
+                background: none;
+                font-size: 1.2rem;
+                padding: 0.1rem 0.3rem 0.1rem 0 !important;
+                line-height: 1;
+            }
+            .fc-day-top {
+                text-align: center;
+                padding-top: 3px;
+                padding-bottom: 3px;
+                .fc-day-number {
+                    float: none !important;
+                }
+            }
+
+            .fc-day-number {
+                margin: 5px;
+                padding: 0.1rem 0.3rem 0.1rem 0;
+                font-size: 1.2rem;
+                color: map-get($grays, "900");
+                font-weight: 400;
+                line-height: 1;
+                float: none !important;
+            }
+
+            .fc-day-top.fc-other-month {
+                opacity: 0.8;
+
+                .fc-day-number {
+                    color: map-get($grays, "500");
+                }
+            }
+
+            td:last-child {
+                border-right-color: transparent;
+            }
+
+            .fc-bg .fc-today {
+                border-color: map-get($grays, "300");
+            }
+            .fc-bg .fc-today:not(.o_calendar_disabled) {
+                background: $o-view-background-color;
+            }
+
+            .fc-content-skeleton .fc-today .fc-day-number {
+                margin-top: 3px;
+                padding: 0.4em 0.4em 0.35em;
+                border-radius: 100%;
+                min-width: 1.1em;
+                background: $o-cw-color-today-accent;
+                text-align: center;
+                color: white;
+                font-size: 1.1rem;
+            }
+
+            .fc-more-cell {
+                > div,
+                .fc-more {
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+
+            .fc-event {
+                margin: 0 3px 2px;
+
+                .fc-content {
+                    display: flex;
+                    justify-content: start;
+                    flex-direction: row;
+                    margin: 4px 4px 3px;
+                }
+
+                .fc-time:not(:empty) {
+                    /*rtl:ignore*/
+                    padding-right: 0.5em;
+                }
+
+                .o_event_title {
+                    @include text-truncate();
+                }
+
+                &.o_cw_nobg {
+                    &.o_cw_custom_hover,
+                    &.o_cw_custom_highlight,
+                    &:hover {
+                        .fc-bg {
+                            visibility: visible;
+                        }
+                    }
+                }
+
+                &.fc-not-start {
+                    border-right-width: 3px;
+
+                    .fc-content {
+                        padding-left: 6px;
+                    }
+                }
+
+                &.fc-not-end {
+                    margin-right: 0;
+
+                    .fc-content {
+                        padding-right: 6px;
+                    }
+                }
+            }
+        }
+        // ====== Year only
+        .fc-dayGridYear-view {
+            border: none;
+            height: 100%;
+            padding-left: $o-horizontal-padding;
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+            overflow-y: auto;
+
+            @include media-breakpoint-down(md) {
+                padding-right: 5px;
+                padding-left: 5px;
+            }
+
+            @for $i from 1 through length($o-colors-complete) {
+                $color: nth($o-colors-complete, $i);
+
+                .fc-bgevent.o_calendar_striked {
+                    background: linear-gradient(transparent 0 40%, $color 40% 60%, transparent 60% 100%);
+                }
+
+                .o_cw_popover_link.o_calendar_color_#{$i - 1} {
+                    border: solid 2px;
+                    padding-left: 5px;
+                    border-color: $color;
+                    margin-top: 2px;
+                    background: $color;
+                    color: black;
+
+                    &.o_attendee_status_tentative {
+                        color: color-contrast($color);
+                        background: repeating-linear-gradient(
+                            45deg,
+                            $color,
+                            $color 10px,
+                            rgba($color, 0.7) 10px,
+                            rgba($color, 0.7) 20px
+                        ) !important;
+                    }
+
+                    &.o_attendee_status_needsAction {
+                        background-color: rgba(white, 0.9) !important;
+                    }
+
+                    &.o_attendee_status_declined {
+                        text-decoration: line-through;
+                        background-color: rgba(white, 0.9) !important;
+                    }
+                }
+            }
+
+            > table {
+                height: 100%;
+            }
+
+            table,
+            tr,
+            th,
+            td {
+                border: none;
+            }
+
+            &.fc-readonly-year-view {
+                .fc-day-top:not(.fc-has-event) {
+                    cursor: default !important;
+                }
+            }
+
+            &:not(.fc-readonly-year-view) {
+                .fc-day-top:hover > .fc-day-number {
+                    font-weight: bold;
+                    border-radius: 100%;
+                    text-align: center;
+                    background-color: rgba(#87c0d1, 0.5);
+                    color: map-get($grays, "900");
+                }
+            }
+
+            > .fc-month-container {
+                width: 25%;
+                min-width: 25rem;
+                box-sizing: border-box;
+
+                @include media-breakpoint-down(md) {
+                    width: 50%;
+                    min-width: 12rem;
+                }
+
+                > .fc-month {
+                    width: 21rem;
+                    margin: auto;
+
+                    @include media-breakpoint-down(md) {
+                        width: 95%;
+                    }
+
+                    > .fc-toolbar.fc-header-toolbar {
+                        padding-top: 10px;
+                        margin-bottom: 4px;
+                        cursor: default;
+
+                        h2 {
+                            font-size: 1.2rem;
+                            color: map-get($grays, "600");
+                        }
+                    }
+
+                    .fc-widget-header {
+                        padding: 2px 0;
+                        cursor: default;
+                    }
+
+                    .fc-dayGridMonth-view {
+                        padding-left: unset;
+
+                        .fc-has-event {
+                            background-color: #b4dff5;
+                        }
+                    }
+
+                    .fc-week.fc-row {
+                        min-height: 2rem;
+                    }
+
+                    .fc-disabled-day {
+                        background-color: unset;
+                    }
+
+                    .fc-day-top {
+                        text-align: center;
+                        padding: 0.4vh;
+                        cursor: pointer;
+
+                        > .fc-day-number {
+                            display: block;
+                            float: unset;
+                            line-height: unset;
+                            margin: auto;
+                            padding: 0.1rem 0;
+                            font-size: calc(11px + 0.2vh);
+                        }
+
+                        &.fc-today > .fc-day-number {
+                            font-weight: bold;
+                        }
+                    }
+                }
+            }
+        }
+        // ====== RTL layout(s)
+        &.fc-rtl {
+            .fc-timeGrid-view .fc-event {
+                border-width: 0 3px 0 0;
+            }
+
+            .fc-dayGridMonth-view .fc-event {
+                border-width: 0 3px 0 0;
+
+                &.fc-not-start {
+                    margin: 0 0 1px 5px;
+                    border-width: 0 0 0 3px;
+
+                    .fc-content {
+                        padding-right: 6px;
+                        padding-left: 0;
+                    }
+                }
+
+                &.fc-not-end {
+                    margin: 0 5px 1px 0;
+
+                    .fc-content {
+                        padding-left: 6px;
+                        padding-right: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Generated with http://phrogz.net/css/distinct-colors.html
+// Do not modify the first 12 colors of this list or it will break the colors in the Time Off Calendar
+$o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814968, #eb7e7f, #2c8397, #475577, #d6145f,
+    #30c381, #9365b8, #ff1e00, #bf9600, #0003b3, #ff006a, #cc3300, #ffea00, #00cc85, #007ab3, #6900cc, #ff0048, #c2cc00,
+    #00ffc8, #008cff, #bf0036, #b24400, #d0ff00, #00ffea, #0062b3, #ea00ff, #ff0026, #8bcc00, #00bfaf, #006aff, #af00bf,
+    #bf001d, #bf6300, #8cff00, #00f2ff, #004ab3, #ff00d0, #ffa600, #3acc00, #00b6bf, #0048ff, #bf7c00, #04ff00, #00d0ff,
+    #0036bf, #ff008c, #00bf49, #0092b3, #0004ff, #b20062, #649173 !default;
+
+// ===============  Generate color classes ===============
+@for $i from 1 through length($o-filter_colors) {
+    $color: nth($o-filter_colors, $i);
+
+    .o_calendar_renderer .fc-view {
+        .o_calendar_hatched_#{$i - 1} {
+            background: repeating-linear-gradient(
+                45deg,
+                $color,
+                $color 10px,
+                rgba($color, 0.4) 10px,
+                rgba($color, 0.4) 20px
+            ) !important;
+
+            .fc-bg {
+                background: repeating-linear-gradient(
+                    45deg,
+                    $color,
+                    $color 10px,
+                    rgba($color, 0.5) 10px,
+                    rgba($color, 0.5) 20px
+                );
+            }
+        }
+        .o_calendar_striked_#{$i - 1} {
+            background: linear-gradient(transparent 0 45%, $color 45% 55%, transparent 55% 100%);
+
+            .fc-bg {
+                background: none;
+            }
+        }
+        .fc-bgevent.o_calendar_color_#{$i - 1} {
+            border-color: $color;
+            background-color: $color;
+            opacity: 0.5;
+        }
+        .fc-event.o_calendar_striked_#{$i - 1} {
+            border: none;
+        }
+        .fc-event.o_calendar_color_#{$i - 1} {
+            border-color: $color;
+            color: darken($color, 45%);
+            opacity: 1;
+
+            &.o_event_highlight {
+                opacity: 1;
+
+                .fc-content {
+                    font-weight: bold;
+                }
+            }
+
+            &:not(.o_calendar_hatched):not(.o_calendar_striked) {
+                background: scale-color($color, $lightness: 50%);
+                .fc-bg {
+                    background: scale-color($color, $lightness: 50%);
+                }
+            }
+
+            &.o_cw_custom_hover,
+            &.o_cw_custom_highlight {
+                box-shadow: 0 12px 12px -5px rgba($color, 0.3);
+                color: color-contrast($color);
+                z-index: 10 !important;
+                opacity: 1;
+                right: 1px !important;
+                left: 1px !important;
+                margin-right: 0 !important;
+            }
+
+            &.o_attendee_status_needsAction,
+            &.o_attendee_status_tentative,
+            &.o_attendee_status_declined,
+            &.o_attendee_status_alone {
+                border-width: 2px 2px 2px !important;
+
+                &.o_cw_custom_highlight {
+                    background-color: $color;
+                }
+            }
+
+            &.o_attendee_status_tentative {
+                color: color-contrast($color);
+                .fc-bg {
+                    background: repeating-linear-gradient(
+                        45deg,
+                        $color,
+                        $color 10px,
+                        rgba(white, 0.4) 10px,
+                        rgba(white, 0.4) 20px
+                    ) !important;
+                }
+            }
+
+            &.o_attendee_status_alone,
+            &.o_attendee_status_needsAction {
+                background-color: rgba(white, 0.9) !important;
+                color: black;
+                .fc-bg {
+                    background-color: rgba(white, 0.9) !important;
+                }
+            }
+
+            &.o_attendee_status_declined {
+                text-decoration: line-through;
+                background-color: rgba(white, 0.9) !important;
+                color: black;
+                .fc-bg {
+                    background-color: rgba(white, 0.9) !important;
+                }
+            }
+        }
+    }
+
+    .o_cw_filter_color_#{$i - 1} {
+        .o_cw_filter_input_bg {
+            border-color: $color;
+            background: $color;
+            color: color-contrast($color);
+        }
+    }
+
+    .o_cw_popover.o_calendar_color_#{$i - 1} {
+        $color-subdle: mix(white, $color, 90%);
+
+        .card-header,
+        .card-header .popover-header {
+            background-color: $color-subdle;
+            color: color-contrast($color-subdle);
+        }
+
+        .card-header {
+            padding-left: 2px;
+            border-color: mix($card-border-color, mix(white, $color));
+        }
+    }
+}
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.xml b/addons/web/static/src/views/calendar/calendar_renderer.xml
new file mode 100644
index 00000000000..727b057fffd
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_renderer.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CalendarRenderer" owl="1">
+        <div class="o_calendar_renderer">
+            <ActionSwiper t-props="actionSwiperProps">
+                <t
+                    t-component="calendarComponent"
+                    t-props="props"
+                    t-key="calendarKey"
+                />
+            </ActionSwiper>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/calendar/calendar_renderer_mobile.scss b/addons/web/static/src/views/calendar/calendar_renderer_mobile.scss
new file mode 100644
index 00000000000..3d090d8151a
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_renderer_mobile.scss
@@ -0,0 +1,34 @@
+@include media-breakpoint-down(md) {
+
+    .o_calendar_renderer {
+        .fc-view {
+            &.fc-timeGrid-view {
+                .fc-axis {
+                    padding-left: 0;
+                }
+                .fc-week-number.fc-widget-header {
+                    font-weight: normal;
+                    white-space: normal;
+                }
+            }
+            &:not(.fc-timeGridDay-view) {
+                .fc-day-header, .fc-week-number.fc-widget-header {
+                    word-spacing: 250px; // force line break in week mode
+                    text-align: center;
+                }
+            }
+            &.fc-dayGridMonth-view {
+                padding-left: 0;
+                .fc-week-number:not(.fc-widget-header) {
+                    background-color: $gray-400;
+                    color: $gray-800;
+                }
+            }
+        }
+
+        .fc-more-popover .fc-close {
+            padding: 5px;
+        }
+    }
+
+}
diff --git a/addons/web/static/src/views/calendar/calendar_view.js b/addons/web/static/src/views/calendar/calendar_view.js
new file mode 100644
index 00000000000..b4bb6ec829e
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_view.js
@@ -0,0 +1,38 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { CalendarRenderer } from "./calendar_renderer";
+import { CalendarArchParser } from "./calendar_arch_parser";
+import { CalendarModel } from "./calendar_model";
+import { CalendarController } from "./calendar_controller";
+
+export const calendarView = {
+    type: "calendar",
+
+    display_name: "Calendar",
+    icon: "fa fa-calendar",
+    multiRecord: true,
+    searchMenuTypes: ["filter", "favorite"],
+
+    ArchParser: CalendarArchParser,
+    Controller: CalendarController,
+    Model: CalendarModel,
+    Renderer: CalendarRenderer,
+
+    buttonTemplate: "web.CalendarController.controlButtons",
+
+    props: (props, view) => {
+        const { ArchParser } = view;
+        const { arch, relatedModels, resModel } = props;
+        const archInfo = new ArchParser().parse(arch, relatedModels, resModel);
+        return {
+            ...props,
+            Model: view.Model,
+            Renderer: view.Renderer,
+            buttonTemplate: view.buttonTemplate,
+            archInfo,
+        };
+    },
+};
+
+registry.category("views").add("calendar", calendarView);
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js
new file mode 100644
index 00000000000..ddf42922a7a
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js
@@ -0,0 +1,91 @@
+/** @odoo-module **/
+
+import { Dialog } from "@web/core/dialog/dialog";
+import { formatDate } from "@web/core/l10n/dates";
+
+const { Component } = owl;
+
+export class CalendarYearPopover extends Component {
+    get recordGroups() {
+        return this.computeRecordGroups();
+    }
+
+    get dialogTitle() {
+        return formatDate(this.props.date, { format: "DDD" });
+    }
+
+    computeRecordGroups() {
+        const recordGroups = this.groupRecords();
+        return this.getSortedRecordGroups(recordGroups);
+    }
+    groupRecords() {
+        const recordGroups = {};
+        for (const record of this.props.records) {
+            const start = record.start;
+            const end = record.end;
+
+            const duration = end.diff(start, "days").days;
+            const modifiedRecord = Object.create(record);
+            modifiedRecord.startHour =
+                !record.isAllDay && duration < 1 ? start.toFormat("HH:mm") : "";
+
+            const formattedDate = this.getFormattedDate(start, end);
+            if (!(formattedDate in recordGroups)) {
+                recordGroups[formattedDate] = {
+                    title: formattedDate,
+                    start,
+                    end,
+                    records: [],
+                };
+            }
+            recordGroups[formattedDate].records.push(modifiedRecord);
+        }
+        return Object.values(recordGroups);
+    }
+    getSortedRecordGroups(recordGroups) {
+        return recordGroups.sort((a, b) => {
+            if (a.start.hasSame(a.end, "days")) {
+                return Number.MIN_SAFE_INTEGER;
+            } else if (b.start.hasSame(b.end, "days")) {
+                return Number.MAX_SAFE_INTEGER;
+            } else if (a.start.toMillis() - b.start.toMillis() === 0) {
+                return a.end.toMillis() - b.end.toMillis();
+            }
+            return a.start.toMillis() - b.start.toMillis();
+        });
+    }
+    getFormattedDate(start, end) {
+        const isSameDay = start.hasSame(end, "days");
+        if (!isSameDay && start.hasSame(end, "month")) {
+            // Simplify date-range if an event occurs into the same month (eg. "August 4-5, 2019")
+            return start.toFormat("LLLL d") + "-" + end.toFormat("d, y");
+        } else {
+            return isSameDay
+                ? start.toFormat("DDD")
+                : start.toFormat("DDD") + " - " + end.toFormat("DDD");
+        }
+    }
+
+    onCreateButtonClick() {
+        this.props.createRecord({
+            start: this.props.date,
+            isAllDay: true,
+        });
+        this.props.close();
+    }
+    onRecordClick(record) {
+        this.props.editRecord(record);
+        this.props.close();
+    }
+}
+CalendarYearPopover.components = { Dialog };
+CalendarYearPopover.template = "web.CalendarYearPopover";
+CalendarYearPopover.props = {
+    close: Function,
+    date: true,
+    model: Object,
+    records: Array,
+    createRecord: Function,
+    deleteRecord: Function,
+    editRecord: Function,
+};
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
new file mode 100644
index 00000000000..75be5b44d70
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CalendarYearPopover" owl="1">
+        <t t-if="env.isSmall">
+            <Dialog title="dialogTitle">
+                <t t-call="web.CalendarYearPopover.body" />
+                <t t-set-slot="footer">
+                    <t t-call="web.CalendarYearPopover.footer" />
+                </t>
+            </Dialog>
+        </t>
+        <t t-else="">
+            <t t-call="web.CalendarYearPopover.popover" />
+        </t>
+    </t>
+
+    <t t-name="web.CalendarYearPopover.popover" owl="1">
+        <div class="position-absolute" style="top: 0; right: 0.5rem;">
+            <span class="o_cw_popover_close" t-on-click.stop="() => props.close()">
+                <i class="fa fa-close small" />
+            </span>
+        </div>
+        <div class="o_cw_body">
+            <t t-call="web.CalendarYearPopover.body" />
+        </div>
+        <div t-if="props.model.canCreate" class="mt-2">
+            <t t-call="web.CalendarYearPopover.footer" />
+        </div>
+    </t>
+
+    <t t-name="web.CalendarYearPopover.body" owl="1">
+        <t t-foreach="recordGroups" t-as="recordGroup" t-key="recordGroup.title">
+            <div class="fw-bold mt-2" t-esc="recordGroup.title" />
+            <t t-foreach="recordGroup.records" t-as="record" t-key="record.id">
+                <t t-call="web.CalendarYearPopover.record" />
+            </t>
+        </t>
+    </t>
+
+    <t t-name="web.CalendarYearPopover.footer" owl="1">
+        <t t-if="props.model.canCreate">
+            <a href="#" class="btn-link o_cw_popover_create" t-on-click.prevent="onCreateButtonClick">
+                <i class="fa fa-plus" />
+                Create
+            </a>
+        </t>
+        <t t-else="">
+            <button class="btn btn-primary o-default-button" t-on-click="props.close">
+                <t>Ok</t>
+            </button>
+        </t>
+    </t>
+
+    <t t-name="web.CalendarYearPopover.record" owl="1">
+        <a
+            href="#"
+            t-on-click.prevent="() => this.onRecordClick(record)"
+            t-attf-class="o_cw_popover_link btn-link d-block"
+            t-att-data-id="record.id"
+            t-att-data-title="record.title"
+        >
+            <t t-if="record.startHour"><t t-esc="record.startHour" /> </t>
+            <t t-esc="record.title"/>
+        </a>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js
new file mode 100644
index 00000000000..982318208b6
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js
@@ -0,0 +1,192 @@
+/** @odoo-module **/
+
+import { formatDate } from "@web/core/l10n/dates";
+import { localization } from "@web/core/l10n/localization";
+import { useDebounced } from "@web/core/utils/timing";
+import { getColor } from "../colors";
+import { useCalendarPopover, useFullCalendar } from "../hooks";
+import { CalendarYearPopover } from "./calendar_year_popover";
+
+const { Component, useEffect, useRef, onRendered } = owl;
+
+export class CalendarYearRenderer extends Component {
+    setup() {
+        this.months = luxon.Info.months();
+        this.fcs = {};
+        for (const month of this.months) {
+            this.fcs[month] = useFullCalendar(
+                `fullCalendar-${month}`,
+                this.getOptionsForMonth(month)
+            );
+        }
+        this.popover = useCalendarPopover(this.constructor.components.Popover);
+        this.rootRef = useRef("root");
+        this.onWindowResizeDebounced = useDebounced(this.onWindowResize, 200);
+
+        useEffect(() => {
+            this.updateSize();
+        });
+
+        onRendered(() => {
+            const year = formatDate(this.props.model.date, { format: "yyyy" });
+            this.env.config.setDisplayName(`${this.props.displayName} (${year})`);
+        });
+    }
+
+    get options() {
+        return {
+            columnHeaderFormat: (info) =>
+                luxon.DateTime.fromJSDate(info.date.marker).toFormat("EEEEE"),
+            contentHeight: 0,
+            dateClick: this.onDateClick,
+            dayRender: this.onDayRender,
+            defaultDate: this.props.model.date.toISO(),
+            defaultView: "dayGridMonth",
+            dir: localization.direction,
+            droppable: true,
+            editable: this.props.model.canEdit,
+            eventLimit: this.props.model.eventLimit,
+            eventRender: this.onEventRender,
+            eventResizableFromStart: true,
+            events: (_, successCb) => successCb(this.mapRecordsToEvents()),
+            firstDay: this.props.model.firstDayOfWeek,
+            header: { left: false, center: "title", right: false },
+            height: 0,
+            locale: luxon.Settings.defaultLocale,
+            longPressDelay: 500,
+            navLinks: false,
+            nowIndicator: true,
+            plugins: ["dayGrid", "interaction", "luxon"],
+            select: this.onSelect,
+            selectMinDistance: 5, // needed to not trigger select when click
+            selectMirror: true,
+            selectable: this.props.model.canCreate,
+            showNonCurrentDates: false,
+            timeZone: luxon.Settings.defaultZone.name,
+            titleFormat: { month: "short", year: "numeric" },
+            unselectAuto: false,
+            weekNumberCalculation: "ISO",
+            weekNumbers: false,
+            windowResize: this.onWindowResizeDebounced,
+        };
+    }
+
+    mapRecordsToEvents() {
+        return Object.values(this.props.model.records).map((r) => this.convertRecordToEvent(r));
+    }
+    convertRecordToEvent(record) {
+        return {
+            id: record.id,
+            title: record.title,
+            start: record.start.toISO(),
+            end: record.end.plus({ day: 1 }).toISO(),
+            allDay: true,
+            rendering: "background",
+        };
+    }
+    getDateWithMonth(month) {
+        return this.props.model.date.set({ month: this.months.indexOf(month) + 1 }).toISO();
+    }
+    getOptionsForMonth(month) {
+        return {
+            ...this.options,
+            defaultDate: this.getDateWithMonth(month),
+        };
+    }
+    getPopoverProps(date, records) {
+        return {
+            date,
+            records,
+            model: this.props.model,
+            createRecord: this.props.createRecord,
+            deleteRecord: this.props.deleteRecord,
+            editRecord: this.props.editRecord,
+        };
+    }
+    openPopover(target, date, records) {
+        this.popover.open(target, this.getPopoverProps(date, records));
+    }
+    unselect() {
+        for (const fc of Object.values(this.fcs)) {
+            fc.api.unselect();
+        }
+    }
+    updateSize() {
+        const height = window.innerHeight - this.rootRef.el.getBoundingClientRect().top;
+        this.rootRef.el.style.height = `${height}px`;
+    }
+
+    onDateClick(info) {
+        if (this.env.isSmall) {
+            this.props.model.load({
+                date: luxon.DateTime.fromISO(info.dateStr),
+                scale: "day",
+            });
+            return;
+        }
+
+        // With date value we don't want to change the time, we need the exact date
+        const date = luxon.DateTime.fromISO(info.dateStr);
+        const records = Object.values(this.props.model.records).filter((r) =>
+            luxon.Interval.fromDateTimes(r.start.startOf("day"), r.end.endOf("day")).contains(date)
+        );
+
+        this.popover.close();
+        if (records.length) {
+            const target = info.dayEl;
+            this.openPopover(target, date, records);
+        } else if (this.props.model.canCreate) {
+            this.props.createRecord({
+                // With date value we don't want to change the time, we need the exact date
+                start: luxon.DateTime.fromISO(info.dateStr),
+                isAllDay: true,
+            });
+        }
+    }
+    onDayRender(info) {
+        const date = luxon.DateTime.fromJSDate(info.date).toISODate();
+        if (this.props.model.unusualDays.includes(date)) {
+            info.el.classList.add("o_calendar_disabled");
+        }
+    }
+    onEventRender(info) {
+        const { el, event } = info;
+        el.dataset.eventId = event.id;
+        el.classList.add("o_event");
+        const record = this.props.model.records[event.id];
+        if (record) {
+            const color = getColor(record.colorIndex);
+            if (typeof color === "string") {
+                el.style.backgroundColor = color;
+            } else if (typeof color === "number") {
+                el.classList.add(`o_calendar_color_${color}`);
+            } else {
+                el.classList.add("o_calendar_color_1");
+            }
+
+            if (record.isHatched) {
+                el.classList.add("o_event_hatched");
+            }
+            if (record.isStriked) {
+                el.classList.add("o_event_striked");
+            }
+        }
+    }
+    async onSelect(info) {
+        this.popover.close();
+        await this.props.createRecord({
+            // With date value we don't want to change the time, we need the exact date
+            start: luxon.DateTime.fromISO(info.startStr),
+            end: luxon.DateTime.fromISO(info.endStr).minus({ days: 1 }),
+            isAllDay: true,
+        });
+        this.unselect();
+    }
+    onWindowResize() {
+        this.updateSize();
+    }
+}
+CalendarYearRenderer.components = {
+    Popover: CalendarYearPopover,
+};
+CalendarYearRenderer.template = "web.CalendarYearRenderer";
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.xml b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.xml
new file mode 100644
index 00000000000..2ada4b5eee7
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CalendarYearRenderer" owl="1">
+        <div class="o_calendar_widget" t-ref="root">
+            <div class="fc-view-container">
+                <div class="fc fc-dayGridYear-view">
+                    <t t-foreach="months" t-as="month" t-key="month">
+                        <div class="fc-month-container">
+                            <div class="fc-month" t-ref="fullCalendar-{{ month }}" />
+                        </div>
+                    </t>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/calendar/colors.js b/addons/web/static/src/views/calendar/colors.js
new file mode 100644
index 00000000000..ad6840e3390
--- /dev/null
+++ b/addons/web/static/src/views/calendar/colors.js
@@ -0,0 +1,24 @@
+/** @odoo-module **/
+
+const CSS_COLOR_REGEX = /^((#[A-F0-9]{3})|(#[A-F0-9]{6})|((hsl|rgb)a?\(\s*(?:(\s*\d{1,3}%?\s*),?){3}(\s*,[0-9.]{1,4})?\))|)$/i;
+const colorMap = new Map();
+
+export function getColor(key) {
+    if (!key) {
+        return false;
+    }
+    if (colorMap.has(key)) {
+        return colorMap.get(key);
+    }
+
+    // check if the key is a css color
+    if (typeof key === "string" && key.match(CSS_COLOR_REGEX)) {
+        colorMap.set(key, key);
+    } else if (typeof key === "number") {
+        colorMap.set(key, key);
+    } else {
+        colorMap.set(key, (((colorMap.size + 1) * 5) % 24) + 1);
+    }
+
+    return colorMap.get(key);
+}
diff --git a/addons/web/static/src/views/calendar/date_picker/calendar_date_picker.js b/addons/web/static/src/views/calendar/date_picker/calendar_date_picker.js
new file mode 100644
index 00000000000..e4d0ad8314c
--- /dev/null
+++ b/addons/web/static/src/views/calendar/date_picker/calendar_date_picker.js
@@ -0,0 +1,101 @@
+/** @odoo-module **/
+
+const { Component, onMounted, onWillUnmount, useEffect, useRef, xml } = owl;
+const { DateTime, Info } = luxon;
+
+export class CalendarDatePicker extends Component {
+    setup() {
+        this.rootRef = useRef("root");
+        onMounted(() => {
+            this.$el.datepicker(this.options);
+        });
+        useEffect(() => {
+            this.highlight();
+        });
+        onWillUnmount(() => {
+            this.$el.datepicker("destroy");
+            const picker = document.querySelector("#ui-datepicker-div:empty");
+            if (picker) {
+                picker.remove();
+            }
+        });
+    }
+
+    get options() {
+        // this is needed because luxon gives the week in ISO format : Monday is the first day of the week.
+        // (M T W T F S S) but the jsquery datepicker wants as day name option in US format (S M T W T F S)
+        const weekdays = Array.from(Info.weekdays("narrow"));
+        const last = weekdays.pop();
+        return {
+            dayNamesMin: [last, ...weekdays],
+            firstDay: (this.props.model.firstDayOfWeek || 0) % 7,
+            monthNames: Info.months("short"),
+            onSelect: this.onDateSelected.bind(this),
+            showOtherMonths: true,
+            dateFormat: "yy-mm-dd",
+        };
+    }
+    get $el() {
+        return $(this.rootRef.el);
+    }
+
+    highlight() {
+        this.$el
+            .datepicker("setDate", this.props.model.date.toFormat("yyyy-MM-dd"))
+            .find(".o_selected_range")
+            .removeClass("o_color o_selected_range");
+        let $a;
+        switch (this.props.model.scale) {
+            case "year":
+                $a = this.$el.find("td");
+                break;
+            case "month":
+                $a = this.$el.find("td");
+                break;
+            case "week":
+                $a = this.$el.find("tr:has(.ui-state-active)");
+                break;
+            case "day":
+                $a = this.$el.find("a.ui-state-active");
+                break;
+        }
+        $a.addClass("o_selected_range");
+        $a.not(".ui-state-active").addClass("o_color");
+
+        // Correctly highlight today
+        // This is needed in case the user's local timezone is different from the system one
+        const { year, month, day } = DateTime.local();
+        this.$el.find(".ui-datepicker-today").removeClass("ui-datepicker-today");
+        this.$el
+            .find(`td[data-year="${year}"][data-month="${month - 1}"]:contains("${day}")`)
+            .addClass("ui-datepicker-today");
+    }
+
+    onDateSelected(_, info) {
+        const model = this.props.model;
+        const date = DateTime.local(+info.currentYear, +info.currentMonth + 1, +info.currentDay);
+        let scale = "week";
+
+        if (model.date.hasSame(date, "day")) {
+            const scales = ["month", "week", "day"];
+            scale = scales[(scales.indexOf(model.scale) + 1) % scales.length];
+        } else {
+            // Check if dates are on the same week
+            // As a.hasSame(b, "week") does not depend on locale and week always starts on Monday,
+            // we are comparing derivated dates instead to take this into account.
+            const currentDate = model.date.weekday === 7 ? model.date.plus({ day: 1 }) : model.date;
+            const pickedDate = date.weekday === 7 ? date.plus({ day: 1 }) : date;
+
+            // a.hasSame(b, "week") does not depend on locale and week alway starts on Monday
+            if (currentDate.hasSame(pickedDate, "week")) {
+                scale = "day";
+            }
+        }
+
+        model.load({ scale, date });
+    }
+}
+CalendarDatePicker.props = {
+    model: Object,
+};
+CalendarDatePicker.template = xml`<div class="o_calendar_mini" t-ref="root" />`;
diff --git a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.js b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.js
new file mode 100644
index 00000000000..35fa95b4cee
--- /dev/null
+++ b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.js
@@ -0,0 +1,226 @@
+/** @odoo-module **/
+
+import { usePopover } from "@web/core/popover/popover_hook";
+import { _t } from "@web/core/l10n/translation";
+import { AutoComplete } from "@web/core/autocomplete/autocomplete";
+import { Transition } from "@web/core/transition";
+import { useOwnedDialogs, useService } from "@web/core/utils/hooks";
+import { sprintf } from "@web/core/utils/strings";
+import { SelectCreateDialog } from "@web/views/view_dialogs/select_create_dialog";
+
+const { Component, useState } = owl;
+
+class FilterAutoComplete extends Component {
+    setup() {
+        this.orm = useService("orm");
+        this.addDialog = useOwnedDialogs();
+        this.state = useState({
+            value: "",
+        });
+        this.sources = [{ placeholder: _t("Loading..."), options: this.loadSource.bind(this) }];
+    }
+    async loadSource(request) {
+        const records = await this.orm.call(this.props.resModel, "name_search", [], {
+            name: request,
+            operator: "ilike",
+            args: this.props.domain,
+            limit: 8,
+            context: {},
+        });
+
+        const options = records.map((result) => ({
+            value: result[0],
+            label: result[1],
+        }));
+
+        if (records.length > 7) {
+            options.push({
+                label: _t("Search More..."),
+                action: this.onSearchMore.bind(this, request),
+            });
+        }
+
+        return options;
+    }
+    async onSearchMore(request) {
+        let dynamicFilters = [];
+        if (request.length) {
+            const nameGets = await this.orm.call(this.props.resModel, "name_search", [], {
+                name: request,
+                args: this.props.domain,
+                operator: "ilike",
+                context: {},
+            });
+
+            dynamicFilters = [
+                {
+                    description: sprintf(_t("Quick search: %s"), request),
+                    domain: [["id", "in", nameGets.map((nameGet) => nameGet[0])]],
+                },
+            ];
+        }
+        const title = sprintf(this.env._t("Search: %s"), this.props.searchMoreTitle);
+        this.addDialog(SelectCreateDialog, {
+            title: title || _t("Select records"),
+            noCreate: true,
+            multiSelect: false,
+            resModel: this.props.resModel,
+            context: {},
+            domain: this.props.domain,
+            onSelected: (...args) => {
+                console.log(...args);
+            },
+            dynamicFilters,
+        });
+    }
+
+    onInput({ inputValue }) {
+        this.state.value = inputValue;
+    }
+    onSelect(option, params = {}) {
+        this.props.onSelect(option.value);
+        this.state.value = "";
+    }
+}
+FilterAutoComplete.template = "web.FilterAutoComplete";
+FilterAutoComplete.components = {
+    AutoComplete,
+};
+
+class CalendarFilterTooltip extends Component {}
+CalendarFilterTooltip.template = "web.CalendarFilterPanel.tooltip";
+
+let nextId = 1;
+
+export class CalendarFilterPanel extends Component {
+    setup() {
+        this.state = useState({
+            collapsed: {},
+            fieldRev: 1,
+        });
+
+        this.popover = usePopover();
+        this.removePopover = null;
+    }
+
+    getAutoCompleteProps(section) {
+        return {
+            resModel: this.props.model.fields[section.fieldName].relation,
+            domain: [
+                [
+                    "id",
+                    "not in",
+                    section.filters.filter((f) => f.type !== "all").map((f) => f.value),
+                ],
+            ],
+            searchMoreTitle: section.label,
+            placeholder: `+ ${_t("Add")} ${section.label}`,
+            onSelect: (value) => {
+                this.props.model.createFilter(section.fieldName, value);
+            },
+        };
+    }
+
+    get nextFilterId() {
+        nextId += 1;
+        return nextId;
+    }
+
+    isAllActive(section) {
+        let active = true;
+        for (const filter of section.filters) {
+            if (filter.type !== "all" && !filter.active) {
+                active = false;
+                break;
+            }
+        }
+        return active;
+    }
+    getFilterTypePriority(type) {
+        return ["user", "record", "dynamic", "all"].indexOf(type);
+    }
+    getSortedFilters(section) {
+        return section.filters.slice().sort((a, b) => {
+            if (a.type === b.type) {
+                const va = a.value ? -1 : 0;
+                const vb = b.value ? -1 : 0;
+                if (a.type === "dynamic" && va !== vb) {
+                    return va - vb;
+                }
+                return b.label.localeCompare(a.label);
+            } else {
+                return this.getFilterTypePriority(a.type) - this.getFilterTypePriority(b.type);
+            }
+        });
+    }
+
+    toggleSection(section) {
+        if (section.canCollapse) {
+            this.state.collapsed[section.fieldName] = !this.state.collapsed[section.fieldName];
+        }
+    }
+
+    isSectionCollapsed(section) {
+        return this.state.collapsed[section.fieldName] || false;
+    }
+
+    closeTooltip() {
+        if (this.removePopover) {
+            this.removePopover();
+            this.removePopover = null;
+        }
+    }
+
+    onFilterInputChange(section, filter, ev) {
+        this.props.model.updateFilters(section.fieldName, {
+            [filter.value]: ev.target.checked,
+        });
+    }
+
+    onAllFilterInputChange(section, ev) {
+        const filters = {};
+        for (const filter of section.filters) {
+            if (filter.type !== "all") {
+                filters[filter.value] = ev.target.checked;
+            }
+        }
+        this.props.model.updateFilters(section.fieldName, filters);
+    }
+
+    onFilterMouseEnter(section, filter, ev) {
+        this.closeTooltip();
+        if (!section.hasAvatar || !filter.hasAvatar) {
+            return;
+        }
+
+        this.removePopover = this.popover.add(
+            ev.currentTarget,
+            CalendarFilterTooltip,
+            { section, filter },
+            {
+                closeOnClickAway: false,
+                popoverClass: "o-calendar-filter--tooltip",
+                position: "top",
+            }
+        );
+    }
+
+    onFilterMouseLeave() {
+        this.closeTooltip();
+    }
+
+    onFilterRemoveBtnClick(section, filter) {
+        this.props.model.unlinkFilter(section.fieldName, filter.recordId);
+    }
+
+    onFieldChanged(fieldName, filterValue) {
+        this.state.fieldRev += 1;
+        this.props.model.createFilter(fieldName, filterValue);
+    }
+}
+
+CalendarFilterPanel.components = {
+    FilterAutoComplete,
+    Transition,
+};
+CalendarFilterPanel.template = "web.CalendarFilterPanel";
diff --git a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
new file mode 100644
index 00000000000..4d77c0ce7d4
--- /dev/null
+++ b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
@@ -0,0 +1,13 @@
+.o-section-slide {
+    max-height: 0;
+    transition: max-height 0.35s ease;
+
+    &.o-section-slide-enter,
+    &.o-section-slide-leave {
+        overflow: hidden !important;
+    }
+    &.o-section-slide-enter-active {
+        max-height: 20rem; // fixed value is required to properly trigger transition
+        overflow: auto;
+    }
+}
\ No newline at end of file
diff --git a/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
new file mode 100644
index 00000000000..da6148304be
--- /dev/null
+++ b/addons/web/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CalendarFilterPanel" owl="1">
+        <t t-foreach="props.model.filterSections" t-as="section" t-key="section.fieldName">
+            <t t-if="section.filters.length gt 0">
+                <div
+                    class="o_calendar_filter"
+                    t-att-class="{'o-calendar-filter-panel--section-collapsed': isSectionCollapsed(section)}"
+                    t-att-data-name="section.fieldName"
+                >
+                    <t t-if="section.label">
+                        <div class="d-flex">
+                            <div
+                                class="o_calendar_filter_items_checkall me-2"
+                                data-value="section"
+                            >
+                                <t t-set="filterId" t-value="nextFilterId" />
+                                <input
+                                    type="checkbox"
+                                    name="select-all"
+                                    class="position-absolute"
+                                    t-attf-id="o_calendar_filter_{{filterId}}"
+                                    t-att-checked="isAllActive(section)"
+                                    t-on-change="(ev) => this.onAllFilterInputChange(section, ev)"
+                                />
+                                <label
+                                    class="d-flex align-items-center m-0"
+                                    t-attf-for="o_calendar_filter_{{filterId}}"
+                                >
+                                    <span class="o_cw_filter_input_bg o_calendar_filter_all">
+                                        <i class="fa fa-check position-relative" />
+                                    </span>
+                                </label>
+                            </div>
+
+                            <t t-if="section.canCollapse">
+                                <div
+                                    class="justify-content-between align-items-center h5"
+                                    type="button"
+                                    t-on-click.stop.prevent="() => this.toggleSection(section, ev)"
+                                >
+                                    <span class="o_cw_filter_label" t-esc="section.label" />
+                                    <i
+                                        class="o_cw_filter_collapse_icon fa"
+                                        t-attf-class="fa-chevron-{{ isSectionCollapsed(section) ? 'left' : 'down' }}"
+                                    />
+                                </div>
+                            </t>
+                            <t t-else="">
+                                <h5 class="o_cw_filter_label" t-esc="section.label" />
+                            </t>
+                        </div>
+                    </t>
+                    <Transition visible="!isSectionCollapsed(section)" name="'o-section-slide'" leaveDuration="350" t-slot-scope="transition">
+                        <div class="o_calendar_filter_items" t-att-class="transition.className">
+                            <t t-foreach="getSortedFilters(section)" t-as="filter" t-key="filter.value">
+                                <t t-set="filterId" t-value="nextFilterId" />
+                                <t t-call="web.CalendarFilterPanel.filter" />
+                            </t>
+                        </div>
+                    </Transition>
+                    <t t-if="section.canAddFilter">
+                        <FilterAutoComplete t-props="getAutoCompleteProps(section)" />
+                    </t>
+                </div>
+            </t>
+        </t>
+    </t>
+
+    <t t-name="web.CalendarFilterPanel.filter" owl="1">
+        <div
+            class="o_calendar_filter_item w-100 position-relative mb-2"
+            t-att-class="filter.colorIndex !== null ? 'o_cw_filter_color_' + filter.colorIndex : ''"
+            t-att-data-value="filter.value"
+            t-on-mouseenter="(ev) => this.onFilterMouseEnter(section, filter, ev)"
+            t-on-mouseleave="() => this.onFilterMouseLeave(section, filter)"
+        >
+            <input
+                type="checkbox"
+                name="selection"
+                class="position-absolute"
+                t-attf-id="o_calendar_filter_item_{{filterId}}"
+                t-att-checked="filter.active"
+                t-on-change="(ev) => this.onFilterInputChange(section, filter, ev)"
+            />
+            <label
+                class="d-flex align-items-start m-0"
+                t-attf-for="o_calendar_filter_item_{{filterId}}"
+            >
+                <span
+                    class="o_cw_filter_input_bg align-items-start d-flex flex-shrink-0 justify-content-center position-relative me-1 o_beside_avatar"
+                    t-att-style="filter.colorIndex and typeof filter.colorIndex !== 'number' ? `border-color: ${filter.colorIndex}; background-color: ${filter.colorIndex};` : ''"
+                >
+                    <i class="fa fa-check position-relative" />
+                </span>
+                <t t-if="section.hasAvatar and filter.hasAvatar">
+                    <img
+                        class="o_cw_filter_avatar flex-shrink-0 me-1"
+                        t-attf-src="/web/image/{{ section.avatar.model }}/{{ filter.value }}/{{ section.avatar.field }}"
+                        alt="Avatar"
+                    />
+                </t>
+                <t t-elif="filter.type === 'all'">
+                    <i
+                        class="o_cw_filter_avatar fa fa-users fa-fw flex-shrink-0 me-1"
+                        role="img"
+                        aria-label="Avatar"
+                        title="Avatar"
+                    />
+                </t>
+                <span
+                    class="o_cw_filter_title text-truncate flex-grow"
+                    t-esc="filter.label"
+                />
+            </label>
+            <t t-if="filter.canRemove">
+                <button
+                    class="o_remove btn bg-white text-700 py-0 px-2"
+                    role="img"
+                    title="Remove this favorite from the list"
+                    aria-label="Remove this favorite from the list"
+                    t-on-click="() => this.onFilterRemoveBtnClick(section, filter)"
+                >
+                    <i class="fa fa-times" />
+                </button>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="web.CalendarFilterPanel.tooltip" owl="1">
+        <div class="card">
+            <h6
+                class="text-center card-header"
+                t-esc="props.filter.label"
+            />
+            <div class="card-body">
+                <img
+                    t-attf-src="/web/image/{{ props.section.avatar.model }}/{{ props.filter.value }}/{{ props.section.avatar.field }}"
+                    class="mx-auto"
+                />
+            </div>
+        </div>
+    </t>
+
+    <t t-name="web.FilterAutoComplete" owl="1">
+        <AutoComplete value="state.value" sources="sources" autoSelect="true" placeholder="props.placeholder" onSelect.bind="onSelect" onInput.bind="onInput" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/calendar/hooks.js b/addons/web/static/src/views/calendar/hooks.js
new file mode 100644
index 00000000000..9c9399c6188
--- /dev/null
+++ b/addons/web/static/src/views/calendar/hooks.js
@@ -0,0 +1,118 @@
+/** @odoo-module **/
+
+import { loadCSS, loadJS } from "@web/core/assets";
+import { browser } from "@web/core/browser/browser";
+import { usePopover } from "@web/core/popover/popover_hook";
+import { useService } from "@web/core/utils/hooks";
+
+const { onMounted, onPatched, onWillStart, onWillUnmount, useComponent, useRef } = owl;
+
+export function useCalendarPopover(component) {
+    const owner = useComponent();
+    const popover = usePopover();
+    const dialog = useService("dialog");
+    let remove = null;
+    function close() {
+        if (remove) {
+            remove();
+            remove = null;
+        }
+    }
+    return {
+        close,
+        open(target, props, popoverClass) {
+            close();
+            if (owner.env.isSmall) {
+                remove = dialog.add(component, props, { onClose: () => (remove = null) });
+            } else {
+                remove = popover.add(target, component, props, {
+                    popoverClass,
+                    position: "right",
+                    onClose: () => (remove = null),
+                });
+            }
+        },
+    };
+}
+
+export function useClickHandler(singleClickCb, doubleClickCb) {
+    const component = useComponent();
+    let clickTimeoutId = null;
+    return function handle(...args) {
+        if (clickTimeoutId) {
+            doubleClickCb.call(component, ...args);
+            browser.clearTimeout(clickTimeoutId);
+            clickTimeoutId = null;
+        } else {
+            clickTimeoutId = browser.setTimeout(() => {
+                singleClickCb.call(component, ...args);
+                clickTimeoutId = null;
+            }, 250);
+        }
+    };
+}
+
+export function useFullCalendar(refName, params) {
+    const component = useComponent();
+    const ref = useRef(refName);
+    let instance = null;
+
+    function boundParams() {
+        const newParams = {};
+        for (const key in params) {
+            const value = params[key];
+            newParams[key] = typeof value === "function" ? value.bind(component) : value;
+        }
+        return newParams;
+    }
+
+    async function loadJsFiles() {
+        const files = [
+            "/web/static/lib/fullcalendar/core/main.js",
+            "/web/static/lib/fullcalendar/interaction/main.js",
+            "/web/static/lib/fullcalendar/daygrid/main.js",
+            "/web/static/lib/fullcalendar/luxon/main.js",
+            "/web/static/lib/fullcalendar/timegrid/main.js",
+            "/web/static/lib/fullcalendar/list/main.js",
+        ];
+        for (const file of files) {
+            await loadJS(file);
+        }
+    }
+    async function loadCssFiles() {
+        await Promise.all(
+            [
+                "/web/static/lib/fullcalendar/core/main.css",
+                "/web/static/lib/fullcalendar/daygrid/main.css",
+                "/web/static/lib/fullcalendar/timegrid/main.css",
+                "/web/static/lib/fullcalendar/list/main.css",
+            ].map((file) => loadCSS(file))
+        );
+    }
+
+    onWillStart(() => Promise.all([loadJsFiles(), loadCssFiles()]));
+
+    onMounted(() => {
+        try {
+            instance = new FullCalendar.Calendar(ref.el, boundParams());
+            instance.render();
+        } catch (e) {
+            throw new Error(`Cannot instantiate FullCalendar\n${e.message}`);
+        }
+    });
+    onPatched(() => {
+        instance.refetchEvents();
+    });
+    onWillUnmount(() => {
+        instance.destroy();
+    });
+
+    return {
+        get api() {
+            return instance;
+        },
+        get el() {
+            return ref.el;
+        },
+    };
+}
diff --git a/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.js b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.js
new file mode 100644
index 00000000000..a54c95dadfe
--- /dev/null
+++ b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.js
@@ -0,0 +1,28 @@
+/** @odoo-module **/
+
+const { Component } = owl;
+
+export class CalendarMobileFilterPanel extends Component {
+    get caretDirection() {
+        return this.props.sideBarShown ? "down" : "left";
+    }
+    getFilterTypePriority(type) {
+        return ["user", "record", "dynamic", "all"].indexOf(type);
+    }
+    getSortedFilters(section) {
+        return section.filters.slice().sort((a, b) => {
+            if (a.type === b.type) {
+                const va = a.value ? -1 : 0;
+                const vb = b.value ? -1 : 0;
+                if (a.type === "dynamic" && va !== vb) {
+                    return va - vb;
+                }
+                return b.label.localeCompare(a.label);
+            } else {
+                return this.getFilterTypePriority(a.type) - this.getFilterTypePriority(b.type);
+            }
+        });
+    }
+}
+CalendarMobileFilterPanel.components = {};
+CalendarMobileFilterPanel.template = "web.CalendarMobileFilterPanel";
diff --git a/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml
new file mode 100644
index 00000000000..32235679d69
--- /dev/null
+++ b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CalendarMobileFilterPanel" owl="1">
+        <div class="o_other_calendar_panel d-flex align-items-center" t-on-click="props.toggleSideBar">
+            <i class="fa fa-fw fa-filter me-3" />
+            <div class="o_filter me-auto d-flex overflow-auto">
+                <t t-foreach="props.model.filterSections" t-as="section" t-key="section.fieldName">
+                    <t t-if="section.filters.length gt 0">
+                        <span class="text-nowrap fw-bold text-uppercase me-1" t-esc="section.label" />
+
+                        <t t-foreach="getSortedFilters(section)" t-as="filter" t-key="filter.value">
+                            <span t-if="filter.active" class="d-flex align-items-center text-nowrap ms-1 me-2">
+                                <span t-attf-class="o_color_{{filter.colorIndex}}">⬤</span>
+                                <span class="ms-1 fw-bold text-nowrap" t-esc="filter.label" />
+                            </span>
+                        </t>
+                    </t>
+                </t>
+            </div>
+            <i t-attf-class="fa fa-fw fa-caret-{{caretDirection}} ms-2" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/calendar/quick_create/calendar_quick_create.js b/addons/web/static/src/views/calendar/quick_create/calendar_quick_create.js
new file mode 100644
index 00000000000..8957d40dde9
--- /dev/null
+++ b/addons/web/static/src/views/calendar/quick_create/calendar_quick_create.js
@@ -0,0 +1,86 @@
+/** @odoo-module **/
+
+import { useAutofocus, useService } from "@web/core/utils/hooks";
+import { Dialog } from "@web/core/dialog/dialog";
+import { _lt } from "@web/core/l10n/translation";
+
+const { Component } = owl;
+
+export class CalendarQuickCreate extends Component {
+    setup() {
+        this.titleRef = useAutofocus({ refName: "title" });
+        this.notification = useService("notification");
+        this.creatingRecord = false;
+    }
+
+    get dialogTitle() {
+        return _lt("New Event");
+    }
+
+    get recordTitle() {
+        return this.titleRef.el.value.trim();
+    }
+    get record() {
+        return {
+            ...this.props.record,
+            title: this.recordTitle,
+        };
+    }
+
+    editRecord() {
+        this.props.editRecord(this.record);
+        this.props.close();
+    }
+    async createRecord() {
+        if (this.creatingRecord) {
+            return;
+        }
+
+        if (this.recordTitle) {
+            try {
+                this.creatingRecord = true;
+                await this.props.model.createRecord(this.record);
+                this.props.close();
+            } catch {
+                this.editRecord();
+            }
+        } else {
+            this.titleRef.el.classList.add("o_field_invalid");
+            this.notification.add(this.env._t("Meeting Subject"), {
+                title: this.env._t("Invalid fields"),
+                type: "danger",
+            });
+        }
+    }
+
+    onInputKeyup(ev) {
+        switch (ev.key) {
+            case "Enter":
+                this.createRecord();
+                break;
+            case "Escape":
+                this.props.close();
+                break;
+        }
+    }
+    onCreateBtnClick() {
+        this.createRecord();
+    }
+    onEditBtnClick() {
+        this.editRecord();
+    }
+    onCancelBtnClick() {
+        this.props.close();
+    }
+}
+
+CalendarQuickCreate.template = "web.CalendarQuickCreate";
+CalendarQuickCreate.components = {
+    Dialog,
+};
+CalendarQuickCreate.props = {
+    close: Function,
+    record: Object,
+    model: Object,
+    editRecord: Function,
+};
diff --git a/addons/web/static/src/views/calendar/quick_create/calendar_quick_create.xml b/addons/web/static/src/views/calendar/quick_create/calendar_quick_create.xml
new file mode 100644
index 00000000000..4497714bd09
--- /dev/null
+++ b/addons/web/static/src/views/calendar/quick_create/calendar_quick_create.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CalendarQuickCreate" owl="1">
+        <Dialog size="'sm'" title="dialogTitle">
+            <div class="o-calendar-quick-create mb-3">
+                <label for="title" class="col-form-label o_form_label">
+                    Meeting Subject:
+                </label>
+                <input
+                    type="text"
+                    class="o_input o_required_modifier o-calendar-quick-create--input"
+                    name="title"
+                    t-ref="title"
+                    t-on-keyup="onInputKeyup"
+                />
+            </div>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary o-calendar-quick-create--create-btn" t-on-click="onCreateBtnClick">
+                    Create
+                </button>
+                <button class="btn btn-secondary o-calendar-quick-create--edit-btn" t-on-click="onEditBtnClick">
+                    Edit
+                </button>
+                <button class="btn btn-secondary o-calendar-quick-create--cancel-btn" t-on-click="onCancelBtnClick">
+                    Cancel
+                </button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js
index 8217c01ec0f..ff20dc45054 100644
--- a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js
+++ b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js
@@ -354,3 +354,6 @@ Many2ManyTagsFieldColorEditable.extractProps = (params) => {
 };
 
 registry.category("fields").add("form.many2many_tags", Many2ManyTagsFieldColorEditable);
+
+registry.category("fields").add("calendar.one2many", Many2ManyTagsField);
+registry.category("fields").add("calendar.many2many", Many2ManyTagsField);
diff --git a/addons/web/static/src/views/fields/relational_utils.xml b/addons/web/static/src/views/fields/relational_utils.xml
index 6eab2c390b5..b4a64cb4b19 100644
--- a/addons/web/static/src/views/fields/relational_utils.xml
+++ b/addons/web/static/src/views/fields/relational_utils.xml
@@ -41,6 +41,7 @@
             t-att-id="props.id"
             class="o_input"
             readonly=""
+            placeholder="props.placeholder"
             t-att-value="props.value"
             t-on-click="onSearchMoreSmall"
         />
diff --git a/addons/web/static/src/views/record.js b/addons/web/static/src/views/record.js
index d50c5297441..e35a429c977 100644
--- a/addons/web/static/src/views/record.js
+++ b/addons/web/static/src/views/record.js
@@ -7,9 +7,11 @@ const { Component, xml, onWillStart, onWillUpdateProps } = owl;
 
 class _Record extends Component {
     setup() {
-        const activeFields = Object.fromEntries(
-            this.props.info.fieldNames.map((f) => [f, { attrs: {}, options: {}, domain: "[]" }])
-        );
+        const activeFields =
+            this.props.info.activeFields ||
+            Object.fromEntries(
+                this.props.info.fieldNames.map((f) => [f, { attrs: {}, options: {}, domain: "[]" }])
+            );
 
         this.model = useModel(RelationalModel, {
             resId: this.props.info.resId,
@@ -50,4 +52,13 @@ export class Record extends Component {
 }
 Record.template = xml`<_Record fields="fields" slots="props.slots" info="props" />`;
 Record.components = { _Record };
-Record.props = ["slots", "resModel", "fieldNames", "fields?", "resId?", "mode?", "initialValues?"];
+Record.props = [
+    "slots",
+    "resModel",
+    "fieldNames?",
+    "activeFields?",
+    "fields?",
+    "resId?",
+    "mode?",
+    "initialValues?",
+];
diff --git a/addons/web/static/src/views/relational_model.js b/addons/web/static/src/views/relational_model.js
index 06c54d41990..4ced79c2dff 100644
--- a/addons/web/static/src/views/relational_model.js
+++ b/addons/web/static/src/views/relational_model.js
@@ -814,7 +814,7 @@ export class Record extends DataPoint {
             const changes = params.changes || (await this._onChange());
             await this._load({ changes });
         } else {
-            let values = params.values || {};
+            let values = this._parseServerValues(params.values);
             const missingFields = this.fieldNames.filter((fieldName) => !(fieldName in values));
             if (missingFields.length) {
                 values = Object.assign({}, values, await this._read(missingFields));
@@ -2034,7 +2034,6 @@ export class DynamicRecordList extends DynamicList {
 
         const records = await Promise.all(
             rawRecords.map(async (data) => {
-                data = this._parseServerValues(data);
                 const record = this.model.createDataPoint("record", {
                     resModel: this.resModel,
                     resId: data.id,
@@ -3230,7 +3229,7 @@ export class StaticList extends DataPoint {
                     if (!this._initialValues) {
                         this._initialValues = {};
                     }
-                    this._initialValues[id] = this._parseServerValues(command[2]);
+                    this._initialValues[id] = command[2];
                 }
                 command[2] = symbolValues;
             }
diff --git a/addons/web/static/src/views/view.js b/addons/web/static/src/views/view.js
index 34415f94d7a..0e8e7b675b1 100644
--- a/addons/web/static/src/views/view.js
+++ b/addons/web/static/src/views/view.js
@@ -12,7 +12,7 @@ import { WithSearch } from "@web/search/with_search/with_search";
 import { OnboardingBanner } from "@web/views/onboarding_banner";
 import { useActionLinks } from "@web/views/view_hook";
 
-const { Component, markRaw, onWillUpdateProps, onWillStart, toRaw, useSubEnv } = owl;
+const { Component, markRaw, onWillUpdateProps, onWillStart, toRaw, useSubEnv, reactive } = owl;
 const viewRegistry = registry.category("views");
 
 /** @typedef {Object} Config
@@ -41,18 +41,21 @@ export function getDefaultConfig() {
         actionId: false,
         actionType: false,
         actionFlags: {},
-        breadcrumbs: [
+        breadcrumbs: reactive([
             {
                 get name() {
                     return displayName;
                 },
             },
-        ],
+        ]),
         getDisplayName: () => displayName,
         historyBack: () => {},
         pagerProps: {},
         setDisplayName: (newDisplayName) => {
             displayName = newDisplayName;
+            // This is a hack to force the reactivity when a new displayName is set
+            config.breadcrumbs.push(undefined);
+            config.breadcrumbs.pop();
         },
         viewSwitcherEntries: [],
         views: [],
diff --git a/addons/web/static/src/webclient/actions/action_service.js b/addons/web/static/src/webclient/actions/action_service.js
index 66f9ca2c0ae..dee040e4191 100644
--- a/addons/web/static/src/webclient/actions/action_service.js
+++ b/addons/web/static/src/webclient/actions/action_service.js
@@ -15,7 +15,7 @@ import { ActionDialog } from "./action_dialog";
 import { CallbackRecorder } from "./action_hook";
 import { ReportAction } from "./reports/report_action";
 
-const { Component, markup, onMounted, onWillUnmount, onError, useChildSubEnv, xml } = owl;
+const { Component, markup, onMounted, onWillUnmount, onError, useChildSubEnv, xml, reactive } = owl;
 
 const actionHandlersRegistry = registry.category("action_handlers");
 const actionRegistry = registry.category("actions");
@@ -575,7 +575,9 @@ function makeActionManager(env) {
         }
         const nextStack = controllerStack.slice(0, index).concat(controllerArray);
         // Compute breadcrumbs
-        controller.config.breadcrumbs = action.target === "new" ? [] : _getBreadcrumbs(nextStack);
+        controller.config.breadcrumbs = reactive(
+            action.target === "new" ? [] : _getBreadcrumbs(nextStack)
+        );
         controller.config.getDisplayName = () => controller.displayName;
         controller.config.setDisplayName = (displayName) => {
             controller.displayName = displayName;
@@ -583,6 +585,11 @@ function makeActionManager(env) {
                 // if not mounted yet, will be done in "mounted"
                 env.services.title.setParts({ action: controller.displayName });
             }
+            if (action.target !== "new") {
+                // This is a hack to force the reactivity when a new displayName is set
+                controller.config.breadcrumbs.push(undefined);
+                controller.config.breadcrumbs.pop();
+            }
         };
         controller.config.historyBack = () => {
             const previousController = controllerStack[controllerStack.length - 2];
diff --git a/addons/web/static/tests/helpers/utils.js b/addons/web/static/tests/helpers/utils.js
index e207d8119fb..5d32f1e4450 100644
--- a/addons/web/static/tests/helpers/utils.js
+++ b/addons/web/static/tests/helpers/utils.js
@@ -157,7 +157,7 @@ export function makeDeferred() {
     return new Deferred();
 }
 
-function findElement(el, selector) {
+export function findElement(el, selector) {
     let target = el;
     if (selector) {
         const els = el.querySelectorAll(selector);
diff --git a/addons/web/static/tests/legacy/core/owl_dialog_tests.js b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
index 2e171a5bd23..c95f3b4c29c 100644
--- a/addons/web/static/tests/legacy/core/owl_dialog_tests.js
+++ b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
@@ -3,6 +3,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
 
     const LegacyDialog = require('web.Dialog');
     const FormView = require('web.FormView');
+    const CalendarView = require('web.CalendarView');
     const makeTestEnvironment = require('web.test_env');
     const Dialog = require('web.OwlDialog');
     const testUtils = require('web.test_utils');
@@ -418,8 +419,10 @@ odoo.define('web.owl_dialog_tests', function (require) {
         });
 
         QUnit.test("remove tabindex on inactive dialog", async (assert) => {
+            registry.category("views").remove("calendar"); // remove new calendar from registry
             registry.category("views").remove("form"); // remove new form from registry
             legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
+            legacyViewRegistry.add("calendar", CalendarView); // add legacy calendar -> will be wrapped and added to new registry
 
             const serverData = {
                 actions: {
diff --git a/addons/web/static/tests/legacy/views/calendar_tests.js b/addons/web/static/tests/legacy/views/calendar_tests.js
index 05629f8ac4c..a5a90cead92 100644
--- a/addons/web/static/tests/legacy/views/calendar_tests.js
+++ b/addons/web/static/tests/legacy/views/calendar_tests.js
@@ -3,6 +3,7 @@ odoo.define('web.calendar_tests', function (require) {
 
 const AbstractField = require('web.AbstractField');
 const BasicModel = require('web.BasicModel');
+const FormView = require('web.FormView');
 var CalendarView = require('web.CalendarView');
 var CalendarRenderer = require('web.CalendarRenderer');
 var Dialog = require('web.Dialog');
@@ -13,6 +14,8 @@ var mixins = require('web.mixins');
 var testUtils = require('web.test_utils');
 var session = require('web.session');
 const Widget = require('web.Widget');
+const { registry } = require('@web/core/registry');
+const legacyViewRegistry = require('web.view_registry');
 
 const { getFixture, patchWithCleanup } = require("@web/../tests/helpers/utils");
 
@@ -46,6 +49,10 @@ QUnit.module('LegacyViews', {
         patchWithCleanup(session, {
             uid: -1
         });
+        registry.category("views").remove("calendar"); // remove new calendar from registry
+        registry.category("views").remove("form"); // remove new form from registry
+        legacyViewRegistry.add("calendar", CalendarView); // add legacy calendar -> will be wrapped and added to new registry
+        legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
         this.data = {
             event: {
                 fields: {
@@ -201,7 +208,7 @@ QUnit.module('LegacyViews', {
             },
         });
 
-        assert.ok(calendar.$('.o_calendar_view').find('.fc-view-container').length,
+        assert.ok(calendar.$('.o_legacy_calendar_view').find('.fc-view-container').length,
             "should instance of fullcalendar");
 
         var $sidebar = calendar.$('.o_calendar_sidebar');
@@ -3762,7 +3769,7 @@ QUnit.module('LegacyViews', {
                 initialDate: initDate,
             },
         });
-        assert.ok(calendar.$('.o_calendar_view').find('.fc-view-container').length, "should display in the calendar"); // OK
+        assert.ok(calendar.$('.o_legacy_calendar_view').find('.fc-view-container').length, "should display in the calendar"); // OK
         // Testing the order of the events: by start date
         assert.strictEqual(calendar.$('.o_event_title').length, 3, "3 events should be available"); // OK
         assert.strictEqual(calendar.$('.o_event_title').first().text(), 'First event', "First event should be on top");
diff --git a/addons/web/static/tests/mobile/helpers.js b/addons/web/static/tests/mobile/helpers.js
index 8ec398d5b52..897686d83ce 100644
--- a/addons/web/static/tests/mobile/helpers.js
+++ b/addons/web/static/tests/mobile/helpers.js
@@ -56,3 +56,69 @@ export async function swipeRight(target, selector) {
 export async function swipeLeft(target, selector) {
     return swipe(target, selector, "left");
 }
+
+/**
+ * Simulate a "TAP" (touch) on the target element with the given selector.
+ *
+ * @param {HTMLElement} target
+ * @param {DOMSelector} [selector]
+ * @returns {Promise}
+ */
+export async function tap(target, selector) {
+    const touchTarget = findElement(target, selector);
+    const box = touchTarget.getBoundingClientRect();
+    const x = box.left + box.width / 2;
+    const y = box.top + box.height / 2;
+    const touch = {
+        identifier: 0,
+        target: touchTarget,
+        clientX: x,
+        clientY: y,
+        pageX: x,
+        pageY: y,
+    };
+    await triggerEvent(touchTarget, null, "touchstart", {
+        touches: [touch],
+    });
+    await triggerEvent(touchTarget, null, "touchend", {});
+}
+
+/**
+ * Simulate a "TAP" (touch) on the target element with the given selector.
+ *
+ * @param {HTMLElement} target
+ * @param {DOMSelector} startSelector
+ * @param {DOMSelector} endSelector
+ * @param {{start: "center"|"top", end: "center"|"bottom"}} [positions]
+ *  Specify where the touches will occur in the start and end elements.
+ * @returns {Promise}
+ */
+export async function tapAndMove(
+    target,
+    startSelector,
+    endSelector,
+    positions = { start: "center", end: "center" }
+) {
+    const startTarget = findElement(target, startSelector);
+    const startBox = startTarget.getBoundingClientRect();
+
+    const touch = {
+        identifier: 0,
+        target: startTarget,
+        pageX: startBox.x + startBox.width / 2,
+        pageY: positions.start === "center" ? startBox.y + startBox.height / 2 : startBox.y + 1,
+    };
+    await triggerEvent(startTarget, null, "touchstart", {
+        touches: [touch],
+    });
+    const endTarget = findElement(target, endSelector);
+    const endBox = endTarget.getBoundingClientRect();
+    touch.pageX = endBox.x + endBox.width / 2;
+    touch.pageY = positions.end === "center" ? endBox.y + endBox.height / 2 : endBox.y - 1;
+    await triggerEvent(startTarget, null, "touchmove", {
+        touches: [touch],
+    });
+    await triggerEvent(startTarget, null, "touchend", {
+        touches: [touch],
+    });
+}
diff --git a/addons/web/static/tests/mobile/views/calendar_view_tests.js b/addons/web/static/tests/mobile/views/calendar_view_tests.js
new file mode 100644
index 00000000000..9987b1f76a0
--- /dev/null
+++ b/addons/web/static/tests/mobile/views/calendar_view_tests.js
@@ -0,0 +1,396 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { CalendarCommonRenderer } from "@web/views/calendar/calendar_common/calendar_common_renderer";
+import { CalendarYearRenderer } from "@web/views/calendar/calendar_year/calendar_year_renderer";
+import { click, getFixture, nextTick, patchDate, patchWithCleanup } from "../../helpers/utils";
+import { changeScale, clickEvent, toggleSectionFilter } from "../../views/calendar/helpers";
+import { makeView, setupViewRegistries } from "../../views/helpers";
+import { tap, swipeRight, tapAndMove } from "../helpers";
+
+let target;
+let serverData;
+
+QUnit.module("Views", ({ beforeEach }) => {
+    beforeEach(() => {
+        // 2016-12-12 08:00:00
+        patchDate(2016, 11, 12, 8, 0, 0);
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout: () => {},
+        });
+
+        target = getFixture();
+
+        setupViewRegistries();
+
+        serverData = {
+            models: {
+                event: {
+                    fields: {
+                        id: { string: "ID", type: "integer" },
+                        name: { string: "name", type: "char" },
+                        start: { string: "start datetime", type: "datetime" },
+                        stop: { string: "stop datetime", type: "datetime" },
+                        partner_id: {
+                            string: "user",
+                            type: "many2one",
+                            relation: "partner",
+                            related: "user_id.partner_id",
+                            default: 1,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            partner_id: 1,
+                            name: "event 1",
+                            start: "2016-12-11 00:00:00",
+                            stop: "2016-12-11 00:00:00",
+                        },
+                        {
+                            id: 2,
+                            partner_id: 2,
+                            name: "event 2",
+                            start: "2016-12-12 10:55:05",
+                            stop: "2016-12-12 14:55:05",
+                        },
+                    ],
+                    methods: {
+                        check_access_rights() {
+                            return Promise.resolve(true);
+                        },
+                    },
+                },
+                partner: {
+                    fields: {
+                        id: { string: "ID", type: "integer" },
+                        image: { string: "Image", type: "binary" },
+                        display_name: { string: "Displayed name", type: "char" },
+                    },
+                    records: [
+                        { id: 1, display_name: "partner 1", image: "AAA" },
+                        { id: 2, display_name: "partner 2", image: "BBB" },
+                    ],
+                },
+            },
+        };
+    });
+
+    QUnit.module("CalendarView - Mobile");
+
+    QUnit.test("simple calendar rendering in mobile", async function (assert) {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            arch: `
+                <calendar date_start="start" date_stop="stop">
+                    <field name="name"/>
+                </calendar>`,
+            serverData,
+        });
+
+        assert.containsNone(target, ".o_calendar_button_prev", "prev button should be hidden");
+        assert.containsNone(target, ".o_calendar_button_next", "next button should be hidden");
+        assert.isVisible(
+            target.querySelector(
+                ".o_cp_bottom_left .o_calendar_buttons .o_calendar_scale_buttons + button.o_cp_today_button"
+            ),
+            "today button should be visible near the calendar buttons (bottom left corner)"
+        );
+
+        // Test all views
+        // displays month mode by default
+        assert.containsOnce(
+            target,
+            ".fc-view-container > .fc-timeGridWeek-view",
+            "should display the current week"
+        );
+        assert.equal(
+            target.querySelector(".breadcrumb-item").textContent,
+            "undefined (Dec 11 – 17, 2016)"
+        );
+
+        // switch to day mode
+        await click(target, ".o_control_panel .scale_button_selection");
+        await click(target, ".o_control_panel .o_calendar_button_day");
+        await nextTick();
+        assert.containsOnce(
+            target,
+            ".fc-view-container > .fc-timeGridDay-view",
+            "should display the current day"
+        );
+        assert.equal(
+            target.querySelector(".breadcrumb-item").textContent,
+            "undefined (December 12, 2016)"
+        );
+
+        // switch to month mode
+        await click(target, ".o_control_panel .scale_button_selection");
+        await click(target, ".o_control_panel .o_calendar_button_month");
+        await nextTick();
+        assert.containsOnce(
+            target,
+            ".fc-view-container > .fc-dayGridMonth-view",
+            "should display the current month"
+        );
+        assert.equal(
+            target.querySelector(".breadcrumb-item").textContent,
+            "undefined (December 2016)"
+        );
+
+        // switch to year mode
+        await click(target, ".o_control_panel .scale_button_selection");
+        await click(target, ".o_control_panel .o_calendar_button_year");
+        await nextTick();
+        assert.containsOnce(
+            target,
+            ".fc-view-container > .fc-dayGridYear-view",
+            "should display the current year"
+        );
+        assert.equal(target.querySelector(".breadcrumb-item").textContent, "undefined (2016)");
+    });
+
+    QUnit.test("calendar: popover is rendered as dialog in mobile", async function (assert) {
+        // Legacy name of this test: "calendar: popover rendering in mobile"
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop">
+                    <field name="name"/>
+                </calendar>`,
+        });
+
+        await clickEvent(target, 1);
+        assert.containsNone(target, ".o_cw_popover");
+        assert.containsOnce(target, ".modal");
+        assert.hasClass(target.querySelector(".modal"), "o_modal_full");
+
+        assert.containsN(target, ".modal-footer .btn", 2);
+        assert.containsOnce(target, ".modal-footer .btn.btn-primary.o_cw_popover_edit");
+        assert.containsOnce(target, ".modal-footer .btn.btn-secondary.o_cw_popover_delete");
+    });
+
+    QUnit.test("calendar: today button", async function (assert) {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `<calendar mode="day" date_start="start" date_stop="stop"></calendar>`,
+        });
+        assert.equal(target.querySelector(".fc-day-header[data-date]").dataset.date, "2016-12-12");
+
+        // Swipe right
+        await swipeRight(target, ".o_calendar_widget");
+        assert.equal(target.querySelector(".fc-day-header[data-date]").dataset.date, "2016-12-11");
+
+        await click(target, ".o_calendar_button_today");
+        assert.equal(target.querySelector(".fc-day-header[data-date]").dataset.date, "2016-12-12");
+    });
+
+    QUnit.test("calendar: show and change other calendar", async function (assert) {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" color="partner_id">
+                    <filter name="user_id" avatar_field="image"/>
+                    <field name="partner_id" filters="1" invisible="1"/>
+                </calendar>`,
+        });
+
+        assert.containsOnce(target, ".o_other_calendar_panel");
+        assert.containsN(
+            target,
+            ".o_other_calendar_panel .o_filter > *",
+            3,
+            "should contains 3 child nodes -> 1 label (USER) + 2 resources (user 1/2)"
+        );
+        assert.containsNone(target, ".o_calendar_sidebar");
+        assert.containsOnce(target, ".o_calendar_renderer");
+
+        // Toggle the other calendar panel should hide the calendar view and show the sidebar
+        await click(target, ".o_other_calendar_panel");
+        assert.containsOnce(target, ".o_calendar_sidebar");
+        assert.containsNone(target, ".o_calendar_renderer");
+        assert.containsOnce(target, ".o_calendar_filter");
+        assert.containsOnce(target, ".o_calendar_filter[data-name=partner_id]");
+
+        // Toggle the whole section filters by unchecking the all items checkbox
+        await toggleSectionFilter(target, "partner_id");
+        assert.containsN(
+            target,
+            ".o_other_calendar_panel .o_filter > *",
+            1,
+            "should contains 1 child node -> 1 label (USER)"
+        );
+
+        // Toggle again the other calendar panel should hide the sidebar and show the calendar view
+        await click(target, ".o_other_calendar_panel");
+        assert.containsNone(target, ".o_calendar_sidebar");
+        assert.containsOnce(target, ".o_calendar_renderer");
+    });
+
+    QUnit.test('calendar: tap on "Free Zone" opens quick create', async function (assert) {
+        patchWithCleanup(CalendarCommonRenderer.prototype, {
+            onDateClick(...args) {
+                assert.step("dateClick");
+                return this._super(...args);
+            },
+            onSelect(...args) {
+                assert.step("select");
+                return this._super(...args);
+            },
+        });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `<calendar mode="day" date_start="start" date_stop="stop"/>`,
+        });
+
+        // Simulate a "TAP" (touch)
+        await tap(
+            target,
+            ".fc-time-grid .fc-minor[data-time='00:30:00'] .fc-widget-content:last-child"
+        );
+        await nextTick();
+
+        // should open a Quick create modal view in mobile on short tap
+        assert.containsOnce(target, ".modal");
+        assert.verifySteps(["dateClick"]);
+    });
+
+    QUnit.test('calendar: select range on "Free Zone" opens quick create', async function (assert) {
+        patchWithCleanup(CalendarCommonRenderer.prototype, {
+            get options() {
+                return Object.assign({}, this._super(), {
+                    selectLongPressDelay: 0,
+                });
+            },
+            onDateClick(info) {
+                assert.step("dateClick");
+                return this._super(info);
+            },
+            onSelect(info) {
+                assert.step("select");
+                const { startStr, endStr } = info;
+                assert.equal(startStr, "2016-12-12T01:00:00+01:00");
+                assert.equal(endStr, "2016-12-12T02:00:00+01:00");
+                return this._super(info);
+            },
+        });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `<calendar mode="day" date_start="start" date_stop="stop"/>`,
+        });
+
+        // Simulate a "TAP" (touch)
+        await tapAndMove(
+            target,
+            ".fc-time-grid [data-time='01:00:00'] .fc-widget-content:last-child",
+            ".fc-time-grid [data-time='02:00:00'] .fc-widget-content:last-child",
+            { start: "top", end: "bottom" }
+        );
+        await nextTick();
+
+        // should open a Quick create modal view in mobile on short tap
+        assert.containsOnce(target, ".modal");
+        assert.verifySteps(["select"]);
+    });
+
+    QUnit.test("calendar (year): select date range opens quick create", async function (assert) {
+        patchWithCleanup(CalendarYearRenderer.prototype, {
+            get options() {
+                return Object.assign({}, this._super(), {
+                    longPressDelay: 0,
+                    selectLongPressDelay: 0,
+                });
+            },
+            onDateClick(info) {
+                assert.step("dateClick");
+                return this._super(info);
+            },
+            onSelect(info) {
+                assert.step("select");
+                const { startStr, endStr } = info;
+                assert.equal(startStr, "2016-02-02");
+                assert.equal(endStr, "2016-02-06"); // end date is exclusive
+                return this._super(info);
+            },
+        });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `<calendar mode="year" date_start="start" date_stop="stop"/>`,
+        });
+
+        // Tap on a date
+        await tapAndMove(
+            target,
+            ".fc-day-top[data-date='2016-02-02']",
+            ".fc-day-top[data-date='2016-02-05']"
+        );
+        await nextTick();
+
+        // should open a Quick create modal view in mobile on short tap
+        assert.containsOnce(target, ".modal");
+        assert.verifySteps(["select"]);
+    });
+
+    QUnit.test("calendar (month/year): tap on date switch to day scale", async function (assert) {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `<calendar mode="year" date_start="start" date_stop="stop"/>`,
+        });
+
+        // Should display year view
+        assert.containsOnce(target, ".fc-dayGridYear-view");
+        assert.containsN(target, ".fc-month-container", 12);
+        assert.equal(target.querySelector(".breadcrumb-item").textContent, "undefined (2016)");
+
+        // Tap on a date
+        await tap(target, ".fc-day-top[data-date='2016-02-05']");
+        await nextTick(); // switch renderer
+        await nextTick(); // await breadcrumb update
+
+        // Should display day view
+        assert.containsNone(target, ".fc-dayGridYear-view");
+        assert.containsOnce(target, ".fc-timeGridDay-view");
+        assert.equal(
+            target.querySelector(".breadcrumb-item").textContent,
+            "undefined (February 5, 2016)"
+        );
+
+        // Change scale to month
+        await changeScale(target, "month");
+        assert.containsNone(target, ".fc-timeGridDay-view");
+        assert.containsOnce(target, ".fc-dayGridMonth-view");
+        assert.equal(
+            target.querySelector(".breadcrumb-item").textContent,
+            "undefined (February 2016)"
+        );
+
+        // Tap on a date
+        await tap(target, ".fc-day-top[data-date='2016-02-10']");
+        await nextTick(); // await breadcrumb update
+
+        assert.containsNone(target, ".fc-dayGridMonth-view");
+        assert.containsOnce(target, ".fc-timeGridDay-view");
+        assert.equal(
+            target.querySelector(".breadcrumb-item").textContent,
+            "undefined (February 10, 2016)"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/calendar/calendar_arch_parser_tests.js b/addons/web/static/tests/views/calendar/calendar_arch_parser_tests.js
new file mode 100644
index 00000000000..a5956340fb8
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/calendar_arch_parser_tests.js
@@ -0,0 +1,169 @@
+/** @odoo-module **/
+
+import { CalendarArchParser } from "@web/views/calendar/calendar_arch_parser";
+import { FAKE_FIELDS } from "./helpers";
+
+function parseArch(arch, options = {}) {
+    const parser = new CalendarArchParser();
+    return parser.parse(arch, { fake: "fields" in options ? options.fields : FAKE_FIELDS }, "fake");
+}
+
+function check(assert, paramName, paramValue, expectedName, expectedValue) {
+    const arch = `<calendar date_start="start_date" ${paramName}="${paramValue}" />`;
+    const data = parseArch(arch);
+    assert.strictEqual(data[expectedName], expectedValue);
+}
+
+QUnit.module("CalendarView - ArchParser");
+
+QUnit.test("throw if date_start is not set", (assert) => {
+    assert.throws(() => {
+        parseArch(`<calendar />`);
+    });
+});
+
+QUnit.test("defaults", (assert) => {
+    assert.deepEqual(parseArch(`<calendar date_start="start_date" />`), {
+        canCreate: true,
+        canDelete: true,
+        eventLimit: 5,
+        fieldMapping: {
+            date_start: "start_date",
+        },
+        fieldNames: ["start_date"],
+        filtersInfo: {},
+        formViewId: false,
+        hasEditDialog: false,
+        hasQuickCreate: true,
+        isDateHidden: false,
+        isTimeHidden: false,
+        popoverFields: {},
+        scale: "week",
+        scales: ["day", "week", "month", "year"],
+        showUnusualDays: false,
+    });
+});
+
+QUnit.test("canCreate", (assert) => {
+    check(assert, "create", "", "canCreate", true);
+    check(assert, "create", "true", "canCreate", true);
+    check(assert, "create", "True", "canCreate", true);
+    check(assert, "create", "1", "canCreate", true);
+    check(assert, "create", "false", "canCreate", false);
+    check(assert, "create", "False", "canCreate", false);
+    check(assert, "create", "0", "canCreate", false);
+});
+
+QUnit.test("canDelete", (assert) => {
+    check(assert, "delete", "", "canDelete", true);
+    check(assert, "delete", "true", "canDelete", true);
+    check(assert, "delete", "True", "canDelete", true);
+    check(assert, "delete", "1", "canDelete", true);
+    check(assert, "delete", "false", "canDelete", false);
+    check(assert, "delete", "False", "canDelete", false);
+    check(assert, "delete", "0", "canDelete", false);
+});
+
+QUnit.test("eventLimit", (assert) => {
+    check(assert, "event_limit", "2", "eventLimit", 2);
+    check(assert, "event_limit", "5", "eventLimit", 5);
+
+    assert.throws(() => {
+        parseArch(`<calendar date_start="start_date" event_limit="five" />`);
+    });
+
+    assert.throws(() => {
+        parseArch(`<calendar date_start="start_date" event_limit="" />`);
+    });
+});
+
+QUnit.test("hasEditDialog", (assert) => {
+    check(assert, "event_open_popup", "", "hasEditDialog", false);
+    check(assert, "event_open_popup", "true", "hasEditDialog", true);
+    check(assert, "event_open_popup", "True", "hasEditDialog", true);
+    check(assert, "event_open_popup", "1", "hasEditDialog", true);
+    check(assert, "event_open_popup", "false", "hasEditDialog", false);
+    check(assert, "event_open_popup", "False", "hasEditDialog", false);
+    check(assert, "event_open_popup", "0", "hasEditDialog", false);
+});
+
+QUnit.test("hasQuickCreate", (assert) => {
+    check(assert, "quick_add", "", "hasQuickCreate", true);
+    check(assert, "quick_add", "true", "hasQuickCreate", true);
+    check(assert, "quick_add", "True", "hasQuickCreate", true);
+    check(assert, "quick_add", "1", "hasQuickCreate", true);
+    check(assert, "quick_add", "false", "hasQuickCreate", false);
+    check(assert, "quick_add", "False", "hasQuickCreate", false);
+    check(assert, "quick_add", "0", "hasQuickCreate", false);
+});
+
+QUnit.test("isDateHidden", (assert) => {
+    check(assert, "hide_date", "", "isDateHidden", false);
+    check(assert, "hide_date", "true", "isDateHidden", true);
+    check(assert, "hide_date", "True", "isDateHidden", true);
+    check(assert, "hide_date", "1", "isDateHidden", true);
+    check(assert, "hide_date", "false", "isDateHidden", false);
+    check(assert, "hide_date", "False", "isDateHidden", false);
+    check(assert, "hide_date", "0", "isDateHidden", false);
+});
+
+QUnit.test("isTimeHidden", (assert) => {
+    check(assert, "hide_time", "", "isTimeHidden", false);
+    check(assert, "hide_time", "true", "isTimeHidden", true);
+    check(assert, "hide_time", "True", "isTimeHidden", true);
+    check(assert, "hide_time", "1", "isTimeHidden", true);
+    check(assert, "hide_time", "false", "isTimeHidden", false);
+    check(assert, "hide_time", "False", "isTimeHidden", false);
+    check(assert, "hide_time", "0", "isTimeHidden", false);
+});
+
+QUnit.test("scale", (assert) => {
+    check(assert, "mode", "day", "scale", "day");
+    check(assert, "mode", "week", "scale", "week");
+    check(assert, "mode", "month", "scale", "month");
+    check(assert, "mode", "year", "scale", "year");
+    assert.throws(() => {
+        parseArch(`<calendar date_start="start_date" mode="other" />`);
+    });
+
+    assert.throws(() => {
+        parseArch(`<calendar date_start="start_date" mode="" />`);
+    });
+});
+
+QUnit.test("scales", (assert) => {
+    function check(scales, expectedScales) {
+        const arch = `<calendar date_start="start_date" scales="${scales}" />`;
+        const data = parseArch(arch);
+        assert.deepEqual(data.scales, expectedScales);
+    }
+
+    check("", []);
+
+    check("day", ["day"]);
+    check("day,week", ["day", "week"]);
+    check("day,week,month", ["day", "week", "month"]);
+    check("day,week,month,year", ["day", "week", "month", "year"]);
+    check("week", ["week"]);
+    check("week,month", ["week", "month"]);
+    check("week,month,year", ["week", "month", "year"]);
+    check("month", ["month"]);
+    check("month,year", ["month", "year"]);
+    check("year", ["year"]);
+
+    check("year,day,month,week", ["year", "day", "month", "week"]);
+
+    assert.throws(() => {
+        parseArch(`<calendar date_start="start_date" scales="month" mode="day" />`);
+    });
+});
+
+QUnit.test("showUnusualDays", (assert) => {
+    check(assert, "show_unusual_days", "", "showUnusualDays", false);
+    check(assert, "show_unusual_days", "true", "showUnusualDays", true);
+    check(assert, "show_unusual_days", "True", "showUnusualDays", true);
+    check(assert, "show_unusual_days", "1", "showUnusualDays", true);
+    check(assert, "show_unusual_days", "false", "showUnusualDays", false);
+    check(assert, "show_unusual_days", "False", "showUnusualDays", false);
+    check(assert, "show_unusual_days", "0", "showUnusualDays", false);
+});
diff --git a/addons/web/static/tests/views/calendar/calendar_common_popover_tests.js b/addons/web/static/tests/views/calendar/calendar_common_popover_tests.js
new file mode 100644
index 00000000000..93353d6317f
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/calendar_common_popover_tests.js
@@ -0,0 +1,222 @@
+/** @odoo-module **/
+
+import { CalendarCommonPopover } from "@web/views/calendar/calendar_common/calendar_common_popover";
+import { click, getFixture } from "../../helpers/utils";
+import { makeEnv, makeFakeDate, makeFakeModel, mountComponent } from "./helpers";
+
+let target;
+
+function makeFakeRecord(data = {}) {
+    return {
+        id: 5,
+        title: "Meeting",
+        isAllDay: false,
+        start: makeFakeDate(),
+        end: makeFakeDate().plus({ hours: 3, minutes: 15 }),
+        colorIndex: 0,
+        isTimeHidden: false,
+        rawRecord: {
+            name: "Meeting",
+        },
+        ...data,
+    };
+}
+
+async function start(params = {}) {
+    const { services, props, model: modelParams } = params;
+    const env = await makeEnv(services);
+    const model = makeFakeModel(modelParams);
+    return await mountComponent(CalendarCommonPopover, env, {
+        model,
+        record: makeFakeRecord(),
+        createRecord() {},
+        deleteRecord() {},
+        editRecord() {},
+        close() {},
+        ...props,
+    });
+}
+
+/** @todo Add tests for fields **/
+
+QUnit.module("CalendarView - CommonPopover", ({ beforeEach }) => {
+    beforeEach(() => {
+        target = getFixture();
+    });
+
+    QUnit.test("mount a CalendarCommonPopover", async (assert) => {
+        await start({});
+        assert.containsOnce(target, ".popover-header");
+        assert.strictEqual(target.querySelector(".popover-header").textContent, "Meeting");
+        assert.containsN(target, ".list-group", 2);
+        assert.containsOnce(target, ".list-group.o_cw_popover_fields_secondary");
+        assert.containsOnce(target, ".card-footer .o_cw_popover_edit");
+        assert.containsOnce(target, ".card-footer .o_cw_popover_delete");
+    });
+
+    QUnit.test("date duration: is all day and is same day", async (assert) => {
+        await start({
+            props: {
+                record: makeFakeRecord({ isAllDay: true, isTimeHidden: true }),
+            },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(dateTimeLabels, "Friday, July 16, 2021 (All day)");
+    });
+
+    QUnit.test("date duration: is all day and two days duration", async (assert) => {
+        await start({
+            props: {
+                record: makeFakeRecord({
+                    end: makeFakeDate().plus({ days: 1 }),
+                    isAllDay: true,
+                    isTimeHidden: true,
+                }),
+            },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(dateTimeLabels, "July 16-17, 2021 (2 days)");
+    });
+
+    QUnit.test("time duration: 1 hour diff", async (assert) => {
+        await start({
+            props: {
+                record: makeFakeRecord({ end: makeFakeDate().plus({ hours: 1 }) }),
+            },
+            model: { isDateHidden: true },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(dateTimeLabels, "08:00 - 09:00 (1 hour)");
+    });
+
+    QUnit.test("time duration: 2 hours diff", async (assert) => {
+        await start({
+            props: {
+                record: makeFakeRecord({ end: makeFakeDate().plus({ hours: 2 }) }),
+            },
+            model: { isDateHidden: true },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(dateTimeLabels, "08:00 - 10:00 (2 hours)");
+    });
+
+    QUnit.test("time duration: 1 minute diff", async (assert) => {
+        await start({
+            props: {
+                record: makeFakeRecord({ end: makeFakeDate().plus({ minutes: 1 }) }),
+            },
+            model: { isDateHidden: true },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(dateTimeLabels, "08:00 - 08:01 (1 minute)");
+    });
+
+    QUnit.test("time duration: 2 minutes diff", async (assert) => {
+        await start({
+            props: {
+                record: makeFakeRecord({ end: makeFakeDate().plus({ minutes: 2 }) }),
+            },
+            model: { isDateHidden: true },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(dateTimeLabels, "08:00 - 08:02 (2 minutes)");
+    });
+
+    QUnit.test("time duration: 3 hours and 15 minutes diff", async (assert) => {
+        await start({
+            model: { isDateHidden: true },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(dateTimeLabels, "08:00 - 11:15 (3 hours, 15 minutes)");
+    });
+
+    QUnit.test("isDateHidden is true", async (assert) => {
+        await start({
+            model: { isDateHidden: true },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(dateTimeLabels, "08:00 - 11:15 (3 hours, 15 minutes)");
+    });
+
+    QUnit.test("isDateHidden is false", async (assert) => {
+        await start({
+            model: { isDateHidden: false },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(
+            dateTimeLabels,
+            "Friday, July 16, 2021 08:00 - 11:15 (3 hours, 15 minutes)"
+        );
+    });
+
+    QUnit.test("isTimeHidden is true", async (assert) => {
+        await start({
+            props: {
+                record: makeFakeRecord({ isTimeHidden: true }),
+            },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(dateTimeLabels, "Friday, July 16, 2021");
+    });
+
+    QUnit.test("isTimeHidden is false", async (assert) => {
+        await start({
+            props: {
+                record: makeFakeRecord({ isTimeHidden: false }),
+            },
+        });
+        const dateTimeGroup = target.querySelector(`.list-group`);
+        const dateTimeLabels = dateTimeGroup.textContent.replace(/\s+/g, " ").trim();
+        assert.strictEqual(
+            dateTimeLabels,
+            "Friday, July 16, 2021 08:00 - 11:15 (3 hours, 15 minutes)"
+        );
+    });
+
+    QUnit.test("canDelete is true", async (assert) => {
+        await start({
+            model: { canDelete: true },
+        });
+        assert.containsOnce(target, ".o_cw_popover_delete");
+    });
+
+    QUnit.test("canDelete is false", async (assert) => {
+        await start({
+            model: { canDelete: false },
+        });
+        assert.containsNone(target, ".o_cw_popover_delete");
+    });
+
+    QUnit.test("click on delete button", async (assert) => {
+        assert.expect(2);
+        await start({
+            model: { canDelete: true },
+            props: {
+                deleteRecord: () => assert.step("delete"),
+            },
+        });
+        await click(target, ".o_cw_popover_delete");
+        assert.verifySteps(["delete"]);
+    });
+
+    QUnit.test("click on edit button", async (assert) => {
+        assert.expect(2);
+        await start({
+            props: {
+                editRecord: () => assert.step("edit"),
+            },
+        });
+        await click(target, ".o_cw_popover_edit");
+        assert.verifySteps(["edit"]);
+    });
+});
diff --git a/addons/web/static/tests/views/calendar/calendar_common_renderer_tests.js b/addons/web/static/tests/views/calendar/calendar_common_renderer_tests.js
new file mode 100644
index 00000000000..aa2e71980a2
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/calendar_common_renderer_tests.js
@@ -0,0 +1,162 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { CalendarCommonRenderer } from "@web/views/calendar/calendar_common/calendar_common_renderer";
+import { getFixture, patchWithCleanup } from "../../helpers/utils";
+import {
+    makeEnv,
+    makeFakeModel,
+    mountComponent,
+    clickAllDaySlot,
+    selectTimeRange,
+    clickEvent,
+    makeFakeDate,
+} from "./helpers";
+
+let target;
+
+function makeFakePopoverService(add) {
+    return { start: () => ({ add }) };
+}
+
+async function start(params = {}) {
+    const { services, props, model: modelParams } = params;
+    const env = await makeEnv(services);
+    const model = makeFakeModel(modelParams);
+    return await mountComponent(CalendarCommonRenderer, env, {
+        model,
+        createRecord() {},
+        deleteRecord() {},
+        editRecord() {},
+        displayName: "Plop",
+        ...props,
+    });
+}
+
+QUnit.module("CalendarView - CommonRenderer", ({ beforeEach }) => {
+    beforeEach(() => {
+        target = getFixture();
+    });
+
+    QUnit.test("mount a CalendarCommonRenderer", async (assert) => {
+        await start({});
+        assert.containsOnce(target, ".o_calendar_widget.fc");
+    });
+
+    QUnit.test("Day: mount a CalendarCommonRenderer", async (assert) => {
+        await start({ model: { scale: "day" } });
+        assert.containsOnce(target, ".o_calendar_widget.fc .fc-timeGridDay-view");
+    });
+
+    QUnit.test("Week: mount a CalendarCommonRenderer", async (assert) => {
+        await start({ model: { scale: "week" } });
+        assert.containsOnce(target, ".o_calendar_widget.fc .fc-timeGridWeek-view");
+    });
+
+    QUnit.test("Month: mount a CalendarCommonRenderer", async (assert) => {
+        await start({ model: { scale: "month" } });
+        assert.containsOnce(target, ".o_calendar_widget.fc .fc-dayGridMonth-view");
+    });
+
+    QUnit.test("Day: check week number", async (assert) => {
+        await start({ model: { scale: "day" } });
+        assert.containsOnce(target, ".fc-week-number");
+        assert.strictEqual(target.querySelector(".fc-week-number").textContent, "Week 28");
+    });
+
+    QUnit.test("Day: check date", async (assert) => {
+        await start({ model: { scale: "day" } });
+        assert.containsOnce(target, ".fc-day-header");
+        assert.strictEqual(target.querySelector(".fc-day-header").textContent, "July 16, 2021");
+    });
+
+    QUnit.test("Day: click all day slot", async (assert) => {
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout() {},
+        });
+
+        await start({
+            model: { scale: "day" },
+            props: {
+                createRecord(record) {
+                    const date = makeFakeDate().startOf("day");
+                    assert.ok(record.isAllDay);
+                    assert.strictEqual(record.start.valueOf(), date.valueOf());
+                    assert.step("create");
+                },
+            },
+        });
+
+        await clickAllDaySlot(target, "2021-07-16");
+        assert.verifySteps(["create"]);
+    });
+
+    QUnit.test("Day: select range", async (assert) => {
+        await start({
+            model: { scale: "day" },
+            props: {
+                createRecord(record) {
+                    assert.notOk(record.isAllDay);
+                    assert.strictEqual(
+                        record.start.valueOf(),
+                        luxon.DateTime.local(2021, 7, 16, 8, 0).valueOf()
+                    );
+                    assert.strictEqual(
+                        record.end.valueOf(),
+                        luxon.DateTime.local(2021, 7, 16, 10, 0).valueOf()
+                    );
+                    assert.step("create");
+                },
+            },
+        });
+
+        await selectTimeRange(target, "2021-07-16 08:00:00", "2021-07-16 10:00:00");
+        assert.verifySteps(["create"]);
+    });
+
+    QUnit.test("Day: check event", async (assert) => {
+        await start({ model: { scale: "day" } });
+        assert.containsOnce(target, ".o_event");
+        assert.hasAttrValue(target.querySelector(".o_event"), "data-event-id", "1");
+    });
+
+    QUnit.test("Day: click on event", async (assert) => {
+        assert.expect(1);
+
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout() {},
+        });
+
+        await start({
+            model: { scale: "day" },
+            services: {
+                popover: makeFakePopoverService((target, _, props) => {
+                    assert.strictEqual(props.record.id, 1);
+                    return () => {};
+                }),
+            },
+        });
+
+        await clickEvent(target, 1);
+    });
+
+    QUnit.test("Week: check week number", async (assert) => {
+        await start({ model: { scale: "week" } });
+        assert.containsOnce(target, ".fc-week-number");
+        assert.strictEqual(target.querySelector(".fc-week-number").textContent, "Week 28");
+    });
+
+    QUnit.test("Week: check dates", async (assert) => {
+        await start({ model: { scale: "week" } });
+        assert.containsN(target, ".fc-day-header", 7);
+
+        const dates = ["Sun 11", "Mon 12", "Tue 13", "Wed 14", "Thu 15", "Fri 16", "Sat 17"];
+
+        const els = target.querySelectorAll(".fc-day-header");
+        for (let i = 0; i < els.length; i++) {
+            assert.strictEqual(els[i].textContent, dates[i]);
+        }
+    });
+});
diff --git a/addons/web/static/tests/views/calendar/calendar_date_picker_tests.js b/addons/web/static/tests/views/calendar/calendar_date_picker_tests.js
new file mode 100644
index 00000000000..df703120b55
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/calendar_date_picker_tests.js
@@ -0,0 +1,117 @@
+/** @odoo-module **/
+
+import { CalendarDatePicker } from "@web/views/calendar/date_picker/calendar_date_picker";
+import { click, getFixture, patchDate } from "../../helpers/utils";
+import { makeEnv, makeFakeModel, mountComponent } from "./helpers";
+
+let target;
+
+async function start(params = {}) {
+    const { services, props, model: modelParams } = params;
+    const env = await makeEnv(services);
+    const model = makeFakeModel(modelParams);
+    return await mountComponent(CalendarDatePicker, env, {
+        model,
+        ...props,
+    });
+}
+
+QUnit.module("CalendarView - DatePicker", ({ beforeEach }) => {
+    beforeEach(() => {
+        target = getFixture();
+        patchDate(2021, 7, 14, 8, 0, 0);
+    });
+
+    QUnit.test("Mount a CalendarDatePicker", async (assert) => {
+        await start({ model: { scale: "day" } });
+        assert.containsOnce(target, ".o_calendar_mini.hasDatepicker");
+        assert.strictEqual(target.querySelector(".o_selected_range").textContent, "16");
+        assert.containsOnce(target, `[data-month="6"][data-year="2021"] .o_selected_range`);
+        assert.strictEqual(target.querySelector(".ui-datepicker-month").textContent, "Jul");
+        assert.strictEqual(target.querySelector(".ui-datepicker-year").textContent, "2021");
+        assert.strictEqual(target.querySelector("thead").textContent, "SMTWTFS");
+    });
+
+    QUnit.test("Scale: init with day", async (assert) => {
+        await start({ model: { scale: "day" } });
+        assert.containsOnce(target, ".o_selected_range");
+        assert.containsOnce(target, "a.o_selected_range");
+        assert.strictEqual(target.querySelector(".o_selected_range").textContent, "16");
+    });
+
+    QUnit.test("Scale: init with week", async (assert) => {
+        await start({ model: { scale: "week" } });
+        assert.containsOnce(target, ".o_selected_range");
+        assert.containsOnce(target, "tr.o_selected_range");
+        assert.hasClass(target.querySelector("tr.o_selected_range"), "o_color");
+        assert.strictEqual(target.querySelector(".o_selected_range").textContent, "11121314151617");
+    });
+
+    QUnit.test("Scale: init with month", async (assert) => {
+        await start({ model: { scale: "month" } });
+        assert.containsN(target, "td.o_selected_range", 35);
+    });
+
+    QUnit.test("Scale: init with year", async (assert) => {
+        await start({ model: { scale: "year" } });
+        assert.containsN(target, "td.o_selected_range", 35);
+    });
+
+    QUnit.test("First day: 0 = Sunday", async (assert) => {
+        await start({ model: { scale: "day", firstDayOfWeek: 0 } });
+        assert.strictEqual(target.querySelector("thead").textContent, "SMTWTFS");
+    });
+
+    QUnit.test("First day: 1 = Monday", async (assert) => {
+        await start({ model: { scale: "day", firstDayOfWeek: 1 } });
+        assert.strictEqual(target.querySelector("thead").textContent, "MTWTFSS");
+    });
+
+    QUnit.test("Click on active day should change scale : day -> month", async (assert) => {
+        assert.expect(2);
+
+        await start({
+            model: {
+                scale: "day",
+                load(params) {
+                    assert.strictEqual(params.scale, "month");
+                    assert.ok(params.date.equals(luxon.DateTime.local(2021, 7, 16)));
+                },
+            },
+        });
+
+        await click(target, ".ui-state-active");
+    });
+
+    QUnit.test("Click on active day should change scale : month -> week", async (assert) => {
+        assert.expect(2);
+
+        await start({
+            model: {
+                scale: "month",
+                load(params) {
+                    assert.strictEqual(params.scale, "week");
+                    assert.ok(params.date.equals(luxon.DateTime.local(2021, 7, 16)));
+                },
+            },
+        });
+
+        await click(target, ".ui-state-active");
+    });
+
+    QUnit.test("Click on active day should change scale : week -> day", async (assert) => {
+        assert.expect(2);
+
+        await start({
+            model: {
+                scale: "week",
+                load(params) {
+                    assert.strictEqual(params.scale, "day");
+                    assert.ok(params.date.equals(luxon.DateTime.local(2021, 7, 16)));
+                },
+            },
+        });
+
+        await click(target, ".ui-state-active");
+    });
+});
diff --git a/addons/web/static/tests/views/calendar/calendar_filter_panel_tests.js b/addons/web/static/tests/views/calendar/calendar_filter_panel_tests.js
new file mode 100644
index 00000000000..a2c86de8c4a
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/calendar_filter_panel_tests.js
@@ -0,0 +1,213 @@
+/** @odoo-module **/
+
+import { CalendarFilterPanel } from "@web/views/calendar/filter_panel/calendar_filter_panel";
+import { click, getFixture, triggerEvent } from "../../helpers/utils";
+import { makeEnv, makeFakeModel, mountComponent } from "./helpers";
+
+let target;
+
+async function start(params = {}) {
+    const { services, props, model: modelParams } = params;
+    const env = await makeEnv(services);
+    const model = makeFakeModel(modelParams);
+    return await mountComponent(CalendarFilterPanel, env, {
+        model,
+        ...props,
+    });
+}
+
+QUnit.module("CalendarView - FilterPanel", ({ beforeEach }) => {
+    beforeEach(() => {
+        target = getFixture();
+    });
+
+    QUnit.test("render filter panel", async (assert) => {
+        await start({});
+
+        assert.containsN(target, ".o_calendar_filter", 2);
+        const sections = target.querySelectorAll(".o_calendar_filter");
+
+        let header = sections[0].querySelector(".o_cw_filter_label");
+        assert.strictEqual(header.textContent, "Attendees");
+        assert.containsN(sections[0], ".o_calendar_filter_item", 4);
+
+        header = sections[1].querySelector(".o_cw_filter_label");
+        assert.strictEqual(header.textContent, "Users");
+        assert.containsN(sections[1], ".o_calendar_filter_item", 2);
+    });
+
+    QUnit.test("filters are correctly sorted", async (assert) => {
+        await start({});
+
+        assert.containsN(target, ".o_calendar_filter", 2);
+        const sections = target.querySelectorAll(".o_calendar_filter");
+
+        let header = sections[0].querySelector(".o_cw_filter_label");
+        assert.strictEqual(header.textContent, "Attendees");
+        assert.containsN(sections[0], ".o_calendar_filter_item", 4);
+        assert.strictEqual(
+            sections[0].textContent.trim(),
+            "AttendeesMitchell AdminMarc DemoBrandon FreemanEverybody's calendar"
+        );
+
+        header = sections[1].querySelector(".o_cw_filter_label");
+        assert.strictEqual(header.textContent, "Users");
+        assert.containsN(sections[1], ".o_calendar_filter_item", 2);
+        assert.strictEqual(sections[1].textContent.trim(), "UsersMarc DemoBrandon Freeman");
+    });
+
+    QUnit.test("section can collapse", async (assert) => {
+        await start({});
+
+        const section = target.querySelectorAll(".o_calendar_filter")[0];
+        assert.containsOnce(section, ".o_cw_filter_collapse_icon");
+        assert.containsN(section, ".o_calendar_filter_item", 4);
+
+        await click(section, ".o_cw_filter_label");
+        assert.containsNone(section, ".o_calendar_filter_item");
+
+        await click(section, ".o_cw_filter_label");
+        assert.containsN(section, ".o_calendar_filter_item", 4);
+    });
+
+    QUnit.test("section cannot collapse", async (assert) => {
+        await start({});
+
+        const section = target.querySelectorAll(".o_calendar_filter")[1];
+        assert.containsNone(section, ".o_cw_filter_label > i");
+        assert.doesNotHaveClass(section, "o_calendar_filter-collapsed");
+        assert.containsN(section, ".o_calendar_filter_item", 2);
+
+        await click(section, ".o_cw_filter_label");
+        assert.doesNotHaveClass(section, "o_calendar_filter-collapsed");
+        assert.containsN(section, ".o_calendar_filter_item", 2);
+    });
+
+    QUnit.test("filters can have avatar", async (assert) => {
+        await start({});
+
+        const section = target.querySelectorAll(".o_calendar_filter")[0];
+        const filters = section.querySelectorAll(".o_calendar_filter_item");
+
+        assert.containsN(section, ".o_cw_filter_avatar", 4);
+        assert.containsN(section, "img.o_cw_filter_avatar", 3);
+        assert.containsOnce(section, "i.o_cw_filter_avatar");
+
+        assert.hasAttrValue(
+            filters[0].querySelector(".o_cw_filter_avatar"),
+            "data-src",
+            "/web/image/res.partner/3/avatar_128"
+        );
+        assert.hasAttrValue(
+            filters[1].querySelector(".o_cw_filter_avatar"),
+            "data-src",
+            "/web/image/res.partner/6/avatar_128"
+        );
+        assert.hasAttrValue(
+            filters[2].querySelector(".o_cw_filter_avatar"),
+            "data-src",
+            "/web/image/res.partner/4/avatar_128"
+        );
+    });
+
+    QUnit.test("filters cannot have avatar", async (assert) => {
+        await start({});
+
+        const section = target.querySelectorAll(".o_calendar_filter")[1];
+        assert.containsN(section, ".o_calendar_filter_item", 2);
+        assert.containsNone(section, ".o_cw_filter_avatar");
+    });
+
+    QUnit.test("filter can have remove button", async (assert) => {
+        await start({});
+
+        const section = target.querySelectorAll(".o_calendar_filter")[0];
+        const filters = section.querySelectorAll(".o_calendar_filter_item");
+
+        assert.containsN(section, ".o_calendar_filter_item", 4);
+        assert.containsN(section, ".o_calendar_filter_item .o_remove", 2);
+        assert.containsNone(filters[0], ".o_remove");
+        assert.containsOnce(filters[1], ".o_remove");
+        assert.containsOnce(filters[2], ".o_remove");
+        assert.containsNone(filters[3], ".o_remove");
+    });
+
+    QUnit.test("click on remove button", async (assert) => {
+        assert.expect(3);
+
+        await start({
+            model: {
+                unlinkFilter(fieldName, recordId) {
+                    assert.step(`${fieldName} ${recordId}`);
+                },
+            },
+        });
+
+        const section = target.querySelectorAll(".o_calendar_filter")[0];
+        const filters = section.querySelectorAll(".o_calendar_filter_item");
+
+        await click(filters[1], ".o_calendar_filter_item .o_remove");
+        await click(filters[2], ".o_calendar_filter_item .o_remove");
+        assert.verifySteps(["partner_ids 2", "partner_ids 1"]);
+    });
+
+    QUnit.test("click on filter", async (assert) => {
+        assert.expect(6);
+
+        await start({
+            model: {
+                updateFilters(fieldName, args) {
+                    assert.step(`${fieldName} ${Object.keys(args)[0]} ${Object.values(args)[0]}`);
+                },
+            },
+        });
+
+        const section = target.querySelectorAll(".o_calendar_filter")[0];
+        const filters = section.querySelectorAll(".o_calendar_filter_item");
+
+        await click(filters[0], "input");
+        await click(filters[1], "input");
+        await click(filters[2], "input");
+        await click(filters[3], "input");
+        await click(filters[3], "input");
+        assert.verifySteps([
+            "partner_ids 3 false",
+            "partner_ids 6 true",
+            "partner_ids 4 false",
+            "partner_ids all true",
+            "partner_ids all false",
+        ]);
+    });
+
+    QUnit.test("hover filter opens tooltip", async (assert) => {
+        await start({
+            services: {
+                popover: {
+                    start: () => ({
+                        add: (target, _, props) => {
+                            assert.step(props.filter.label);
+                            assert.step("" + props.filter.hasAvatar);
+                            assert.step("" + props.filter.value);
+                            return () => {
+                                assert.step("popOver Closed");
+                            };
+                        },
+                    }),
+                },
+            },
+        });
+
+        const section = target.querySelectorAll(".o_calendar_filter")[0];
+        const filters = section.querySelectorAll(".o_calendar_filter_item");
+
+        await triggerEvent(filters[0], null, "mouseenter");
+        assert.verifySteps(["Mitchell Admin", "true", "3"]);
+        await triggerEvent(filters[0], null, "mouseleave");
+        assert.verifySteps(["popOver Closed"]);
+
+        await triggerEvent(filters[3], null, "mouseenter");
+        assert.verifySteps([]);
+        await triggerEvent(filters[3], null, "mouseleave");
+        assert.verifySteps([]);
+    });
+});
diff --git a/addons/web/static/tests/views/calendar/calendar_quick_create_tests.js b/addons/web/static/tests/views/calendar/calendar_quick_create_tests.js
new file mode 100644
index 00000000000..ed54c5f6193
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/calendar_quick_create_tests.js
@@ -0,0 +1,119 @@
+/** @odoo-module **/
+
+import { CalendarQuickCreate } from "@web/views/calendar/quick_create/calendar_quick_create";
+import { click, getFixture } from "../../helpers/utils";
+import { makeEnv, makeFakeModel, mountComponent } from "./helpers";
+
+let target;
+
+async function start(params = {}) {
+    const { services, props, model: modelParams } = params;
+    const env = await makeEnv(services);
+    env.dialogData = {
+        isActive: true,
+        close() {},
+    };
+    const model = makeFakeModel(modelParams);
+    return await mountComponent(CalendarQuickCreate, env, {
+        model,
+        record: {},
+        close() {},
+        editRecord() {},
+        ...props,
+    });
+}
+
+QUnit.module("CalendarView - QuickCreate", ({ beforeEach }) => {
+    beforeEach(() => {
+        target = getFixture();
+    });
+
+    QUnit.test("mount a CalendarQuickCreate", async (assert) => {
+        await start({});
+        assert.containsOnce(target, ".o-calendar-quick-create");
+        assert.containsOnce(target, ".o_dialog .modal-sm");
+        assert.strictEqual(target.querySelector(".modal-title").textContent, "New Event");
+        assert.strictEqual(target.querySelector(`input[name="title"]`), document.activeElement);
+        assert.containsOnce(target, ".o-calendar-quick-create--create-btn");
+        assert.containsOnce(target, ".o-calendar-quick-create--edit-btn");
+        assert.containsOnce(target, ".o-calendar-quick-create--cancel-btn");
+    });
+
+    QUnit.test("click on create button", async (assert) => {
+        assert.expect(2);
+        await start({
+            props: {
+                close: () => assert.step("close"),
+            },
+            model: {
+                createRecord: () => assert.step("create"),
+            },
+        });
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.verifySteps([]);
+        assert.hasClass(target.querySelector("input[name=title]"), "o_field_invalid");
+    });
+
+    QUnit.test("click on create button (with name)", async (assert) => {
+        assert.expect(4);
+        await start({
+            props: {
+                close: () => assert.step("close"),
+            },
+            model: {
+                createRecord(record) {
+                    assert.step("create");
+                    assert.strictEqual(record.title, "TEST");
+                },
+            },
+        });
+
+        const input = target.querySelector(".o-calendar-quick-create--input");
+        input.value = "TEST";
+
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.verifySteps(["create", "close"]);
+    });
+
+    QUnit.test("click on edit button", async (assert) => {
+        assert.expect(3);
+        await start({
+            props: {
+                close: () => assert.step("close"),
+                editRecord: () => assert.step("edit"),
+            },
+        });
+        await click(target, ".o-calendar-quick-create--edit-btn");
+        assert.verifySteps(["edit", "close"]);
+    });
+
+    QUnit.test("click on edit button (with name)", async (assert) => {
+        assert.expect(4);
+        await start({
+            props: {
+                close: () => assert.step("close"),
+                editRecord(record) {
+                    assert.step("edit");
+                    assert.strictEqual(record.title, "TEST");
+                },
+            },
+        });
+
+        const input = target.querySelector(".o-calendar-quick-create--input");
+        input.value = "TEST";
+
+        await click(target, ".o-calendar-quick-create--edit-btn");
+        assert.verifySteps(["edit", "close"]);
+    });
+
+    QUnit.test("click on cancel button", async (assert) => {
+        assert.expect(2);
+        await start({
+            props: {
+                close: () => assert.step("close"),
+            },
+        });
+        await click(target, ".o-calendar-quick-create--cancel-btn");
+        assert.verifySteps(["close"]);
+    });
+});
diff --git a/addons/web/static/tests/views/calendar/calendar_view_tests.js b/addons/web/static/tests/views/calendar/calendar_view_tests.js
new file mode 100644
index 00000000000..042d7cac229
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/calendar_view_tests.js
@@ -0,0 +1,3937 @@
+/** @odoo-module **/
+
+import { registerCleanup } from "../../helpers/cleanup";
+import { defaultLocalization } from "../../helpers/mock_services";
+import {
+    click,
+    editInput,
+    getFixture,
+    makeDeferred,
+    nextTick,
+    patchDate,
+    patchTimeZone,
+    patchWithCleanup,
+    triggerEvent,
+} from "../../helpers/utils";
+import {
+    changeScale,
+    clickDate,
+    clickEvent,
+    findEvent,
+    findFilterPanelFilter,
+    findFilterPanelSection,
+    findPickedDate,
+    findTimeRow,
+    moveEventToAllDaySlot,
+    moveEventToDate,
+    moveEventToTime,
+    navigate,
+    pickDate,
+    resizeEventToTime,
+    selectAllDayRange,
+    selectDateRange,
+    selectTimeRange,
+    toggleFilter,
+    toggleSectionFilter,
+} from "../../views/calendar/helpers";
+import { makeView, setupViewRegistries } from "../../views/helpers";
+import { createWebClient, doAction } from "../../webclient/helpers";
+import { browser } from "@web/core/browser/browser";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { localization } from "@web/core/l10n/localization";
+import { registry } from "@web/core/registry";
+import { userService } from "@web/core/user_service";
+import { CharField } from "@web/views/fields/char/char_field";
+import { actionService } from "@web/webclient/actions/action_service";
+
+const fieldRegistry = registry.category("fields");
+const preloadedDataRegistry = registry.category("preloadedData");
+const serviceRegistry = registry.category("services");
+
+let target;
+let serverData;
+const uid = -1;
+
+QUnit.module("Views", ({ beforeEach }) => {
+    beforeEach(() => {
+        // 2016-12-12 08:00:00
+        patchDate(2016, 11, 12, 8, 0, 0);
+
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout: () => {},
+        });
+
+        target = getFixture();
+        setupViewRegistries();
+
+        serviceRegistry.add(
+            "user",
+            {
+                ...userService,
+                start() {
+                    const fakeUserService = userService.start(...arguments);
+                    Object.defineProperty(fakeUserService, "userId", {
+                        get: () => uid,
+                    });
+                    return fakeUserService;
+                },
+            },
+            { force: true }
+        );
+
+        serverData = {
+            models: {
+                event: {
+                    fields: {
+                        id: { string: "ID", type: "integer" },
+                        user_id: {
+                            string: "user",
+                            type: "many2one",
+                            relation: "user",
+                            default: uid,
+                        },
+                        partner_id: {
+                            string: "user",
+                            type: "many2one",
+                            relation: "partner",
+                            related: "user_id.partner_id",
+                            default: 1,
+                        },
+                        name: { string: "name", type: "char" },
+                        start_date: { string: "start date", type: "date" },
+                        stop_date: { string: "stop date", type: "date" },
+                        start: { string: "start datetime", type: "datetime" },
+                        stop: { string: "stop datetime", type: "datetime" },
+                        delay: { string: "delay", type: "float" },
+                        allday: { string: "allday", type: "boolean" },
+                        partner_ids: {
+                            string: "attendees",
+                            type: "one2many",
+                            relation: "partner",
+                            default: [[6, 0, [1]]],
+                        },
+                        type: { string: "type", type: "integer" },
+                        event_type_id: {
+                            string: "Event Type",
+                            type: "many2one",
+                            relation: "event_type",
+                        },
+                        color: {
+                            string: "Color",
+                            type: "integer",
+                            related: "event_type_id.color",
+                        },
+                        is_hatched: { string: "Hatched", type: "boolean" },
+                        is_striked: { string: "Striked", type: "boolean" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            user_id: uid,
+                            partner_id: 1,
+                            name: "event 1",
+                            start: "2016-12-11 00:00:00",
+                            stop: "2016-12-11 00:00:00",
+                            allday: false,
+                            partner_ids: [1, 2, 3],
+                            type: 1,
+                            is_hatched: false,
+                        },
+                        {
+                            id: 2,
+                            user_id: uid,
+                            partner_id: 1,
+                            name: "event 2",
+                            start: "2016-12-12 10:55:05",
+                            stop: "2016-12-12 14:55:05",
+                            allday: false,
+                            partner_ids: [1, 2],
+                            type: 3,
+                            is_hatched: false,
+                        },
+                        {
+                            id: 3,
+                            user_id: 4,
+                            partner_id: 4,
+                            name: "event 3",
+                            start: "2016-12-12 15:55:05",
+                            stop: "2016-12-12 16:55:05",
+                            allday: false,
+                            partner_ids: [1],
+                            type: 2,
+                            is_hatched: true,
+                        },
+                        {
+                            id: 4,
+                            user_id: uid,
+                            partner_id: 1,
+                            name: "event 4",
+                            start: "2016-12-14 15:55:05",
+                            stop: "2016-12-14 18:55:05",
+                            allday: true,
+                            partner_ids: [1],
+                            type: 2,
+                            is_hatched: false,
+                            is_striked: true,
+                        },
+                        {
+                            id: 5,
+                            user_id: 4,
+                            partner_id: 4,
+                            name: "event 5",
+                            start: "2016-12-13 15:55:05",
+                            stop: "2016-12-20 18:55:05",
+                            allday: false,
+                            partner_ids: [2, 3],
+                            type: 2,
+                            is_hatched: true,
+                        },
+                        {
+                            id: 6,
+                            user_id: uid,
+                            partner_id: 1,
+                            name: "event 6",
+                            start: "2016-12-18 08:00:00",
+                            stop: "2016-12-18 09:00:00",
+                            allday: false,
+                            partner_ids: [3],
+                            type: 3,
+                            is_hatched: true,
+                        },
+                        {
+                            id: 7,
+                            user_id: uid,
+                            partner_id: 1,
+                            name: "event 7",
+                            start: "2016-11-14 08:00:00",
+                            stop: "2016-11-16 17:00:00",
+                            allday: false,
+                            partner_ids: [2],
+                            type: 1,
+                            is_hatched: false,
+                        },
+                    ],
+                    methods: {
+                        check_access_rights() {
+                            return Promise.resolve(true);
+                        },
+                    },
+                },
+                user: {
+                    fields: {
+                        id: { string: "ID", type: "integer" },
+                        display_name: { string: "Displayed name", type: "char" },
+                        partner_id: {
+                            string: "partner",
+                            type: "many2one",
+                            relation: "partner",
+                        },
+                        image: { string: "image", type: "integer" },
+                    },
+                    records: [
+                        { id: uid, display_name: "user 1", partner_id: 1 },
+                        { id: 4, display_name: "user 4", partner_id: 4 },
+                    ],
+                },
+                partner: {
+                    fields: {
+                        id: { string: "ID", type: "integer" },
+                        display_name: { string: "Displayed name", type: "char" },
+                        image: { string: "image", type: "integer" },
+                    },
+                    records: [
+                        { id: 1, display_name: "partner 1", image: "AAA" },
+                        { id: 2, display_name: "partner 2", image: "BBB" },
+                        { id: 3, display_name: "partner 3", image: "CCC" },
+                        { id: 4, display_name: "partner 4", image: "DDD" },
+                    ],
+                },
+                event_type: {
+                    fields: {
+                        id: { string: "ID", type: "integer" },
+                        display_name: { string: "Displayed name", type: "char" },
+                        color: { string: "Color", type: "integer" },
+                    },
+                    records: [
+                        { id: 1, display_name: "Event Type 1", color: 1 },
+                        { id: 2, display_name: "Event Type 2", color: 2 },
+                        { id: 3, display_name: "Event Type 3 (color 4)", color: 4 },
+                    ],
+                },
+                filter_partner: {
+                    fields: {
+                        id: { string: "ID", type: "integer" },
+                        user_id: { string: "user", type: "many2one", relation: "user" },
+                        partner_id: {
+                            string: "partner",
+                            type: "many2one",
+                            relation: "partner",
+                        },
+                        partner_checked: { string: "checked", type: "boolean" },
+                    },
+                    records: [
+                        { id: 1, user_id: uid, partner_id: 1, partner_checked: true },
+                        { id: 2, user_id: uid, partner_id: 2, partner_checked: true },
+                        { id: 3, user_id: 4, partner_id: 3, partner_checked: true },
+                    ],
+                },
+            },
+            views: {
+                "event,false,form": `
+                <form>
+                    <field name="name" />
+                    <field name="allday" />
+                    <group attrs="{'invisible': [['allday', '=', True]]}">
+                        <field name="start" />
+                        <field name="stop" />
+                    </group>
+                    <group attrs="{'invisible': [['allday', '=', False]]}">
+                        <field name="start_date" />
+                        <field name="stop_date" />
+                    </group>
+                </form>
+            `,
+                "event,1,form": `
+                <form>
+                    <field name="allday" invisible="1" />
+                    <field name="start" attrs="{'invisible': [['allday', '=', False]]}" />
+                    <field name="stop" attrs="{'invisible': [['allday', '=', True]]}" />
+                </form>
+            `,
+            },
+        };
+    });
+
+    QUnit.module("CalendarView");
+
+    QUnit.test(`simple calendar rendering`, async (assert) => {
+        assert.expect(24);
+
+        serverData.models.event.records.push({
+            id: 8,
+            user_id: uid,
+            partner_id: false,
+            name: "event 7",
+            start: "2016-12-18 09:00:00",
+            stop: "2016-12-18 10:00:00",
+            allday: false,
+            partner_ids: [2],
+            type: 1,
+        });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar event_open_popup="1" date_start="start" date_stop="stop" all_day="allday" mode="week" attendee="partner_ids" color="partner_id">
+                    <filter name="user_id" avatar_field="image" />
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                    <field name="partner_id" filters="1" invisible="1" />
+                </calendar>
+            `,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_calendar_renderer .fc-view-container",
+            "should instance of fullcalendar"
+        );
+
+        // test view scales
+        assert.containsNone(
+            target,
+            ".fc-event",
+            "By default, only the events of the current user are displayed (0 in this case)"
+        );
+        // display all events
+        await click(target, ".o_calendar_filter_item[data-value='all'] input");
+        assert.containsN(
+            target,
+            ".fc-event",
+            9,
+            "should display 9 events on the week (4 event + 5 days event)"
+        );
+        assert.containsN(
+            target,
+            ".o_calendar_sidebar tr:has(.ui-state-active) td",
+            7,
+            "week scale should highlight 7 days in mini calendar"
+        );
+        await click(target, ".scale_button_selection");
+        await click(target, ".o_calendar_button_day"); // display only one day
+        assert.containsN(target, ".fc-event", 2, "should display 2 events on the day");
+        assert.containsOnce(
+            target,
+            ".o_calendar_sidebar .o_selected_range",
+            "should highlight the target day in mini calendar"
+        );
+        await click(target, ".scale_button_selection");
+        await click(target, ".o_calendar_button_month"); // display all the month
+        // We display the events or partner 1 2 and 4. Partner 2 has nothing and Event 6 is for partner 6 (not displayed)
+        await click(target, ".o_calendar_filter_item[data-value='all'] input");
+        await click(
+            target.querySelector(".o_calendar_filter .o_calendar_filter_item[data-value='1'] input")
+        );
+        await click(target, ".o_calendar_filter_item[data-value='2'] input");
+        assert.containsN(
+            target,
+            ".fc-event",
+            7,
+            "should display 7 events on the month (5 events + 2 week event - 1 'event 6' is filtered + 1 'Undefined event')"
+        );
+        assert.containsN(
+            target,
+            ".o_calendar_sidebar td a",
+            31,
+            "month scale should highlight all days in mini calendar"
+        );
+        // test filters
+        assert.containsN(
+            target,
+            ".o_calendar_sidebar .o_calendar_filter",
+            2,
+            "should display 2 filters"
+        );
+        const typeFilter = target.querySelectorAll(".o_calendar_filter")[1];
+        assert.ok(!!typeFilter, "should display 'user' filter");
+        assert.containsN(
+            typeFilter,
+            ".o_calendar_filter_item",
+            3,
+            "should display 3 filter items for 'user'"
+        );
+        // filters which has no value should show with string "Undefined", should not have any user image and should show at the last
+        let lastFilter;
+        {
+            const filters = typeFilter.querySelectorAll(".o_calendar_filter_item");
+            lastFilter = filters[filters.length - 1];
+        }
+        assert.strictEqual(
+            lastFilter.hasAttribute("data-value"),
+            false,
+            "filters having false value should be displayed at last in filter items"
+        );
+        assert.strictEqual(
+            lastFilter.querySelector(".o_cw_filter_title").textContent,
+            "Undefined",
+            "filters having false value should display 'Undefined' string"
+        );
+        assert.containsNone(
+            lastFilter,
+            "label img",
+            "filters having false value should not have any user image"
+        );
+        const attendeesFilter = target.querySelectorAll(".o_calendar_filter")[0];
+        assert.ok(!!attendeesFilter, "should display 'attendees' filter");
+        assert.containsN(
+            attendeesFilter,
+            ".o_calendar_filter_item",
+            3,
+            "should display 3 filter items for 'attendees' who use write_model (checkall + 2 saved + Everything)"
+        );
+        assert.containsOnce(
+            attendeesFilter,
+            ".o-autocomplete",
+            "should display one2many search bar for 'attendees' filter"
+        );
+        assert.containsN(
+            target,
+            ".fc-event",
+            7,
+            "should display 7 events ('event 5' counts for 2 because it spans two weeks and thus generate two fc-event elements)"
+        );
+        await click(target.querySelectorAll(".o_calendar_filter input[type=checkbox]")[1]); // click on partner 2
+        assert.containsN(target, ".fc-event", 4, "should now only display 4 event");
+        await click(target.querySelectorAll(".o_calendar_filter input[type=checkbox]")[2]);
+        assert.containsNone(target, ".fc-event", "should not display any event anymore");
+        // test search bar in filter
+        await click(target, ".o_calendar_sidebar input[type=text]");
+        let autoCompleteItems = document.body.querySelectorAll("ul.ui-autocomplete li");
+        assert.strictEqual(
+            autoCompleteItems.length,
+            2,
+            "should display 2 choices in one2many autocomplete"
+        );
+        await click(autoCompleteItems[0]);
+        assert.containsN(
+            attendeesFilter,
+            ".o_calendar_filter_item",
+            4,
+            "should display 4 filter items for 'attendees'"
+        );
+        await click(target, ".o_calendar_sidebar input[type=text]");
+        autoCompleteItems = document.body.querySelectorAll("ul.ui-autocomplete li");
+        assert.strictEqual(
+            autoCompleteItems[0].textContent,
+            "partner 4",
+            "should display the last choice in one2many autocomplete"
+        );
+        await click(target.querySelectorAll(".o_calendar_filter_item .o_remove")[1]);
+        assert.containsN(
+            attendeesFilter,
+            ".o_calendar_filter_item",
+            3,
+            "click on remove then should display 3 filter items for 'attendees'"
+        );
+    });
+
+    QUnit.test(
+        `delete attribute on calendar doesn't show delete button in popover`,
+        async (assert) => {
+            assert.expect(2);
+
+            await makeView({
+                type: "calendar",
+                resModel: "event",
+                serverData,
+                arch: `
+                    <calendar event_open_popup="1" date_start="start" date_stop="stop" all_day="allday" delete="0" mode="month" />
+                `,
+            });
+
+            await clickEvent(target, 4);
+            assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+            assert.containsNone(
+                target,
+                ".o_cw_popover .o_cw_popover_delete",
+                "should not have the 'Delete' Button"
+            );
+        }
+    );
+
+    QUnit.test(`breadcrumbs are updated with the displayed period`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" />
+            `,
+        });
+
+        // displays week mode by default
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb-item.active").textContent,
+            "undefined (Dec 11 – 17, 2016)",
+            "should display the current week"
+        );
+
+        // switch to day mode
+        await changeScale(target, "day");
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb-item.active").textContent,
+            "undefined (December 12, 2016)",
+            "should display the current day"
+        );
+
+        // switch to month mode
+        await changeScale(target, "month");
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb-item.active").textContent,
+            "undefined (December 2016)",
+            "should display the current month"
+        );
+
+        // switch to year mode
+        await changeScale(target, "year");
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb-item.active").textContent,
+            "undefined (2016)",
+            "should display the current year"
+        );
+    });
+
+    QUnit.test(`create and change events`, async (assert) => {
+        assert.expect(28);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar event_open_popup="1" date_start="start" date_stop="stop" all_day="allday" mode="month" />
+            `,
+            mockRPC(route, { args, method }) {
+                if (method === "write") {
+                    assert.deepEqual(
+                        args[1],
+                        { name: "event 4 modified" },
+                        "should update the record"
+                    );
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".fc-dayGridMonth-view", "should display in month mode");
+
+        // click on an existing event to open the formViewDialog
+        await clickEvent(target, 4);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+        assert.containsOnce(
+            target,
+            ".o_cw_popover .o_cw_popover_edit",
+            "popover should have an edit button"
+        );
+        assert.containsOnce(
+            target,
+            ".o_cw_popover .o_cw_popover_delete",
+            "popover should have a delete button"
+        );
+        assert.containsOnce(
+            target,
+            ".o_cw_popover .o_cw_popover_close",
+            "popover should have a close button"
+        );
+
+        await click(target, ".o_cw_popover .o_cw_popover_edit");
+        assert.containsOnce(
+            target,
+            ".modal-body",
+            "should open the form view in dialog when click on event"
+        );
+
+        await editInput(target.querySelector(".modal-body input"), null, "event 4 modified");
+        await click(target, ".modal-footer .o_form_button_save");
+        assert.containsNone(target, ".modal-body", "save button should close the modal");
+
+        // create a new event, quick create only
+        await clickDate(target, "2016-12-13");
+        assert.containsOnce(
+            target,
+            ".o-calendar-quick-create",
+            "should open the quick create dialog"
+        );
+
+        await editInput(target, ".o-calendar-quick-create--input", "new event in quick create");
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.strictEqual(
+            findEvent(target, 8).textContent,
+            "new event in quick create",
+            "should display the new record after quick create"
+        );
+        assert.containsN(
+            target,
+            "td.fc-event-container[colspan]",
+            2,
+            "should the new record have only one day"
+        );
+
+        // create a new event, quick create only (validated by pressing enter key)
+        await clickDate(target, "2016-12-13");
+        assert.containsOnce(
+            target,
+            ".o-calendar-quick-create",
+            "should open the quick create dialog"
+        );
+
+        await editInput(
+            target,
+            ".o-calendar-quick-create--input",
+            "new event in quick create validated by pressing enter key."
+        );
+        await triggerEvent(target, ".o-calendar-quick-create--input", "keyup", { key: "Enter" });
+        assert.strictEqual(
+            findEvent(target, 9).textContent,
+            "new event in quick create validated by pressing enter key.",
+            "should display the new record by pressing enter key"
+        );
+
+        // create a new event and edit it
+        await clickDate(target, "2016-12-27");
+        assert.containsOnce(
+            target,
+            ".o-calendar-quick-create",
+            "should open the quick create dialog"
+        );
+
+        await editInput(target, ".o-calendar-quick-create--input", "coucou");
+        await click(target, ".o-calendar-quick-create--edit-btn");
+        assert.containsOnce(target, ".modal", "should open the slow create dialog");
+        assert.strictEqual(
+            target.querySelector(".modal .modal-title").textContent,
+            "New Event",
+            "should use the string attribute as modal title"
+        );
+        assert.strictEqual(
+            target.querySelector(`.modal [name="name"] input`).value,
+            "coucou",
+            "should have set the name from the quick create dialog"
+        );
+
+        await click(target, ".modal-footer .o_form_button_save");
+        assert.strictEqual(
+            findEvent(target, 10).textContent,
+            "coucou",
+            "should display the new record with string attribute"
+        );
+
+        // create a new event with 2 days
+        await selectDateRange(target, "2016-12-20", "2016-12-21");
+        await editInput(target, ".o-calendar-quick-create--input", "new event in quick create 2");
+
+        await click(target, ".o-calendar-quick-create--edit-btn");
+        assert.strictEqual(
+            target.querySelector(`.modal .o_form_view [name="name"] input`).value,
+            "new event in quick create 2",
+            "should open the formViewDialog with default values"
+        );
+
+        await click(target, ".modal-footer .o_form_button_save");
+        assert.containsNone(target, ".modal", "should close dialogs");
+
+        const newEvent = findEvent(target, 11);
+        assert.strictEqual(
+            newEvent.textContent,
+            "new event in quick create 2",
+            "should display the 2 days new record"
+        );
+        assert.hasAttrValue(
+            newEvent.closest(".fc-event-container"),
+            "colspan",
+            "2",
+            "the new record should have 2 days"
+        );
+
+        await clickEvent(target, 11);
+        const popoverDescription = target.querySelector(".o_cw_popover .list-group-item");
+        assert.strictEqual(
+            popoverDescription.children[1].textContent,
+            "December 20-21, 2016",
+            "The popover description should indicate the correct range"
+        );
+        assert.strictEqual(
+            popoverDescription.children[2].textContent,
+            "(2 days)",
+            "The popover description should indicate 2 days"
+        );
+        await click(target, ".o_cw_popover_close");
+
+        // delete the a record
+        await clickEvent(target, 4);
+        await click(target, ".o_cw_popover_delete");
+        assert.strictEqual(
+            target.querySelector(".modal-title").textContent,
+            "Confirmation",
+            "should display the confirm message"
+        );
+
+        await click(target, ".modal-footer button.btn-primary");
+        assert.notOk(findEvent(target, 4), "the record should be deleted");
+
+        assert.containsN(target, ".fc-event-container .fc-event", 10, "should display 10 events");
+        // move to next month
+        await navigate(target, "next");
+        assert.containsNone(target, ".fc-event-container .fc-event", "should display 0 events");
+
+        await navigate(target, "prev");
+        await selectDateRange(target, "2016-12-20", "2016-12-21");
+        await editInput(target, ".o-calendar-quick-create--input", "test");
+        await click(target, ".o-calendar-quick-create--create-btn");
+    });
+
+    QUnit.test(`quickcreate with custom create_name_field`, async (assert) => {
+        assert.expect(4);
+
+        serverData.models.custom_event = {
+            fields: {
+                id: { string: "ID", type: "integer" },
+                x_name: { string: "name", type: "char" },
+                x_start_date: { string: "start date", type: "date" },
+            },
+            records: [{ id: 1, x_name: "some event", x_start_date: "2016-12-06" }],
+            methods: {
+                async check_access_rights() {
+                    return true;
+                },
+            },
+        };
+
+        await makeView({
+            type: "calendar",
+            resModel: "custom_event",
+            serverData,
+            arch: `
+                <calendar date_start="x_start_date" create_name_field="x_name" mode="month" />
+            `,
+            mockRPC(route, { args, method }) {
+                if (method === "create") {
+                    assert.deepEqual(
+                        args[0],
+                        {
+                            x_name: "custom event in quick create",
+                            x_start_date: "2016-12-13",
+                        },
+                        "the custom create_name_field should be used instead of `name`"
+                    );
+                }
+            },
+        });
+
+        // create a new event
+        await clickDate(target, "2016-12-13");
+        assert.containsOnce(
+            target,
+            ".o-calendar-quick-create",
+            "should open the quick create dialog"
+        );
+
+        await editInput(target, ".o-calendar-quick-create--input", "custom event in quick create");
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.containsOnce(
+            target,
+            `.fc-event[data-event-id="2"]`,
+            "should display the new custom event record"
+        );
+        assert.strictEqual(findEvent(target, 2).textContent, "custom event in quick create");
+    });
+
+    QUnit.test(`quickcreate switching to actual create for required fields`, async (assert) => {
+        assert.expect(4);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="month" event_open_popup="1" />
+            `,
+            mockRPC(route, { method }) {
+                if (method === "create") {
+                    return Promise.reject({
+                        message: {
+                            code: 200,
+                            data: {},
+                            message: "Odoo server error",
+                        },
+                        event: new Event("server_error"),
+                    });
+                }
+            },
+        });
+
+        // create a new event
+        await clickDate(target, "2016-12-13");
+        assert.strictEqual(
+            target.querySelector(".modal-title").textContent,
+            "New Event",
+            "should open the quick create dialog"
+        );
+
+        await editInput(target, ".o-calendar-quick-create--input", "custom event in quick create");
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.containsNone(target, ".o-calendar-quick-create");
+        assert.strictEqual(
+            target.querySelector(".modal-title").textContent,
+            "New Event",
+            "should have switched to a bigger modal for an actual create rather than quickcreate"
+        );
+        assert.containsOnce(
+            target,
+            ".modal .o_form_view .o_form_editable",
+            "should open the full event form view in a dialog"
+        );
+    });
+
+    QUnit.test(`open multiple event form at the same time`, async (assert) => {
+        let counter = 0;
+        patchWithCleanup(dialogService, {
+            start() {
+                const result = this._super(...arguments);
+                return {
+                    ...result,
+                    add() {
+                        counter++;
+                        return result.add(...arguments);
+                    },
+                };
+            },
+        });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="month" event_open_popup="1" quick_add="0">
+                    <field name="name" />
+                </calendar>
+            `,
+        });
+
+        for (let i = 0; i < 5; i++) {
+            await clickDate(target, "2016-12-13");
+        }
+        await nextTick();
+
+        assert.strictEqual(counter, 5, "there should had been 5 attemps to open a modal");
+        assert.containsOnce(target, ".modal", "there should be only one open modal");
+    });
+
+    QUnit.test(`create event with timezone in week mode European locale`, async (assert) => {
+        assert.expect(4);
+
+        serverData.models.event.records = [];
+        patchTimeZone(120);
+        patchWithCleanup(localization, defaultLocalization);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" event_open_popup="1">
+                    <field name="name" />
+                    <field name="start" />
+                    <field name="allday" />
+                </calendar>
+            `,
+            mockRPC(route, { method, args }) {
+                if (method === "create") {
+                    assert.deepEqual(
+                        args,
+                        [
+                            {
+                                allday: false,
+                                name: "new event",
+                                start: "2016-12-13 06:00:00",
+                                stop: "2016-12-13 08:00:00",
+                            },
+                        ],
+                        "should create this event"
+                    );
+                }
+            },
+        });
+
+        await selectTimeRange(target, "2016-12-13 08:00:00", "2016-12-13 10:00:00");
+        assert.strictEqual(
+            target.querySelector(".fc-content .fc-time").textContent,
+            "8:00 - 10:00",
+            "should display the time in the calendar sticker"
+        );
+
+        await editInput(target, ".o-calendar-quick-create--input", "new event");
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.strictEqual(
+            target.querySelector(".fc-event .o_event_title").textContent,
+            "new event",
+            "should display the new event with title"
+        );
+
+        // delete record
+        await clickEvent(target, 1);
+        await click(target, ".o_cw_popover .o_cw_popover_delete");
+        await click(target, ".modal button.btn-primary");
+        assert.containsNone(target, ".fc-content", "should delete the record");
+    });
+
+    QUnit.test(`default week start (US)`, async (assert) => {
+        // if not given any option, default week start is on Sunday
+        assert.expect(3);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="week" />
+            `,
+            mockRPC(route, { method, model, kwargs }) {
+                if (model === "event" && method === "search_read") {
+                    assert.deepEqual(
+                        kwargs.domain,
+                        [
+                            ["start", "<=", "2016-12-17 22:59:59"],
+                            ["stop", ">=", "2016-12-10 23:00:00"],
+                        ],
+                        "The domain to search events in should be correct"
+                    );
+                }
+            },
+        });
+
+        const dayHeaders = target.querySelectorAll(".fc-day-header");
+        assert.strictEqual(
+            dayHeaders[0].textContent,
+            "Sun 11",
+            "The first day of the week should be Sunday"
+        );
+        assert.strictEqual(
+            dayHeaders[dayHeaders.length - 1].textContent,
+            "Sat 17",
+            "The last day of the week should be Saturday"
+        );
+    });
+
+    QUnit.test(`European week start`, async (assert) => {
+        assert.expect(3);
+
+        // the week start depends on the locale
+        patchWithCleanup(localization, { weekStart: 1 });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="week" />
+            `,
+            mockRPC(route, { method, model, kwargs }) {
+                if (model === "event" && method === "search_read") {
+                    // called twice (once for records and once for filters)
+                    assert.deepEqual(
+                        kwargs.domain,
+                        [
+                            ["start", "<=", "2016-12-18 22:59:59"],
+                            ["stop", ">=", "2016-12-11 23:00:00"],
+                        ],
+                        "The domain to search events in should be correct"
+                    );
+                }
+            },
+        });
+
+        const dayHeaders = target.querySelectorAll(".fc-day-header");
+        assert.strictEqual(
+            dayHeaders[0].textContent,
+            "Mon 12",
+            "The first day of the week should be Monday"
+        );
+        assert.strictEqual(
+            dayHeaders[dayHeaders.length - 1].textContent,
+            "Sun 18",
+            "The last day of the week should be Sunday"
+        );
+    });
+
+    QUnit.test(`week numbering`, async (assert) => {
+        // The week is now calculated by FullCalendar (ISO week). If it's start a sunday it
+        // returns the week of the monday.
+
+        patchWithCleanup(localization, { weekStart: 7 });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="week" />
+            `,
+        });
+
+        assert.strictEqual(target.querySelector(".fc-week-number").textContent, "Week 50");
+    });
+
+    QUnit.test(`render popover`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week">
+                    <field name="name" string="Custom Name" />
+                    <field name="partner_id" />
+                </calendar>
+            `,
+        });
+
+        await clickEvent(target, 4);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+        assert.strictEqual(
+            target.querySelector(".o_cw_popover .popover-header").textContent,
+            "event 4",
+            "popover should have a title 'event 4'"
+        );
+        assert.containsOnce(
+            target,
+            ".o_cw_popover .o_cw_popover_edit",
+            "popover should have an edit button"
+        );
+        assert.containsOnce(
+            target,
+            ".o_cw_popover .o_cw_popover_delete",
+            "popover should have a delete button"
+        );
+        assert.containsOnce(
+            target,
+            ".o_cw_popover .o_cw_popover_close",
+            "popover should have a close button"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_cw_popover .list-group-item b.text-capitalize").textContent,
+            "Wednesday, December 14, 2016",
+            "should display date 'Wednesday, December 14, 2016'"
+        );
+        assert.containsN(
+            target,
+            ".o_cw_popover .o_cw_popover_fields_secondary .list-group-item",
+            2,
+            "popover should have a two fields"
+        );
+
+        const groups = target.querySelectorAll(
+            ".o_cw_popover .o_cw_popover_fields_secondary .list-group-item"
+        );
+        assert.containsOnce(groups[0], ".o_field_char", "should apply char widget");
+        assert.strictEqual(
+            groups[0].querySelector("strong").textContent,
+            "Custom Name : ",
+            "label should be a 'Custom Name'"
+        );
+        assert.strictEqual(
+            groups[0].querySelector(".o_field_char").textContent,
+            "event 4",
+            "value should be a 'event 4'"
+        );
+        assert.containsOnce(groups[1], ".o_form_uri", "should apply m20 widget");
+        assert.strictEqual(
+            groups[1].querySelector("strong").textContent,
+            "user : ",
+            "label should be a 'user'"
+        );
+        assert.strictEqual(
+            groups[1].querySelector(".o_form_uri").textContent,
+            "partner 1",
+            "value should be a 'partner 1'"
+        );
+
+        await click(target, ".o_cw_popover .o_cw_popover_close");
+        assert.containsNone(target, ".o_cw_popover", "should close a popover");
+    });
+
+    QUnit.test(`render popover with modifiers`, async (assert) => {
+        serverData.models.event.fields.priority = {
+            string: "Priority",
+            type: "selection",
+            selection: [
+                ["0", "Normal"],
+                ["1", "Important"],
+            ],
+        };
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week">
+                    <field name="priority" widget="priority" readonly="1" />
+                    <field name="is_hatched" invisible="1" />
+                    <field name="partner_id" attrs="{'invisible': [['is_hatched', '=', False]]}" />
+                    <field name="start" attrs="{'invisible': [['is_hatched', '=', True]]}" />
+                </calendar>
+            `,
+        });
+
+        await clickEvent(target, 4);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+        assert.containsOnce(
+            target,
+            ".o_cw_popover .o_priority span.o_priority_star",
+            "priority field should not be editable"
+        );
+        assert.containsNone(
+            target,
+            ".o_cw_popover li.o_invisible_modifier",
+            "partner_id field should be invisible"
+        );
+        assert.containsOnce(
+            target,
+            ".o_cw_popover .o_field_datetime",
+            "The start date and time should be visible"
+        );
+
+        await click(target, ".o_cw_popover .o_cw_popover_close");
+        assert.containsNone(target, ".o_cw_popover", "should close a popover");
+    });
+
+    QUnit.test(`render popover with widget which has specialData attribute`, async (assert) => {
+        assert.expect(3);
+
+        fieldRegistry.add("specialWidget", CharField);
+        preloadedDataRegistry.add("specialWidget", {
+            loadOnTypes: ["char"],
+            preload: () => {
+                assert.step("_fetchSpecialDataForMyWidget");
+            },
+        });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week">
+                    <field name="name" string="Custom Name" widget="specialWidget" />
+                    <field name="partner_id" />
+                </calendar>
+            `,
+        });
+
+        await clickEvent(target, 4);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+        assert.verifySteps(["_fetchSpecialDataForMyWidget"]);
+    });
+
+    QUnit.test(`attributes hide_date and hide_time`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" hide_date="1" hide_time="1" mode="month" />
+            `,
+        });
+
+        await clickEvent(target, 4);
+        assert.containsNone(
+            target,
+            ".o_cw_popover .list-group-item",
+            "popover should not contain date/time"
+        );
+    });
+
+    QUnit.test(
+        `create event with timezone in week mode with formViewDialog European locale`,
+        async (assert) => {
+            assert.expect(7);
+
+            patchWithCleanup(localization, defaultLocalization);
+            patchTimeZone(120);
+            serverData.models.event.records = [];
+            serverData.models.event.onchanges = {
+                allday(obj) {
+                    if (obj.allday) {
+                        obj.start_date = (obj.start && obj.start.split(" ")[0]) || obj.start_date;
+                        obj.stop_date =
+                            (obj.stop && obj.stop.split(" ")[0]) || obj.stop_date || obj.start_date;
+                    } else {
+                        obj.start = (obj.start_date && obj.start_date + " 00:00:00") || obj.start;
+                        obj.stop =
+                            (obj.stop_date && obj.stop_date + " 00:00:00") || obj.stop || obj.start;
+                    }
+                },
+            };
+            let expectedEvent;
+
+            await makeView({
+                type: "calendar",
+                resModel: "event",
+                serverData,
+                arch: `
+                    <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" event_open_popup="1">
+                        <field name="name" />
+                    </calendar>
+                `,
+                mockRPC(route, { args, kwargs, method }) {
+                    if (method === "create") {
+                        assert.deepEqual(
+                            kwargs.context,
+                            {
+                                default_name: "new event",
+                                default_start: "2016-12-13 06:00:00",
+                                default_stop: "2016-12-13 08:00:00",
+                                default_allday: false,
+                                lang: "en",
+                                tz: "taht",
+                                uid: 7,
+                            },
+                            "should send the context to create events"
+                        );
+                    } else if (method === "write") {
+                        assert.deepEqual(args[1], expectedEvent, "should move the event");
+                    }
+                },
+            });
+
+            await selectTimeRange(target, "2016-12-13 08:00:00", "2016-12-13 10:00:00");
+            await editInput(target, ".o-calendar-quick-create--input", "new event");
+            await click(target, ".o-calendar-quick-create--edit-btn");
+
+            let input = target.querySelector(".o_field_widget[name='start'] input");
+            assert.strictEqual(input.value, "12/13/2016 08:00:00", "should display the datetime");
+
+            // Set allday to true in formViewDialog
+            await click(target, ".modal .o_field_boolean[name='allday'] input");
+            input = target.querySelector(".o_field_widget[name='start_date'] input");
+            assert.strictEqual(input.value, "12/13/2016", "should display the date");
+
+            await click(target, ".modal .o_field_boolean[name='allday'] input");
+            input = target.querySelector(".o_field_widget[name='start'] input");
+            assert.strictEqual(
+                input.value,
+                "12/13/2016 02:00:00",
+                "should display the datetime from the date with the timezone"
+            );
+
+            // use datepicker to enter a date: 12/13/2016 08:00:00
+            await click(target, `.o_field_widget[name="start"] .o_datepicker .o_datepicker_input`);
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]`
+            );
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .timepicker .timepicker-hour`
+            );
+            await click(
+                document.body.querySelectorAll(
+                    `.bootstrap-datetimepicker-widget .timepicker-hours td.hour`
+                )[8]
+            );
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .picker-switch a[data-action="close"]`
+            );
+
+            // use datepicker to enter a date: 12/13/2016 10:00:00
+            await click(target, `.o_field_widget[name="stop"] .o_datepicker .o_datepicker_input`);
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]`
+            );
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .timepicker .timepicker-hour`
+            );
+            await click(
+                document.body.querySelectorAll(
+                    `.bootstrap-datetimepicker-widget .timepicker-hours td.hour`
+                )[10]
+            );
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .picker-switch a[data-action="close"]`
+            );
+
+            await click(target, ".modal-footer .o_form_button_save");
+            assert.strictEqual(
+                findEvent(target, 1).querySelector(".o_event_title").textContent,
+                "new event",
+                "should display the new event with title"
+            );
+
+            // Move this event to another day
+            expectedEvent = {
+                allday: false,
+                start: "2016-12-12 06:00:00",
+                stop: "2016-12-12 08:00:00",
+            };
+            await moveEventToTime(target, 1, "2016-12-12 08:00:00");
+
+            // Move to "All day"
+            expectedEvent = {
+                allday: true,
+                start: "2016-12-12",
+                stop: "2016-12-12",
+            };
+            await moveEventToAllDaySlot(target, 1, "2016-12-12");
+        }
+    );
+
+    QUnit.test(`create event with timezone in week mode American locale`, async (assert) => {
+        assert.expect(3);
+
+        patchWithCleanup(localization, defaultLocalization);
+        patchTimeZone(120);
+        serverData.models.event.records = [];
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" event_open_popup="1">
+                    <field name="name" />
+                    <field name="start" />
+                    <field name="allday" />
+                </calendar>
+            `,
+            mockRPC(route, { kwargs, method }) {
+                if (method === "create") {
+                    assert.deepEqual(
+                        kwargs.context,
+                        {
+                            default_name: "new event",
+                            default_start: "2016-12-13 04:00:00",
+                            default_stop: "2016-12-13 06:00:00",
+                            default_allday: false,
+                            lang: "en",
+                            tz: "taht",
+                            uid: 7,
+                        },
+                        "should send the context to create events"
+                    );
+                }
+            },
+        });
+
+        await selectTimeRange(target, "2016-12-13 06:00:00", "2016-12-13 08:00:00");
+        await editInput(target, ".o-calendar-quick-create--input", "new event");
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.strictEqual(
+            findEvent(target, 1).querySelector(".o_event_title").textContent,
+            "new event",
+            "should display the new event with title"
+        );
+
+        // delete record
+        await clickEvent(target, 1);
+        await click(target, ".o_cw_popover .o_cw_popover_delete");
+        await click(target, ".modal button.btn-primary");
+        assert.containsNone(target, ".fc-content", "should delete the record");
+    });
+
+    QUnit.test(`fetch event when being in timezone`, async (assert) => {
+        assert.expect(3);
+
+        patchTimeZone(660);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="week">
+                    <field name="name" />
+                    <field name="start" />
+                    <field name="allday" />
+                </calendar>
+            `,
+            mockRPC(route, { kwargs, method, model }) {
+                if (method === "search_read" && model === "event") {
+                    assert.deepEqual(
+                        kwargs.domain,
+                        [
+                            ["start", "<=", "2016-12-17 12:59:59"],
+                            ["stop", ">=", "2016-12-10 13:00:00"],
+                        ],
+                        "The domain should contain the right range"
+                    );
+                }
+            },
+        });
+
+        const headers = target.querySelectorAll(".fc-day-header");
+        assert.strictEqual(
+            headers[0].textContent,
+            "Sun 11",
+            "The calendar start date should be 2016-12-11"
+        );
+        assert.strictEqual(
+            headers[headers.length - 1].textContent,
+            "Sat 17",
+            "The calendar start date should be 2016-12-17"
+        );
+    });
+
+    QUnit.test(
+        `create event with timezone in week mode with formViewDialog American locale`,
+        async (assert) => {
+            assert.expect(7);
+
+            patchWithCleanup(localization, defaultLocalization);
+            patchTimeZone(120);
+            serverData.models.event.records = [];
+            serverData.models.event.onchanges = {
+                allday(obj) {
+                    if (obj.allday) {
+                        obj.start_date = (obj.start && obj.start.split(" ")[0]) || obj.start_date;
+                        obj.stop_date =
+                            (obj.stop && obj.stop.split(" ")[0]) || obj.stop_date || obj.start_date;
+                    } else {
+                        obj.start = (obj.start_date && obj.start_date + " 00:00:00") || obj.start;
+                        obj.stop =
+                            (obj.stop_date && obj.stop_date + " 00:00:00") || obj.stop || obj.start;
+                    }
+                },
+            };
+            let expectedEvent = null;
+
+            await makeView({
+                type: "calendar",
+                resModel: "event",
+                serverData,
+                arch: `
+                    <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" event_open_popup="1">
+                        <field name="name" />
+                    </calendar>
+                `,
+                mockRPC(route, { args, kwargs, method }) {
+                    if (method === "create") {
+                        assert.deepEqual(
+                            kwargs.context,
+                            {
+                                default_name: "new event",
+                                default_start: "2016-12-13 06:00:00",
+                                default_stop: "2016-12-13 08:00:00",
+                                default_allday: false,
+                                lang: "en",
+                                tz: "taht",
+                                uid: 7,
+                            },
+                            "should send the context to create events"
+                        );
+                    } else if (method === "write") {
+                        assert.deepEqual(args[1], expectedEvent, "should move the event");
+                    }
+                },
+            });
+
+            await selectTimeRange(target, "2016-12-13 08:00:00", "2016-12-13 10:00:00");
+            await editInput(target, ".o-calendar-quick-create--input", "new event");
+            await click(target, ".o-calendar-quick-create--edit-btn");
+            assert.strictEqual(
+                target.querySelector(`.o_field_widget[name="start"] input`).value,
+                "12/13/2016 08:00:00",
+                "should display the datetime"
+            );
+
+            await click(target, `.modal .o_field_boolean[name="allday"] input`);
+            assert.strictEqual(
+                target.querySelector(`.o_field_widget[name="start_date"] input`).value,
+                "12/13/2016",
+                "should display the date"
+            );
+
+            await click(target, `.modal .o_field_boolean[name="allday"] input`);
+            assert.strictEqual(
+                target.querySelector(`.o_field_widget[name="start"] input`).value,
+                "12/13/2016 02:00:00",
+                "should display the datetime from the date with the timezone"
+            );
+
+            // use datepicker to enter a date: 12/13/2016 08:00:00
+            await click(target, `.o_field_widget[name="start"] .o_datepicker .o_datepicker_input`);
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]`
+            );
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .timepicker .timepicker-hour`
+            );
+            await click(
+                document.body.querySelectorAll(
+                    `.bootstrap-datetimepicker-widget .timepicker-hours td.hour`
+                )[8]
+            );
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .picker-switch a[data-action="close"]`
+            );
+
+            // use datepicker to enter a date: 12/13/2016 10:00:00
+            await click(target, `.o_field_widget[name="stop"] .o_datepicker .o_datepicker_input`);
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]`
+            );
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .timepicker .timepicker-hour`
+            );
+            await click(
+                document.body.querySelectorAll(
+                    `.bootstrap-datetimepicker-widget .timepicker-hours td.hour`
+                )[10]
+            );
+            await click(
+                document.body,
+                `.bootstrap-datetimepicker-widget .picker-switch a[data-action="close"]`
+            );
+
+            await click(target, ".modal-footer button.btn-primary:not(.d-none)");
+            assert.strictEqual(
+                findEvent(target, 1).querySelector(".o_event_title").textContent,
+                "new event",
+                "should display the new event with title"
+            );
+
+            // Move this event to another day
+            expectedEvent = {
+                allday: false,
+                start: "2016-12-12 06:00:00",
+                stop: "2016-12-12 08:00:00",
+            };
+            await moveEventToTime(target, 1, "2016-12-12 08:00:00");
+
+            // Move to "All day"
+            expectedEvent = {
+                allday: true,
+                start: "2016-12-12",
+                stop: "2016-12-12",
+            };
+            await moveEventToAllDaySlot(target, 1, "2016-12-12");
+        }
+    );
+
+    QUnit.test(`check calendar week column timeformat`, async (assert) => {
+        patchWithCleanup(localization, { timeFormat: "hh:mm:ss" });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" />
+            `,
+        });
+
+        assert.strictEqual(
+            findTimeRow(target, "08:00:00").textContent,
+            "8am",
+            "calendar should show according to timeformat"
+        );
+        assert.strictEqual(
+            findTimeRow(target, "23:00:00").textContent,
+            "11pm",
+            "event time format should 12 hour"
+        );
+    });
+
+    QUnit.test(`create all day event in week mode`, async (assert) => {
+        assert.expect(3);
+        patchTimeZone(120);
+        serverData.models.event.records = [];
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" event_open_popup="1">
+                    <field name="name" />
+                </calendar>
+            `,
+            mockRPC(route, { args, method }) {
+                if (method === "create") {
+                    assert.deepEqual(args[0], {
+                        name: "new event",
+                        start: "2016-12-14",
+                        stop: "2016-12-15",
+                        allday: true,
+                    });
+                }
+            },
+        });
+
+        await selectAllDayRange(target, "2016-12-14", "2016-12-15");
+        await editInput(target, ".o-calendar-quick-create--input", "new event");
+        await click(target, ".o-calendar-quick-create--create-btn");
+
+        const event = findEvent(target, 1);
+        assert.strictEqual(
+            event.textContent.replace(/[\s\n\r]+/g, ""),
+            "newevent",
+            "should display the new event with time and title"
+        );
+        assert.hasAttrValue(event.parentElement, "colspan", "2", "should appear over two days.");
+    });
+
+    QUnit.test(`create event with default context (no quickCreate)`, async (assert) => {
+        assert.expect(3);
+
+        patchTimeZone(120);
+        serverData.models.event.records = [];
+
+        serviceRegistry.add(
+            "action",
+            {
+                ...actionService,
+                start() {
+                    const result = actionService.start(...arguments);
+                    const doAction = result.doAction;
+                    result.doAction = (request) => {
+                        assert.step("doAction");
+                        assert.deepEqual(
+                            request.context,
+                            {
+                                default_name: "New",
+                                default_start: "2016-12-14",
+                                default_stop: "2016-12-15",
+                                default_allday: true,
+                                lang: "en",
+                                tz: "taht",
+                                uid: 7,
+                            },
+                            "should send the correct data to create events"
+                        );
+                        return doAction(request);
+                    };
+                    return result;
+                },
+            },
+            { force: true }
+        );
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="week" all_day="allday" quick_add="0" />
+            `,
+            context: {
+                default_name: "New",
+            },
+        });
+
+        await selectAllDayRange(target, "2016-12-14", "2016-12-15");
+        assert.verifySteps(["doAction"]);
+    });
+
+    QUnit.test(`create all day event in week mode (no quickCreate)`, async (assert) => {
+        assert.expect(1);
+
+        patchTimeZone(120);
+        serverData.models.event.records = [];
+
+        serviceRegistry.add(
+            "action",
+            {
+                ...actionService,
+                start() {
+                    const result = actionService.start(...arguments);
+                    const doAction = result.doAction;
+                    result.doAction = (request) => {
+                        assert.deepEqual(
+                            request.context,
+                            {
+                                default_start: "2016-12-14",
+                                default_stop: "2016-12-15",
+                                default_allday: true,
+                                lang: "en",
+                                tz: "taht",
+                                uid: 7,
+                            },
+                            "should send the correct data to create events"
+                        );
+                        return doAction(request);
+                    };
+                    return result;
+                },
+            },
+            { force: true }
+        );
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" quick_add="0" />
+            `,
+        });
+
+        await selectAllDayRange(target, "2016-12-14", "2016-12-15");
+    });
+
+    QUnit.test(`create event in month mode`, async (assert) => {
+        assert.expect(3);
+
+        patchTimeZone(120);
+        serverData.models.event.records = [];
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" event_open_popup="1">
+                    <field name="name" />
+                </calendar>
+            `,
+            mockRPC(route, { args, method }) {
+                if (method === "create") {
+                    assert.deepEqual(
+                        args[0],
+                        {
+                            name: "new event",
+                            start: "2016-12-14 05:00:00",
+                            stop: "2016-12-15 17:00:00",
+                        },
+                        "should send the correct data to create events"
+                    );
+                }
+            },
+        });
+
+        await selectDateRange(target, "2016-12-14", "2016-12-15");
+        await editInput(target, ".o-calendar-quick-create--input", "new event");
+        await click(target, ".o-calendar-quick-create--create-btn");
+
+        const event = findEvent(target, 1);
+        assert.strictEqual(
+            event.textContent.replace(/[\s\n\r]+/g, ""),
+            "newevent",
+            "should display the new event with time and title"
+        );
+        assert.hasAttrValue(event.parentElement, "colspan", "2", "should appear over two days.");
+    });
+
+    QUnit.test(`use mini calendar`, async (assert) => {
+        patchTimeZone(120);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" event_open_popup="1" />
+            `,
+        });
+
+        assert.containsOnce(target, ".fc-timeGridWeek-view", "should be in week mode");
+        assert.containsN(
+            target,
+            ".fc-event",
+            9,
+            "should display 9 events on the week (4 event + 5 days event)"
+        );
+
+        await pickDate(target, "2016-12-19");
+        // Clicking on a day in another week should switch to the other week view
+        assert.containsOnce(target, ".fc-timeGridWeek-view", "should be in week mode");
+        assert.containsN(
+            target,
+            ".fc-event",
+            4,
+            "should display 4 events on the week (1 event + 3 days event)"
+        );
+
+        // Clicking on a day in the same week should switch to that particular day view
+        await pickDate(target, "2016-12-18");
+        assert.containsOnce(target, ".fc-timeGridDay-view", "should be in day mode");
+        assert.containsN(target, ".fc-event", 2, "should display 2 events on the day");
+
+        // Clicking on the same day should toggle between day, month and week views
+        await pickDate(target, "2016-12-18");
+        assert.containsOnce(target, ".fc-dayGridMonth-view", "should be in month mode");
+        assert.containsN(
+            target,
+            ".fc-event",
+            7,
+            "should display 7 events on the month (event 5 is on multiple weeks and generates to .fc-event)"
+        );
+
+        await pickDate(target, "2016-12-18");
+        assert.containsOnce(target, ".fc-timeGridWeek-view", "should be in week mode");
+        assert.containsN(
+            target,
+            ".fc-event",
+            4,
+            "should display 4 events on the week (1 event + 3 days event)"
+        );
+
+        await pickDate(target, "2016-12-18");
+        assert.containsOnce(target, ".fc-timeGridDay-view", "should be in day mode");
+        assert.containsN(target, ".fc-event", 2, "should display 2 events on the day");
+    });
+
+    QUnit.test(`rendering, with many2many`, async (assert) => {
+        serverData.models.event.fields.partner_ids.type = "many2many";
+        serverData.models.event.records[0].partner_ids = [1, 2, 3, 4, 5];
+        serverData.models.partner.records.push({ id: 5, display_name: "partner 5", image: "EEE" });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" event_open_popup="1">
+                    <field name="partner_ids" widget="many2many_tags_avatar" avatar_field="image" write_model="filter_partner" write_field="partner_id" />
+                </calendar>
+            `,
+        });
+
+        assert.containsN(
+            target,
+            ".o_calendar_filter_item .o_cw_filter_avatar",
+            3,
+            "should have 3 avatars in the side bar"
+        );
+
+        await toggleFilter(target, "partner_ids", "all");
+
+        // Event 1
+        await clickEvent(target, 4);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+        assert.containsOnce(target, ".o_cw_popover img", "should have 1 avatar");
+
+        // Event 2
+        await clickEvent(target, 1);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+        assert.containsN(target, ".o_cw_popover img", 5, "should have 5 avatar");
+    });
+
+    QUnit.test(`open form view`, async (assert) => {
+        assert.expect(2);
+
+        let expectedRequest;
+        serviceRegistry.add(
+            "action",
+            {
+                ...actionService,
+                start() {
+                    const result = actionService.start(...arguments);
+                    const doAction = result.doAction;
+                    result.doAction = (request) => {
+                        assert.deepEqual(request, expectedRequest);
+                        return doAction(request);
+                    };
+                    return result;
+                },
+            },
+            { force: true }
+        );
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="month" />
+            `,
+            mockRPC(route, { method }) {
+                if (method === "get_formview_id") {
+                    return Promise.resolve("A view");
+                }
+            },
+        });
+
+        // click on an existing event to open the form view
+        expectedRequest = {
+            type: "ir.actions.act_window",
+            res_id: 4,
+            res_model: "event",
+            views: [["A view", "form"]],
+            target: "current",
+            context: {},
+        };
+        await clickEvent(target, 4);
+        await click(target, ".o_cw_popover .o_cw_popover_edit");
+
+        // create a new event and edit it
+        await clickDate(target, "2016-12-27");
+        await editInput(target, ".o-calendar-quick-create--input", "coucou");
+
+        expectedRequest = {
+            type: "ir.actions.act_window",
+            res_model: "event",
+            views: [[false, "form"]],
+            target: "current",
+            context: {
+                default_name: "coucou",
+                default_start: "2016-12-27",
+                default_stop: "2016-12-27",
+                default_allday: true,
+                lang: "en",
+                tz: "taht",
+                uid: 7,
+            },
+        };
+        await click(target, ".o-calendar-quick-create--edit-btn");
+    });
+
+    QUnit.test(`create and edit event in month mode (all_day: false)`, async (assert) => {
+        assert.expect(1);
+        patchTimeZone(-240);
+
+        serviceRegistry.add(
+            "action",
+            {
+                ...actionService,
+                start() {
+                    const result = actionService.start(...arguments);
+                    const doAction = result.doAction;
+                    result.doAction = (request) => {
+                        assert.deepEqual(
+                            request,
+                            {
+                                type: "ir.actions.act_window",
+                                res_model: "event",
+                                views: [[false, "form"]],
+                                target: "current",
+                                context: {
+                                    default_name: "coucou",
+                                    default_start: "2016-12-27 11:00:00", // 7:00 + 4h
+                                    default_stop: "2016-12-27 23:00:00", // 19:00 + 4h
+                                    default_allday: true,
+                                    lang: "en",
+                                    tz: "taht",
+                                    uid: 7,
+                                },
+                            },
+                            "should open the form view with the context default values"
+                        );
+                        return doAction(request);
+                    };
+                    return result;
+                },
+            },
+            { force: true }
+        );
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" />
+            `,
+        });
+
+        // create a new event and edit it
+        await clickDate(target, "2016-12-27");
+        await editInput(target, ".o-calendar-quick-create--input", "coucou");
+        await click(target, ".o-calendar-quick-create--edit-btn");
+    });
+
+    QUnit.test(`show start time of single day event for month mode`, async (assert) => {
+        patchTimeZone(-240);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="month" />
+            `,
+        });
+
+        assert.strictEqual(
+            findEvent(target, 2).querySelector(".fc-content .fc-time").textContent,
+            "06:55",
+            "should have a correct time 06:55 AM in month mode"
+        );
+        assert.containsNone(
+            findEvent(target, 4),
+            ".fc-content .fc-time",
+            "should not display a time for all day event"
+        );
+        assert.containsNone(
+            findEvent(target, 5),
+            ".fc-content .fc-time",
+            "should not display a time for multiple days event"
+        );
+
+        // switch to week mode
+        await changeScale(target, "week");
+        assert.containsNone(
+            findEvent(target, 2),
+            ".fc-content .fc-time",
+            "should not show time in week mode as week mode already have time on y-axis"
+        );
+    });
+
+    QUnit.test(`start time should not shown for date type field`, async (assert) => {
+        patchTimeZone(-240);
+
+        serverData.models.event.fields.start.type = "date";
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" />
+            `,
+        });
+
+        assert.containsNone(
+            findEvent(target, 2),
+            ".fc-content .fc-time",
+            "should not show time for date type field"
+        );
+    });
+
+    QUnit.test(`start time should not shown in month mode if hide_time is true`, async (assert) => {
+        patchTimeZone(-240);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" hide_time="1" />
+            `,
+        });
+
+        assert.containsNone(
+            findEvent(target, 2),
+            ".fc-content .fc-time",
+            "should not show time for hide_time attribute"
+        );
+    });
+
+    QUnit.test(`readonly date_start field`, async (assert) => {
+        assert.expect(3);
+
+        serverData.models.event.fields.start.readonly = true;
+
+        let expectedRequest;
+        serviceRegistry.add(
+            "action",
+            {
+                ...actionService,
+                start() {
+                    const result = actionService.start(...arguments);
+                    const doAction = result.doAction;
+                    result.doAction = (request) => {
+                        assert.deepEqual(request, expectedRequest);
+                        return doAction(request);
+                    };
+                    return result;
+                },
+            },
+            { force: true }
+        );
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="month" />
+            `,
+            mockRPC(route, { method }) {
+                if (method === "get_formview_id") {
+                    return Promise.resolve(false);
+                }
+            },
+        });
+
+        assert.containsNone(target, ".fc-resizer", "should not have resize button");
+
+        expectedRequest = {
+            type: "ir.actions.act_window",
+            res_id: 4,
+            res_model: "event",
+            views: [[false, "form"]],
+            target: "current",
+            context: {},
+        };
+        await clickEvent(target, 4);
+        await click(target, ".o_cw_popover .o_cw_popover_edit");
+
+        // create a new event and edit it
+        await clickDate(target, "2016-12-27");
+        await editInput(target, ".o-calendar-quick-create--input", "coucou");
+
+        expectedRequest = {
+            type: "ir.actions.act_window",
+            res_model: "event",
+            views: [[false, "form"]],
+            target: "current",
+            context: {
+                default_name: "coucou",
+                default_start: "2016-12-27",
+                default_stop: "2016-12-27",
+                default_allday: true,
+                lang: "en",
+                tz: "taht",
+                uid: 7,
+            },
+        };
+
+        await click(target, ".o-calendar-quick-create--edit-btn");
+    });
+
+    QUnit.test(`check filters with filter_field specified`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week">
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" filter_field="partner_checked" />
+                </calendar>
+            `,
+        });
+
+        assert.containsOnce(
+            findFilterPanelFilter(target, "partner_ids", 2),
+            "input:checked",
+            "checkbox should be checked"
+        );
+
+        await toggleFilter(target, "partner_ids", 2);
+        assert.containsNone(
+            findFilterPanelFilter(target, "partner_ids", 2),
+            "input:checked",
+            "checkbox should not be checked"
+        );
+        assert.strictEqual(
+            serverData.models.filter_partner.records.find((r) => r.id === 2).partner_checked,
+            false,
+            "the status of this filter should now be false"
+        );
+
+        await changeScale(target, "week"); // trick to reload the entire view
+        assert.containsNone(
+            findFilterPanelFilter(target, "partner_ids", 2),
+            "input:checked",
+            "checkbox should not be checked after the reload"
+        );
+        assert.strictEqual(
+            serverData.models.filter_partner.records.find((r) => r.id === 2).partner_checked,
+            false,
+            "the status of this filter should still be false after the reload"
+        );
+    });
+
+    QUnit.test('"all" filter', async (assert) => {
+        assert.expect(8);
+
+        let requestCount = 0;
+        const interval = [
+            ["start", "<=", "2016-12-17 22:59:59"],
+            ["stop", ">=", "2016-12-10 23:00:00"],
+        ];
+        const expectedDomains = [
+            interval.concat([["partner_ids", "in", []]]),
+            interval.concat([["partner_ids", "in", [1]]]),
+            interval.concat([["partner_ids", "in", [1, 2]]]),
+            interval,
+        ];
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar event_open_popup="1" date_start="start" date_stop="stop" all_day="allday" mode="week" attendee="partner_ids" color="partner_id">
+                    <filter name="user_id" avatar_field="image" />
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                </calendar>
+            `,
+            mockRPC(route, { kwargs, method, model }) {
+                if (method === "search_read" && model === "event") {
+                    assert.deepEqual(kwargs.domain, expectedDomains[requestCount]);
+                    requestCount++;
+                }
+            },
+        });
+
+        // By default, no user is selected
+        assert.containsNone(target, ".fc-event", "should not display any event on the week");
+
+        await toggleFilter(target, "partner_ids", 1);
+        assert.containsN(target, ".fc-event", 4, "should display 4 events on the week");
+
+        await toggleFilter(target, "partner_ids", 2);
+        assert.containsN(target, ".fc-event", 9, "should display 9 events on the week");
+
+        // Click on the "all" filter to reload all events
+        await toggleFilter(target, "partner_ids", "all");
+        assert.containsN(target, ".fc-event", 9, "should display 9 events on the week");
+    });
+
+    QUnit.test(`Add filters and specific color`, async (assert) => {
+        serverData.models.event_type.records.push({
+            id: 4,
+            display_name: "Event Type no color",
+            color: 0,
+        });
+        serverData.models.event.records.push(
+            {
+                id: 8,
+                user_id: 4,
+                partner_id: 1,
+                name: "event 8",
+                start: "2016-12-11 09:00:00",
+                stop: "2016-12-11 10:00:00",
+                allday: false,
+                partner_ids: [1, 2, 3],
+                event_type_id: 3,
+                color: 4,
+            },
+            {
+                id: 9,
+                user_id: 4,
+                partner_id: 1,
+                name: "event 9",
+                start: "2016-12-11 19:00:00",
+                stop: "2016-12-11 20:00:00",
+                allday: false,
+                partner_ids: [1, 2, 3],
+                event_type_id: 1,
+                color: 1,
+            },
+            {
+                id: 10,
+                user_id: 4,
+                partner_id: 1,
+                name: "event 10",
+                start: "2016-12-11 12:00:00",
+                stop: "2016-12-11 13:00:00",
+                allday: false,
+                partner_ids: [1, 2, 3],
+                event_type_id: 4,
+                color: 0,
+            }
+        );
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" color="color" event_open_popup="1">
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                    <field name="event_type_id" filters="1" color="color" />
+                </calendar>
+            `,
+            mockRPC(route, { method, model, kwargs }) {
+                if (route.startsWith("/web/static/lib/fullcalendar")) {
+                    return;
+                }
+                if (kwargs.fields) {
+                    assert.step(`${method} (${model}) [${(kwargs.fields || []).join(", ")}]`);
+                } else {
+                    assert.step(`${method} (${model})`);
+                }
+            },
+        });
+        assert.verifySteps([
+            "get_views (event)",
+            "check_access_rights (event)",
+            "search_read (filter_partner) [partner_id]",
+            "search_read (event) [display_name, start, stop, allday, color, partner_ids, event_type_id]",
+        ]);
+
+        // By default no filter is selected. We check before continuing.
+        await toggleFilter(target, "partner_ids", 1);
+        assert.verifySteps([
+            "search_read (filter_partner) [partner_id]",
+            "search_read (event) [display_name, start, stop, allday, color, partner_ids, event_type_id]",
+            "search_read (event_type) [color]", // color search read
+        ]);
+        await toggleFilter(target, "partner_ids", 2);
+        assert.verifySteps([
+            "search_read (filter_partner) [partner_id]",
+            "search_read (event) [display_name, start, stop, allday, color, partner_ids, event_type_id]",
+            "search_read (event_type) [color]", // color search read
+        ]);
+
+        assert.containsN(target, ".o_calendar_filter", 2, "should display 2 sections");
+
+        const typeSection = findFilterPanelSection(target, "event_type_id");
+        assert.strictEqual(
+            typeSection.querySelector(".o_cw_filter_label").textContent,
+            "Event Type",
+            "should display 'Event Type' filter"
+        );
+        assert.containsN(
+            typeSection,
+            ".o_calendar_filter_item",
+            4,
+            "should display 4 filter items for 'Event Type'"
+        );
+        assert.containsOnce(
+            typeSection,
+            `.o_calendar_filter_item[data-value="3"].o_cw_filter_color_4`,
+            "Filter for event type 3 must have the color 4"
+        );
+        assert.containsOnce(
+            target,
+            `.fc-event[data-event-id="8"].o_calendar_color_4`,
+            "Event of event type 3 must have the color 4"
+        );
+        assert.containsOnce(
+            target,
+            `.fc-event[data-event-id="10"].o_calendar_color_1`,
+            "The first color is used when none is provided (default int field value being 0)"
+        );
+    });
+
+    QUnit.test(`create event with filters`, async (assert) => {
+        serverData.models.event.fields.user_id.default = 5;
+        serverData.models.event.fields.partner_id.default = 3;
+        serverData.models.user.records.push({ id: 5, display_name: "user 5", partner_id: 3 });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" event_open_popup="1" attendee="partner_ids" color="partner_id">
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                    <field name="partner_id" filters="1" invisible="1" />
+                </calendar>
+            `,
+        });
+
+        // By default only
+        await toggleFilter(target, "partner_ids", 1);
+        assert.containsN(target, ".o_calendar_filter_item", 5, "should display 5 filter items");
+        assert.containsN(target, ".fc-event", 4, "should display 4 events");
+
+        // quick create a record
+        await selectTimeRange(target, "2016-12-15 06:00:00", "2016-12-15 08:00:00");
+        await editInput(target, ".o-calendar-quick-create--input", "coucou");
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.containsN(
+            target,
+            ".o_calendar_filter_item",
+            6,
+            "should add the missing filter (active)"
+        );
+        assert.containsN(target, ".fc-event", 5, "should display the created item");
+
+        // change default value for quick create an hide record
+        serverData.models.event.fields.user_id.default = 4;
+        serverData.models.event.fields.partner_id.default = 4;
+
+        // Disable our filter to create a record without displaying it
+        await toggleFilter(target, "partner_id", 4);
+
+        // quick create and other record
+        await selectTimeRange(target, "2016-12-13 06:00:00", "2016-12-13 08:00:00");
+        await editInput(target, ".o-calendar-quick-create--input", "coucou 2");
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.containsN(target, ".o_calendar_filter_item", 6, "should have the same filters");
+        assert.containsN(target, ".fc-event", 4, "should not display the created item");
+
+        await toggleFilter(target, "partner_id", 4);
+        await toggleFilter(target, "partner_ids", 2);
+        assert.containsN(target, ".fc-event", 11, "should display all records");
+    });
+
+    QUnit.test(`create event with filters (no quickCreate)`, async (assert) => {
+        serverData.views["event,false,form"] = `
+            <form>
+                <group>
+                    <field name="name" />
+                    <field name="start" />
+                    <field name="stop" />
+                    <field name="user_id" />
+                    <field name="partner_id" invisible="1" />
+                </group>
+            </form>
+        `;
+        serverData.models.event.fields.user_id.default = 5;
+        serverData.models.event.fields.partner_id.default = 3;
+        serverData.models.user.records.push({ id: 5, display_name: "user 5", partner_id: 3 });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" event_open_popup="1" attendee="partner_ids" color="partner_id">
+                    <filter name="user_id" avatar_field="image" />
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                    <field name="partner_id" filters="1" invisible="1" />
+                </calendar>
+            `,
+        });
+
+        // dislay all attendee calendars
+        await toggleSectionFilter(target, "partner_ids");
+        await toggleFilter(target, "partner_id", 4);
+        assert.containsN(target, ".o_calendar_filter_item", 5, "should display 5 filter items");
+        assert.containsN(target, ".fc-event", 3, "should display 3 events");
+
+        // quick create a record
+        await selectTimeRange(target, "2016-12-15 06:00:00", "2016-12-15 08:00:00");
+        await editInput(target, ".o-calendar-quick-create--input", "coucou");
+        await click(target, ".o-calendar-quick-create--edit-btn");
+        await click(target, ".modal-footer .o_form_button_save");
+        assert.containsN(
+            target,
+            ".o_calendar_filter_item",
+            6,
+            "should add the missing filter (active)"
+        );
+        assert.containsN(target, ".fc-event", 4, "should display the created item");
+    });
+
+    QUnit.test(`Update event with filters`, async (assert) => {
+        const records = serverData.models.user.records;
+        records.push({ id: 5, display_name: "user 5", partner_id: 3 });
+        serverData.models.event.onchanges = {
+            user_id(obj) {
+                obj.partner_id = records.find((r) => r.id === obj.user_id).partner_id;
+            },
+        };
+        serverData.views["event,false,form"] = `
+            <form>
+                <group>
+                    <field name="name" />
+                    <field name="start" />
+                    <field name="stop" />
+                    <field name="user_id" />
+                    <field name="partner_ids" widget="many2many_tags" />
+                    <field name="partner_id" invisible="1" />
+                </group>
+            </form>
+        `;
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" event_open_popup="1" attendee="partner_ids" color="partner_id">
+                    <filter name="user_id" avatar_field="image" />
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                    <field name="partner_id" filters="1" invisible="1" />
+                </calendar>
+            `,
+        });
+
+        // select needed partner filters
+        await toggleFilter(target, "partner_ids", 1);
+        await toggleFilter(target, "partner_id", 4);
+        assert.containsN(target, ".o_calendar_filter_item", 5, "should display 5 filter items");
+        assert.containsN(target, ".fc-event", 3, "should display 3 events");
+
+        await clickEvent(target, 2);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+
+        await click(target, ".o_cw_popover .o_cw_popover_edit");
+        assert.strictEqual(
+            target.querySelector(".modal .modal-title").textContent,
+            "Open: event 2",
+            "dialog should have a valid title"
+        );
+
+        await click(target, `.modal .o_field_widget[name="user_id"] input`);
+        await click(
+            document.body.querySelectorAll(".ui-autocomplete.dropdown-menu .ui-menu-item")[2]
+        );
+        await click(target, ".modal .o_form_button_save");
+
+        assert.containsN(
+            target,
+            ".o_calendar_filter_item",
+            6,
+            "should add the missing filter (active)"
+        );
+        assert.containsN(target, ".fc-event", 3, "should display the updated item");
+
+        // test the behavior of the 'select all' input checkbox
+        assert.containsN(
+            target,
+            ".o_calendar_filter_item input:checked",
+            3,
+            "should display 3 active checkbox"
+        );
+        assert.containsN(
+            target,
+            ".o_calendar_filter_item input:not(:checked)",
+            3,
+            "should display 3 inactive checkbox"
+        );
+
+        // Click to select all users
+        await toggleSectionFilter(target, "partner_id");
+
+        // should contains 4 events
+        assert.containsN(target, ".fc-event", 4, "should display the updated events");
+
+        // Should have 4 checked boxes
+        assert.containsN(
+            target,
+            ".o_calendar_filter_item input:checked",
+            4, // 3
+            "should display 4 active checkbox"
+        );
+
+        // unselect all user
+        await toggleSectionFilter(target, "partner_id");
+        assert.containsN(target, ".fc-event", 0, "should not display any event");
+        assert.containsN(
+            target,
+            ".o_calendar_filter_item input:checked",
+            1,
+            "should display 1 active checkbox"
+        );
+    });
+
+    QUnit.test(`change pager with filters`, async (assert) => {
+        serverData.models.user.records.push({ id: 5, display_name: "user 5", partner_id: 3 });
+        serverData.models.event.records.push(
+            {
+                id: 8,
+                user_id: 5,
+                partner_id: 3,
+                name: "event 8",
+                start: "2016-12-06 04:00:00",
+                stop: "2016-12-06 08:00:00",
+                allday: false,
+                partner_ids: [1, 2, 3],
+                type: 1,
+            },
+            {
+                id: 9,
+                user_id: uid,
+                partner_id: 1,
+                name: "event 9",
+                start: "2016-12-07 04:00:00",
+                stop: "2016-12-07 08:00:00",
+                allday: false,
+                partner_ids: [1, 2, 3],
+                type: 1,
+            },
+            {
+                id: 10,
+                user_id: 4,
+                partner_id: 4,
+                name: "event 10",
+                start: "2016-12-08 04:00:00",
+                stop: "2016-12-08 08:00:00",
+                allday: false,
+                partner_ids: [1, 2, 3],
+                type: 1,
+            }
+        );
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="week" event_open_popup="1" attendee="partner_ids" color="partner_id">
+                    <filter name="user_id" avatar_field="image" />
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                    <field name="partner_id" filters="1" invisible="1" />
+                </calendar>
+            `,
+        });
+
+        // select filter for partner 1, 2 and 4
+        await toggleSectionFilter(target, "partner_ids");
+        await toggleFilter(target, "partner_id", 4);
+        await navigate(target, "prev");
+        assert.containsN(target, ".o_calendar_filter_item", 6, "should display 6 filter items");
+        assert.containsN(target, ".fc-event", 2, "should display 2 events");
+        const events = target.querySelectorAll(".fc-event .o_event_title");
+        assert.strictEqual(
+            Array.from(events)
+                .map((e) => e.textContent)
+                .join("")
+                .replace(/\s/g, ""),
+            "event8event9",
+            "should display 2 events"
+        );
+    });
+
+    QUnit.test(`ensure events are still shown if filters give an empty domain`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" mode="week">
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                </calendar>
+            `,
+        });
+
+        await toggleSectionFilter(target, "partner_ids");
+        assert.containsN(target, ".fc-event", 5, "should display 5 events");
+
+        await toggleFilter(target, "partner_ids", "all");
+        assert.containsN(target, ".fc-event", 5, "should display 5 events");
+    });
+
+    QUnit.test(`events starting at midnight`, async (assert) => {
+        patchWithCleanup(localization, defaultLocalization);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" mode="week" />
+            `,
+        });
+
+        // Click on Tuesday 12am
+        await selectTimeRange(target, "2016-12-13 00:00:00", "2016-12-13 00:30:00");
+        assert.containsOnce(
+            target,
+            ".o-calendar-quick-create",
+            "should open the quick create dialog"
+        );
+
+        // Creating the event
+        await editInput(
+            target.querySelector(".modal-body input"),
+            null,
+            "new event in quick create"
+        );
+        await click(target, ".o-calendar-quick-create--create-btn");
+        assert.strictEqual(
+            findEvent(target, 8).textContent,
+            "new event in quick create",
+            "should display the new record after quick create dialog"
+        );
+    });
+
+    QUnit.test(`set event as all day when field is date`, async (assert) => {
+        assert.expect(2);
+
+        patchTimeZone(-480); // UTC-8
+        serverData.models.event.records[0].start_date = "2016-12-14";
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start_date" all_day="allday" mode="week" event_open_popup="1" attendee="partner_ids" color="partner_id">
+                    <filter name="user_id" avatar_field="image" />
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                </calendar>
+            `,
+        });
+
+        await toggleFilter(target, "partner_ids", 1);
+        assert.containsOnce(
+            target,
+            ".fc-day-grid .fc-event-container",
+            "should be one event in the all day row"
+        );
+        await clickEvent(target, 1);
+        assert.strictEqual(
+            target.querySelector(".o_cw_popover .list-group-item").textContent,
+            "Wednesday, December 14, 2016 (All day)"
+        );
+    });
+
+    QUnit.test(
+        `set event as all day when field is date (without all_day mapping)`,
+        async (assert) => {
+            assert.expect(1);
+
+            serverData.models.event.records[0].start_date = "2016-12-14";
+
+            await makeView({
+                type: "calendar",
+                resModel: "event",
+                serverData,
+                arch: `
+                    <calendar date_start="start_date" mode="week" />
+                `,
+            });
+
+            assert.containsOnce(
+                target,
+                ".fc-day-grid .fc-event-container",
+                "should be one event in the all day row"
+            );
+        }
+    );
+
+    QUnit.test(`quickcreate avoid double event creation`, async (assert) => {
+        assert.expect(1);
+        let createCount = 0;
+        const def = makeDeferred();
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="month" event_open_popup="1" />
+            `,
+            async mockRPC(route, { method }, performRPC) {
+                if (method === "create") {
+                    createCount++;
+                    await def;
+                    return performRPC(...arguments);
+                }
+            },
+        });
+
+        // create a new event
+        await clickDate(target, "2016-12-13");
+        await editInput(
+            target.querySelector(".modal-body input"),
+            null,
+            "new event in quick create"
+        );
+
+        // Simulate ENTER pressed on Create button (after a TAB)
+        await triggerEvent(target.querySelector(".modal-body input"), null, "keyup", {
+            key: "Enter",
+        });
+        await click(target, ".o-calendar-quick-create--create-btn");
+
+        def.resolve();
+        await nextTick();
+        assert.strictEqual(createCount, 1, "should create only one event");
+    });
+
+    QUnit.test(`calendar is configured to have no groupBy menu`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" />
+            `,
+        });
+        assert.containsNone(
+            target,
+            ".o_control_panel .o_group_by_menu",
+            "the control panel has no groupBy menu"
+        );
+    });
+
+    QUnit.test(`timezone does not affect current day`, async (assert) => {
+        assert.expect(2);
+
+        patchTimeZone(2400); // 40 hours timezone
+        patchDate(2016, 11, 12, 8, 0, 0); // 2016-12-12 08:00:00
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" />
+            `,
+        });
+        assert.strictEqual(
+            findPickedDate(target).textContent,
+            "12",
+            "should highlight the target day"
+        );
+
+        await pickDate(target, "2016-12-11");
+        assert.strictEqual(
+            findPickedDate(target).textContent,
+            "11",
+            "should highlight the selected day"
+        );
+    });
+
+    QUnit.test(`timezone does not affect drag and drop`, async (assert) => {
+        assert.expect(10);
+
+        patchTimeZone(-2400); // UTC-40
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" mode="month">
+                    <field name="name" />
+                    <field name="start" />
+                </calendar>
+            `,
+            mockRPC(route, { method, args }) {
+                if (method === "write") {
+                    assert.deepEqual(args[0], [6], "event 6 is moved");
+                    assert.strictEqual(
+                        args[1].start,
+                        "2016-11-29 08:00:00",
+                        "event moved to 27th nov 16h00 +40 hours timezone"
+                    );
+                }
+            },
+        });
+
+        assert.strictEqual(findEvent(target, 1).textContent.replace(/\s/g, ""), "08:00event1");
+        await clickEvent(target, 1);
+        assert.strictEqual(
+            target.querySelector(`.o_field_widget[name="start"]`).textContent,
+            "12/09/2016 08:00:00"
+        );
+
+        assert.strictEqual(findEvent(target, 6).textContent.replace(/\s/g, ""), "16:00event6");
+        await clickEvent(target, 6);
+        assert.strictEqual(
+            target.querySelector(`.o_field_widget[name="start"]`).textContent,
+            "12/16/2016 16:00:00"
+        );
+
+        // Move event 6 as on first day of month view (27th november 2016)
+        await moveEventToDate(target, 6, "2016-11-27");
+
+        assert.strictEqual(findEvent(target, 6).textContent.replace(/\s/g, ""), "16:00event6");
+        await clickEvent(target, 6);
+        assert.strictEqual(
+            target.querySelector(`.o_field_widget[name="start"]`).textContent,
+            "11/27/2016 16:00:00"
+        );
+
+        assert.strictEqual(findEvent(target, 1).textContent.replace(/\s/g, ""), "08:00event1");
+        await clickEvent(target, 1);
+        assert.strictEqual(
+            target.querySelector(`.o_field_widget[name="start"]`).textContent,
+            "12/09/2016 08:00:00"
+        );
+    });
+
+    QUnit.test(`timzeone does not affect calendar with date field`, async (assert) => {
+        assert.expect(11);
+
+        patchTimeZone(120);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start_date" mode="month">
+                    <field name="name" />
+                    <field name="start_date" />
+                </calendar>
+            `,
+            mockRPC(route, { method, args }) {
+                if (method === "create") {
+                    assert.strictEqual(args[0].start_date, "2016-12-20");
+                }
+                if (method === "write") {
+                    assert.step(args[1].start_date);
+                }
+            },
+        });
+
+        // Create event (on 20 december)
+        await clickDate(target, "2016-12-20");
+        await editInput(target, ".o-calendar-quick-create--input", "An event");
+        await click(target, ".o-calendar-quick-create--create-btn");
+
+        await clickEvent(target, 8);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+        assert.strictEqual(
+            target.querySelector(
+                ".o_cw_popover .o_cw_popover_fields_secondary .list-group-item .o_field_date"
+            ).textContent,
+            "12/20/2016",
+            "should have correct start date"
+        );
+
+        // Move event to another day (on 27 november)
+        await moveEventToDate(target, 8, "2016-11-27");
+        assert.verifySteps(["2016-11-27"]);
+
+        await clickEvent(target, 8);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+        assert.strictEqual(
+            target.querySelector(
+                ".o_cw_popover .o_cw_popover_fields_secondary .list-group-item .o_field_date"
+            ).textContent,
+            "11/27/2016",
+            "should have correct start date"
+        );
+
+        // Move event to last day (on 7 january)
+        await moveEventToDate(target, 8, "2017-01-07");
+        assert.verifySteps(["2017-01-07"]);
+
+        await clickEvent(target, 8);
+        assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+        assert.strictEqual(
+            target.querySelector(
+                ".o_cw_popover .o_cw_popover_fields_secondary .list-group-item .o_field_date"
+            ).textContent,
+            "01/07/2017",
+            "should have correct start date"
+        );
+    });
+
+    QUnit.test(`drag and drop on month mode`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" event_open_popup="1" quick_add="0">
+                    <field name="name" />
+                    <field name="partner_id" />
+                </calendar>
+            `,
+        });
+
+        // Create event (on 20 december)
+        await clickDate(target, "2016-12-20");
+        await editInput(target, ".modal-body .o_field_widget[name=name] input", "An event");
+        await click(target, ".modal .o_form_button_save");
+
+        await moveEventToDate(target, 1, "2016-12-19", { disableDrop: true });
+        assert.hasClass(findEvent(target, 1), "dayGridMonth");
+
+        // Move event to another day (on 19 december)
+        await moveEventToDate(target, 8, "2016-12-19");
+        await clickEvent(target, 8);
+
+        const row = target.querySelectorAll(".o_cw_body .list-group-item")[1];
+        assert.strictEqual(
+            row.textContent.trim(),
+            "07:00 - 19:00 (12 hours)",
+            "start and end hours shouldn't have been changed"
+        );
+    });
+
+    QUnit.test(`drag and drop on month mode with all_day mapping`, async (assert) => {
+        // Same test as before but in calendarEventToRecord (calendar_model.js) there is
+        // different condition branching with all_day mapping or not
+        assert.expect(1);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" event_open_popup="1" quick_add="0" all_day="allday">
+                    <field name="name" />
+                    <field name="partner_id" />
+                </calendar>
+            `,
+        });
+
+        // Create event (on 20 december)
+        await clickDate(target, "2016-12-20");
+        await editInput(target.querySelector(".modal-body input"), null, "An event");
+        await click(target.querySelector(`.o_field_widget[name="allday"] input`));
+
+        // use datepicker to enter a date: 12/20/2016 07:00:00
+        await click(target, `.o_field_widget[name="start"] .o_datepicker .o_datepicker_input`);
+        await click(
+            document.body,
+            `.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]`
+        );
+        await click(document.body, `.bootstrap-datetimepicker-widget .timepicker .timepicker-hour`);
+        await click(
+            document.body.querySelectorAll(
+                `.bootstrap-datetimepicker-widget .timepicker-hours td.hour`
+            )[7]
+        );
+        await click(
+            document.body,
+            `.bootstrap-datetimepicker-widget .picker-switch a[data-action="close"]`
+        );
+
+        // use datepicker to enter a date: 12/20/2016 19:00:00
+        await click(target, `.o_field_widget[name="stop"] .o_datepicker .o_datepicker_input`);
+        await click(
+            document.body,
+            `.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]`
+        );
+        await click(document.body, `.bootstrap-datetimepicker-widget .timepicker .timepicker-hour`);
+        await click(
+            document.body.querySelectorAll(
+                `.bootstrap-datetimepicker-widget .timepicker-hours td.hour`
+            )[19]
+        );
+        await click(
+            document.body,
+            `.bootstrap-datetimepicker-widget .picker-switch a[data-action="close"]`
+        );
+
+        await click(target.querySelector(".modal .o_form_button_save"));
+
+        // Move event to another day (on 19 december)
+        await moveEventToDate(target, 8, "2016-12-19");
+        await clickEvent(target, 8);
+
+        const row = target.querySelectorAll(".o_cw_body .list-group-item")[1];
+        assert.strictEqual(
+            row.textContent.trim(),
+            "07:00 - 19:00 (12 hours)",
+            "start and end hours shouldn't have been changed"
+        );
+    });
+
+    QUnit.test(`drag and drop on month mode with date_start and date_delay`, async (assert) => {
+        assert.expect(1);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_delay="delay" mode="month">
+                    <field name="name" />
+                    <field name="start" />
+                    <field name="delay" />
+                </calendar>
+            `,
+            mockRPC(route, { args, method }) {
+                if (method === "write") {
+                    // delay should not be written at drag and drop
+                    assert.strictEqual(args[1].delay, undefined);
+                }
+            },
+        });
+
+        // Create event (on 20 december)
+        await clickDate(target, "2016-12-20");
+        await editInput(target.querySelector(".modal-body input"), null, "An event");
+        await click(target, ".o-calendar-quick-create--create-btn");
+
+        // Move event to another day (on 27 november)
+        await moveEventToDate(target, 8, "2016-11-27");
+    });
+
+    QUnit.test(`form_view_id attribute works (for creating events)`, async (assert) => {
+        assert.expect(1);
+
+        serviceRegistry.add(
+            "action",
+            {
+                ...actionService,
+                start() {
+                    const result = actionService.start(...arguments);
+                    const doAction = result.doAction;
+                    result.doAction = (request) => {
+                        assert.strictEqual(
+                            request.views[0][0],
+                            42,
+                            "should do a do_action with view id 42"
+                        );
+                        return doAction(request);
+                    };
+                    return result;
+                },
+            },
+            { force: true }
+        );
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" form_view_id="42" />
+            `,
+            mockRPC(route, { method }) {
+                if (method === "create") {
+                    // we simulate here the case where a create call with just
+                    // the field name fails.  This is a normal flow, the server
+                    // reject the create rpc (quick create), then the web client
+                    // fall back to a form view. This happens typically when a
+                    // model has required fields
+                    return Promise.reject("None shall pass!");
+                }
+            },
+        });
+
+        await clickDate(target, "2016-12-13");
+        await editInput(target.querySelector(".modal-body input"), null, "It's just a fleshwound");
+        await click(target, ".o-calendar-quick-create--create-btn");
+    });
+
+    QUnit.test(`form_view_id attribute works with popup (for creating events)`, async (assert) => {
+        assert.expect(1);
+
+        serviceRegistry.add(
+            "action",
+            {
+                ...actionService,
+                start() {
+                    const result = actionService.start(...arguments);
+                    const doAction = result.doAction;
+                    result.doAction = (request) => {
+                        assert.strictEqual(request.views[0][0], 1, "should load view with id 1");
+                        return doAction(request);
+                    };
+                    return result;
+                },
+            },
+            { force: true }
+        );
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" open_event_popup="1" quick_add="0" form_view_id="1">
+                    <field name="name" />
+                </calendar>
+            `,
+        });
+
+        await clickDate(target, "2016-12-13");
+    });
+
+    QUnit.test(`calendar fallback to form view id in action if necessary`, async (assert) => {
+        assert.expect(1);
+        serviceRegistry.add(
+            "action",
+            {
+                ...actionService,
+                start() {
+                    const result = actionService.start(...arguments);
+                    const doAction = result.doAction;
+                    result.doAction = (request) => {
+                        assert.deepEqual(request, {
+                            type: "ir.actions.act_window",
+                            res_model: "event",
+                            views: [[43, "form"]], // should use the view id from the config
+                            target: "current",
+                            context: {
+                                lang: "en",
+                                uid: 7,
+                                tz: "taht",
+                                default_name: "It's just a fleshwound",
+                                default_start: "2016-12-13 06:00:00",
+                                default_stop: "2016-12-13 18:00:00",
+                                default_allday: true,
+                            },
+                        });
+                        return doAction(request);
+                    };
+                    return result;
+                },
+            },
+            { force: true }
+        );
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `<calendar date_start="start" date_stop="stop" mode="month" />`,
+            config: { views: [[43, "form"]] },
+            mockRPC(route, { method }) {
+                if (method === "create") {
+                    // we simulate here the case where a create call with just
+                    // the field name fails.  This is a normal flow, the server
+                    // reject the create rpc (quick create), then the web client
+                    // fall back to a form view. This happens typically when a
+                    // model has required fields
+                    return Promise.reject("None shall pass!");
+                }
+            },
+        });
+
+        await clickDate(target, "2016-12-13");
+        await editInput(target.querySelector(".modal-body input"), null, "It's just a fleshwound");
+        await click(target, ".o-calendar-quick-create--create-btn");
+    });
+
+    QUnit.test(`fullcalendar initializes with right locale`, async (assert) => {
+        // The machine that runs this test must have this locale available
+        patchWithCleanup(luxon.Settings, { defaultLocale: "fr" });
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `<calendar date_start="start" date_stop="stop" mode="week"/>`,
+        });
+        assert.deepEqual(
+            [...target.querySelectorAll(".fc-day-header")].map((el) => el.textContent),
+            ["dim. 11", "lun. 12", "mar. 13", "mer. 14", "jeu. 15", "ven. 16", "sam. 17"]
+        );
+    });
+
+    QUnit.test(`initial_date given in the context`, async (assert) => {
+        assert.expect(1);
+        serverData.views = {
+            "event,1,calendar": `<calendar date_start="start" date_stop="stop" mode="day"/>`,
+            "event,false,search": `<search />`,
+        };
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "context initial date",
+                res_model: "event",
+                type: "ir.actions.act_window",
+                views: [[1, "calendar"]],
+                context: { initial_date: "2016-01-30 08:00:00" }, // 30th of january
+            },
+        };
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 1);
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb-item").textContent,
+            "context initial date (January 30, 2016)",
+            "should display day passed in the context"
+        );
+    });
+
+    QUnit.test(`default week start (US) month mode`, async (assert) => {
+        // if not given any option, default week start is on Sunday
+        assert.expect(8);
+
+        // 2019-09-12 08:00:00
+        patchDate(2019, 8, 12, 8, 0, 0);
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" />
+            `,
+            mockRPC(route, { method, model, kwargs }) {
+                if (model === "event" && method === "search_read") {
+                    assert.deepEqual(
+                        kwargs.domain,
+                        [
+                            ["start", "<=", "2019-10-12 22:59:59"],
+                            ["stop", ">=", "2019-08-31 23:00:00"],
+                        ],
+                        "The domain to search events in should be correct"
+                    );
+                }
+            },
+        });
+
+        const dayHeaders = target.querySelectorAll(".fc-day-header");
+        assert.strictEqual(
+            dayHeaders[0].textContent,
+            "Sunday",
+            "The first day of the week should be Sunday"
+        );
+        assert.strictEqual(
+            dayHeaders[dayHeaders.length - 1].textContent,
+            "Saturday",
+            "The last day of the week should be Saturday"
+        );
+
+        const dayTops = target.querySelectorAll(".fc-day-top");
+        assert.strictEqual(
+            dayTops[0].querySelector(".fc-week-number").textContent,
+            "36",
+            "The number of the week should be correct"
+        );
+        assert.strictEqual(dayTops[0].querySelector(".fc-day-number").textContent, "1");
+        assert.strictEqual(dayTops[0].dataset.date, "2019-09-01");
+        assert.strictEqual(
+            dayTops[dayTops.length - 1].querySelector(".fc-day-number").textContent,
+            "12"
+        );
+        assert.strictEqual(dayTops[dayTops.length - 1].dataset.date, "2019-10-12");
+    });
+
+    QUnit.test(`European week start month mode`, async (assert) => {
+        assert.expect(8);
+
+        patchDate(2019, 8, 15, 8, 0, 0); // 2019-09-15 08:00:00
+        // the week start depends on the locale
+        patchWithCleanup(localization, { weekStart: 1 });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="month" />
+            `,
+            mockRPC(route, { method, model, kwargs }) {
+                if (model === "event" && method === "search_read") {
+                    assert.deepEqual(
+                        kwargs.domain,
+                        [
+                            ["start", "<=", "2019-10-06 22:59:59"],
+                            ["stop", ">=", "2019-08-25 23:00:00"],
+                        ],
+                        "The domain to search events in should be correct"
+                    );
+                }
+            },
+        });
+
+        const dayHeaders = target.querySelectorAll(".fc-day-header");
+        assert.strictEqual(
+            dayHeaders[0].textContent,
+            "Monday",
+            "The first day of the week should be Monday"
+        );
+        assert.strictEqual(
+            dayHeaders[dayHeaders.length - 1].textContent,
+            "Sunday",
+            "The last day of the week should be Sunday"
+        );
+
+        const dayTops = target.querySelectorAll(".fc-day-top");
+        assert.strictEqual(
+            dayTops[0].querySelector(".fc-week-number").textContent,
+            "35",
+            "The number of the week should be correct"
+        );
+        assert.strictEqual(dayTops[0].querySelector(".fc-day-number").textContent, "26");
+        assert.strictEqual(dayTops[0].dataset.date, "2019-08-26");
+        assert.strictEqual(
+            dayTops[dayTops.length - 1].querySelector(".fc-day-number").textContent,
+            "6"
+        );
+        assert.strictEqual(dayTops[dayTops.length - 1].dataset.date, "2019-10-06");
+    });
+
+    QUnit.test(`Monday week start week mode`, async (assert) => {
+        assert.expect(3);
+
+        patchDate(2019, 8, 15, 8, 0, 0); // 2019-09-15 08:00:00
+        // the week start depends on the locale
+        patchWithCleanup(localization, { weekStart: 1 });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="week" />
+            `,
+            mockRPC(route, { method, model, kwargs }) {
+                if (model === "event" && method === "search_read") {
+                    assert.deepEqual(
+                        kwargs.domain,
+                        [
+                            ["start", "<=", "2019-09-15 22:59:59"],
+                            ["stop", ">=", "2019-09-08 23:00:00"],
+                        ],
+                        "The domain to search events in should be correct"
+                    );
+                }
+            },
+        });
+
+        const dayHeaders = target.querySelectorAll(".fc-day-header");
+        assert.strictEqual(
+            dayHeaders[0].textContent,
+            "Mon 9",
+            "The first day of the week should be Monday the 9th"
+        );
+        assert.strictEqual(
+            dayHeaders[dayHeaders.length - 1].textContent,
+            "Sun 15",
+            "The last day of the week should be Sunday the 15th"
+        );
+    });
+
+    QUnit.test(`Saturday week start week mode`, async (assert) => {
+        assert.expect(3);
+
+        patchDate(2019, 8, 12, 8, 0, 0); // 2019-09-12 08:00:00
+
+        // the week start depends on the locale
+        patchWithCleanup(localization, { weekStart: 6 });
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" mode="week" />
+            `,
+            mockRPC(route, { method, model, kwargs }) {
+                if (model === "event" && method === "search_read") {
+                    assert.deepEqual(
+                        kwargs.domain,
+                        [
+                            ["start", "<=", "2019-09-13 22:59:59"],
+                            ["stop", ">=", "2019-09-06 23:00:00"],
+                        ],
+                        "The domain to search events in should be correct"
+                    );
+                }
+            },
+        });
+
+        const dayHeaders = target.querySelectorAll(".fc-day-header");
+        assert.strictEqual(
+            dayHeaders[0].textContent,
+            "Sat 7",
+            "The first day of the week should be Saturday the 7th"
+        );
+        assert.strictEqual(
+            dayHeaders[dayHeaders.length - 1].textContent,
+            "Fri 13",
+            "The last day of the week should be Friday the 13th"
+        );
+    });
+
+    QUnit.test(
+        `edit record and attempt to create a record with "create" attribute set to false`,
+        async (assert) => {
+            assert.expect(8);
+
+            await makeView({
+                type: "calendar",
+                resModel: "event",
+                serverData,
+                arch: `
+                    <calendar event_open_popup="1" create="0" date_start="start" date_stop="stop" mode="month" />
+                `,
+                mockRPC(route, { args, method }) {
+                    if (method === "write") {
+                        assert.deepEqual(
+                            args[1],
+                            { name: "event 4 modified" },
+                            "should update the record"
+                        );
+                    }
+                },
+            });
+
+            // editing existing events should still be possible
+            // click on an existing event to open the formViewDialog
+            await clickEvent(target, 4);
+            assert.containsOnce(target, ".o_cw_popover", "should open a popover clicking on event");
+            assert.containsOnce(
+                target,
+                ".o_cw_popover .o_cw_popover_edit",
+                "popover should have an edit button"
+            );
+            assert.containsOnce(
+                target,
+                ".o_cw_popover .o_cw_popover_delete",
+                "popover should have a delete button"
+            );
+            assert.containsOnce(
+                target,
+                ".o_cw_popover .o_cw_popover_close",
+                "popover should have a close button"
+            );
+
+            await click(target, ".o_cw_popover .o_cw_popover_edit");
+            assert.containsOnce(
+                target,
+                ".modal-body",
+                "should open the form view in dialog when click on edit"
+            );
+
+            await editInput(target.querySelector(".modal-body input"), null, "event 4 modified");
+            await click(target.querySelector(".modal-footer .o_form_button_save"));
+            assert.containsNone(target, ".modal", "save button should close the modal");
+
+            // creating an event should not be possible
+            // attempt to create a new event with create set to false
+            await clickDate(target, "2016-12-13");
+            assert.containsNone(
+                target,
+                ".modal",
+                "shouldn't open a quick create dialog for creating a new event with create attribute set to false"
+            );
+        }
+    );
+
+    QUnit.test(
+        `attempt to create record with "create" and "quick_add" attributes set to false`,
+        async (assert) => {
+            assert.expect(1);
+
+            await makeView({
+                type: "calendar",
+                resModel: "event",
+                serverData,
+                arch: `
+                    <calendar create="0" event_open_popup="1" quick_add="0" date_start="start" date_stop="stop" mode="month" />
+                `,
+            });
+
+            // attempt to create a new event with create set to false
+            await clickDate(target, "2016-12-13");
+            assert.containsNone(
+                target,
+                ".modal",
+                "shouldn't open a form view for creating a new event with create attribute set to false"
+            );
+        }
+    );
+
+    QUnit.test(
+        `attempt to create multiples events and the same day and check the ordering on month view`,
+        async (assert) => {
+            // This test aims to verify that the order of the event in month view is coherent with their start date.
+            patchDate(2020, 2, 12, 8, 0, 0); // 2020-03-12 08:00:00
+
+            serverData.models.event.records = [
+                {
+                    id: 1,
+                    name: "Second event",
+                    start: "2020-03-12 05:00:00",
+                    stop: "2020-03-12 07:00:00",
+                    allday: false,
+                },
+                {
+                    id: 2,
+                    name: "First event",
+                    start: "2020-03-12 02:00:00",
+                    stop: "2020-03-12 03:00:00",
+                    allday: false,
+                },
+                {
+                    id: 3,
+                    name: "Third event",
+                    start: "2020-03-12 08:00:00",
+                    stop: "2020-03-12 09:00:00",
+                    allday: false,
+                },
+            ];
+
+            await makeView({
+                type: "calendar",
+                resModel: "event",
+                serverData,
+                arch: `
+                    <calendar date_start="start" date_stop="stop" all_day="allday" mode="month" />
+                `,
+            });
+
+            assert.containsOnce(
+                target,
+                ".o_calendar_renderer .fc-view-container",
+                "should display in the calendar"
+            );
+
+            // Testing the order of the events: by start date
+            assert.containsN(target, ".o_event_title", 3, "3 events should be available");
+            assert.strictEqual(
+                target.querySelector(".o_event_title").textContent,
+                "First event",
+                "First event should be on top"
+            );
+        }
+    );
+
+    QUnit.test(`create event and resize to next day (24h) on week mode`, async (assert) => {
+        // WOWL FYI Legacy test name: "drag and drop 24h event on week mode"
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar event_open_popup="1" quick_add="0" date_start="start" date_stop="stop" all_day="allday" mode="week" />
+            `,
+            mockRPC(route, { args, method }) {
+                if (method === "create") {
+                    assert.deepEqual(args[0], {
+                        allday: false,
+                        name: "foobar",
+                        start: "2016-12-13 07:00:00",
+                        start_date: false,
+                        stop: "2016-12-13 15:00:00",
+                        stop_date: false,
+                    });
+                }
+                if (method === "write") {
+                    assert.deepEqual(args[1], {
+                        allday: false,
+                        start: "2016-12-13 07:00:00",
+                        stop: "2016-12-14 07:00:00",
+                    });
+                }
+            },
+        });
+        await selectTimeRange(target, "2016-12-13 08:00:00", "2016-12-13 16:00:00");
+        await editInput(target, ".modal [name=name] input", "foobar");
+        await click(target, ".modal .o_form_button_save");
+        await resizeEventToTime(target, 8, "2016-12-14 08:00:00");
+        const event = findEvent(target, 8);
+        assert.strictEqual(event.textContent, "foobar");
+        assert.notOk(event.closest(".fc-day-grid"), "event should not be in the all day slots");
+    });
+
+    QUnit.test(`correctly display year view`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar create="0" event_open_popup="1" date_start="start" date_stop="stop" all_day="allday" mode="year" attendee="partner_ids" color="partner_id">
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                    <field name="partner_id" filters="1" invisible="1" />
+                    <field name="is_hatched" invisible="1" />
+                    <field name="is_striked" invisible="1" />
+                </calendar>
+            `,
+        });
+
+        await toggleFilter(target, "partner_ids", 1);
+        await toggleFilter(target, "partner_ids", 2);
+
+        // Check view
+        assert.containsN(target, ".fc-month", 12);
+        assert.strictEqual(
+            target.querySelector(".fc-month .fc-header-toolbar").textContent,
+            "Jan 2016"
+        );
+        assert.containsN(
+            target,
+            ".fc-bgevent",
+            7,
+            "There should be 6 events displayed but there is 1 split on 2 weeks"
+        );
+        assert.containsN(target, ".o_event_hatched", 3);
+        assert.containsOnce(target, ".o_event_striked");
+
+        await clickDate(target, "2016-11-17");
+        assert.containsNone(target, ".o_popover");
+
+        await clickDate(target, "2016-11-16");
+        assert.containsOnce(target, ".o_popover");
+
+        let popoverText = target
+            .querySelector(".o_popover")
+            .textContent.replace(/\s{2,}/g, " ")
+            .trim();
+        assert.strictEqual(popoverText, "November 14-16, 2016event 7");
+        await click(target, ".o_cw_popover_close");
+        assert.containsNone(target, ".o_popover");
+
+        await clickDate(target, "2016-11-14");
+        assert.containsOnce(target, ".o_popover");
+        popoverText = target
+            .querySelector(".o_popover")
+            .textContent.replace(/\s{2,}/g, " ")
+            .trim();
+        assert.strictEqual(popoverText, "November 14-16, 2016event 7");
+        await click(target, ".o_cw_popover_close");
+        assert.containsNone(target, ".o_popover");
+
+        await clickDate(target, "2016-11-13");
+        assert.containsNone(target, ".o_popover");
+
+        await clickDate(target, "2016-12-10");
+        assert.containsNone(target, ".o_popover");
+
+        await clickDate(target, "2016-12-12");
+        assert.containsOnce(target, ".o_popover");
+        popoverText = target
+            .querySelector(".o_popover")
+            .textContent.replace(/\s{2,}/g, " ")
+            .trim();
+        assert.strictEqual(popoverText, "December 12, 201611:55 event 216:55 event 3");
+        await click(target, ".o_cw_popover_close");
+        assert.containsNone(target, ".o_popover");
+
+        await clickDate(target, "2016-12-14");
+        assert.containsOnce(target, ".o_popover");
+        popoverText = target
+            .querySelector(".o_popover")
+            .textContent.replace(/\s{2,}/g, " ")
+            .trim();
+        assert.strictEqual(popoverText, "December 14, 2016event 4December 13-20, 2016event 5");
+        await click(target, ".o_cw_popover_close");
+        assert.containsNone(target, ".o_popover");
+
+        await clickDate(target, "2016-12-21");
+        assert.containsNone(target, ".o_popover");
+    });
+
+    QUnit.test(`toggle filters in year view`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar event_open_popup="1" date_start="start" date_stop="stop" all_day="allday" mode="year" attendee="partner_ids" color="partner_id">
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" />
+                    <field name="partner_id" filters="1" invisible="1" />
+                </calendar>
+            `,
+        });
+
+        function checkEvents(countMap) {
+            for (const [id, count] of Object.entries(countMap)) {
+                assert.containsN(target, `.fc-bgevent[data-event-id="${id}"]`, count);
+            }
+        }
+
+        // activate partner filter
+        await toggleFilter(target, "partner_ids", 1);
+        await toggleFilter(target, "partner_ids", 2);
+        checkEvents({ 1: 1, 2: 1, 3: 1, 4: 1, 5: 2, 7: 1 });
+
+        await toggleFilter(target, "partner_ids", 2);
+        checkEvents({ 1: 1, 2: 1, 3: 1, 4: 1, 5: 0, 7: 0 });
+
+        await toggleFilter(target, "partner_id", 1);
+        checkEvents({ 1: 0, 2: 0, 3: 1, 4: 0, 5: 0, 7: 0 });
+
+        await toggleFilter(target, "partner_id", 4);
+        checkEvents({ 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 7: 0 });
+
+        await toggleFilter(target, "partner_ids", 1);
+        checkEvents({ 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 7: 0 });
+
+        await toggleFilter(target, "partner_ids", 2);
+        checkEvents({ 1: 1, 2: 1, 3: 0, 4: 0, 5: 2, 7: 1 });
+
+        await toggleFilter(target, "partner_id", 4);
+        checkEvents({ 1: 1, 2: 1, 3: 0, 4: 0, 5: 0, 7: 1 });
+    });
+
+    QUnit.test(`allowed scales`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" scales="day,week" />
+            `,
+        });
+
+        await click(target, ".o_calendar_scale_buttons .scale_button_selection");
+        assert.containsOnce(target, ".o_calendar_scale_buttons .o_calendar_button_day");
+        assert.containsOnce(target, ".o_calendar_scale_buttons .o_calendar_button_week");
+        assert.containsNone(target, ".o_calendar_scale_buttons .o_calendar_button_month");
+        assert.containsNone(target, ".o_calendar_scale_buttons .o_calendar_button_year");
+    });
+
+    QUnit.test(`click outside the popup should close it`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar create="0" event_open_popup="1" quick_add="0" date_start="start" date_stop="stop" all_day="allday" mode="month" />
+            `,
+        });
+
+        assert.containsNone(target, ".o_cw_popover");
+
+        await clickEvent(target, 1);
+        assert.containsOnce(target, ".o_cw_popover", "open popup when click on event");
+
+        await click(target, ".o_cw_popover .o_cw_body");
+        assert.containsOnce(target, ".o_cw_popover", "keep popup openned when click inside popup");
+
+        await click(target);
+        assert.containsNone(target, ".o_cw_popover", "close popup when click outside popup");
+    });
+
+    QUnit.test(`fields are added in the right order in popover`, async (assert) => {
+        const def = makeDeferred();
+        class DeferredWidget extends owl.Component {
+            setup() {
+                owl.onWillStart(() => def);
+            }
+        }
+        DeferredWidget.template = owl.xml``;
+        fieldRegistry.add("deferred_widget", DeferredWidget);
+        registerCleanup(() => fieldRegistry.remove("deferred_widget"));
+
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="month">
+                    <field name="user_id" widget="deferred_widget" />
+                    <field name="name" />
+                </calendar>
+            `,
+        });
+
+        await clickEvent(target, 4);
+        assert.containsNone(target, ".o_cw_popover");
+
+        def.resolve();
+        await nextTick();
+        assert.containsOnce(target, ".o_cw_popover");
+
+        assert.strictEqual(
+            target.querySelector(".o_cw_popover .o_cw_popover_fields_secondary").textContent,
+            "user : name : event 4"
+        );
+    });
+
+    QUnit.test(`select events and discard create`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar event_open_popup="1" date_start="start" date_stop="stop" all_day="allday" mode="year" />
+            `,
+        });
+
+        assert.containsN(target, ".fc-dayGridMonth-view", 12, "should display in year mode");
+        await selectDateRange(target, "2016-11-13", "2016-11-19");
+        assert.containsOnce(
+            target,
+            ".o-calendar-quick-create",
+            "should open the form view in dialog when select multiple days"
+        );
+
+        assert.hasAttrValue(
+            target.querySelector(".fc-highlight"),
+            "colspan",
+            "7",
+            "should highlight 7 days"
+        );
+
+        await click(target, ".o-calendar-quick-create--cancel-btn");
+        assert.containsNone(target, ".fc-highlight", "should not highlight days");
+    });
+
+    QUnit.test(`create event in year view`, async (assert) => {
+        assert.expect(6);
+        let expectedEvent;
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar event_open_popup="1" date_start="start" date_stop="stop" all_day="allday" mode="year" />
+            `,
+            mockRPC(route, { method, args }) {
+                if (method === "create") {
+                    assert.deepEqual(args[0], expectedEvent);
+                }
+            },
+        });
+
+        // Select the whole month of July
+        expectedEvent = {
+            allday: true,
+            start: "2016-07-01",
+            stop: "2016-07-31",
+            name: "Whole July",
+        };
+        await selectDateRange(target, "2016-07-01", "2016-07-31");
+        await editInput(target, ".o-calendar-quick-create--input[name=title]", "Whole July");
+        await click(target, ".o-calendar-quick-create--create-btn");
+
+        // get all rows for event 8
+        assert.containsN(target, ".o_event[data-event-id='8']", 6);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_event[data-event-id='8']")].map((cell) => cell.colSpan),
+            [2, 7, 7, 7, 7, 1],
+            "rows should highlight multiple days"
+        );
+
+        // Select the whole month of November
+        expectedEvent = {
+            allday: true,
+            start: "2016-11-01",
+            stop: "2016-11-30",
+            name: "Whole November",
+        };
+        await selectDateRange(target, "2016-11-01", "2016-11-30");
+        await editInput(target, ".o-calendar-quick-create--input[name=title]", "Whole November");
+        await click(target, ".o-calendar-quick-create--create-btn");
+
+        // get all rows for event 9
+        assert.containsN(target, ".o_event[data-event-id='9']", 5);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_event[data-event-id='9']")].map((cell) => cell.colSpan),
+            [5, 7, 7, 7, 4],
+            "rows should highlight multiple days"
+        );
+    });
+
+    QUnit.test(`popover ignores readonly field modifier`, async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" all_day="allday" mode="month">
+                    <field name="name" attrs="{'readonly': [['unknown_field', '=', 42]]}" />
+                </calendar>
+            `,
+        });
+
+        await clickEvent(target, 4);
+        // test would fail here if we don't ignore readonly modifier
+        assert.containsOnce(target, ".o_cw_popover");
+    });
+});
diff --git a/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js b/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js
new file mode 100644
index 00000000000..4ffb9288104
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js
@@ -0,0 +1,120 @@
+/** @odoo-module **/
+
+import { CalendarYearPopover } from "@web/views/calendar/calendar_year/calendar_year_popover";
+import { click, getFixture } from "../../helpers/utils";
+import { mountComponent, makeEnv, makeFakeModel, makeFakeRecords, makeFakeDate } from "./helpers";
+
+let target, fakePopoverRecords;
+
+async function start(params = {}) {
+    const { services, props, model: modelParams } = params;
+    const env = await makeEnv(services);
+    const model = makeFakeModel(modelParams);
+    return await mountComponent(CalendarYearPopover, env, {
+        model,
+        date: makeFakeDate(),
+        records: fakePopoverRecords,
+        createRecord() {},
+        deleteRecord() {},
+        editRecord() {},
+        close() {},
+        ...props,
+    });
+}
+
+QUnit.module("CalendarView - YearPopover", ({ beforeEach }) => {
+    beforeEach(() => {
+        target = getFixture();
+        fakePopoverRecords = [
+            {
+                id: 1,
+                start: makeFakeDate(),
+                end: makeFakeDate(),
+                isAllDay: true,
+                title: "R1",
+            },
+            {
+                id: 2,
+                start: makeFakeDate().set({ hours: 14 }),
+                end: makeFakeDate().set({ hours: 16 }),
+                isAllDay: false,
+                title: "R2",
+            },
+            {
+                id: 3,
+                start: makeFakeDate().minus({ days: 1 }),
+                end: makeFakeDate().plus({ days: 1 }),
+                isAllDay: true,
+                title: "R3",
+            },
+            {
+                id: 4,
+                start: makeFakeDate().minus({ days: 3 }),
+                end: makeFakeDate().plus({ days: 1 }),
+                isAllDay: true,
+                title: "R4",
+            },
+            {
+                id: 5,
+                start: makeFakeDate().minus({ days: 1 }),
+                end: makeFakeDate().plus({ days: 3 }),
+                isAllDay: true,
+                title: "R5",
+            },
+        ];
+    });
+
+    QUnit.test("canCreate is true", async (assert) => {
+        await start({ model: { canCreate: true } });
+        assert.containsOnce(target, ".o_cw_popover_create");
+    });
+
+    QUnit.test("canCreate is false", async (assert) => {
+        await start({ model: { canCreate: false } });
+        assert.containsNone(target, ".o_cw_popover_create");
+    });
+
+    QUnit.test("click on create button", async (assert) => {
+        assert.expect(3);
+        await start({
+            props: {
+                createRecord: () => assert.step("create"),
+            },
+            model: { canCreate: true },
+        });
+        assert.containsOnce(target, ".o_cw_popover_create");
+        await click(target, ".o_cw_popover_create");
+        assert.verifySteps(["create"]);
+    });
+
+    QUnit.test("group records", async (assert) => {
+        await start({});
+
+        assert.containsN(target, ".o_cw_body > div", 4);
+        assert.containsN(target, ".o_cw_body > a", 5);
+
+        const sectionTitles = target.querySelectorAll(".o_cw_body > div");
+        assert.strictEqual(sectionTitles[0].textContent.trim(), "July 16, 2021");
+        assert.strictEqual(sectionTitles[1].textContent.trim(), "July 13-17, 2021");
+        assert.strictEqual(sectionTitles[2].textContent.trim(), "July 15-17, 2021");
+        assert.strictEqual(sectionTitles[3].textContent.trim(), "July 15-19, 2021");
+
+        assert.strictEqual(
+            target.querySelector(".o_cw_body").textContent.trim(),
+            "July 16, 2021R114:00 R2July 13-17, 2021R4July 15-17, 2021R3July 15-19, 2021R5"
+        );
+    });
+
+    QUnit.test("click on record", async (assert) => {
+        assert.expect(3);
+        await start({
+            props: {
+                records: [makeFakeRecords()[3]],
+                editRecord: () => assert.step("edit"),
+            },
+        });
+        assert.containsOnce(target, ".o_cw_body > a");
+        await click(target, ".o_cw_body > a");
+        assert.verifySteps(["edit"]);
+    });
+});
diff --git a/addons/web/static/tests/views/calendar/calendar_year_renderer_tests.js b/addons/web/static/tests/views/calendar/calendar_year_renderer_tests.js
new file mode 100644
index 00000000000..3b5dda46e4f
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/calendar_year_renderer_tests.js
@@ -0,0 +1,139 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { CalendarYearRenderer } from "@web/views/calendar/calendar_year/calendar_year_renderer";
+import { getFixture, patchWithCleanup } from "../../helpers/utils";
+import { clickDate, mountComponent, selectDateRange, makeEnv, makeFakeModel } from "./helpers";
+
+let target;
+
+async function start(params = {}) {
+    const { services, props, model: modelParams } = params;
+    const env = await makeEnv(services);
+    const model = makeFakeModel(modelParams);
+    return await mountComponent(CalendarYearRenderer, env, {
+        model,
+        createRecord() {},
+        deleteRecord() {},
+        editRecord() {},
+        ...props,
+    });
+}
+
+QUnit.module("CalendarView - YearRenderer", ({ beforeEach }) => {
+    beforeEach(() => {
+        target = getFixture();
+    });
+
+    QUnit.test("mount a CalendarYearRenderer", async (assert) => {
+        await start({});
+
+        assert.containsN(target, ".fc-month-container", 12);
+        const monthHeaders = target.querySelectorAll(".fc-header-toolbar .fc-center");
+
+        // check "title format"
+        assert.strictEqual(monthHeaders.length, 12);
+        const monthTitles = [
+            "Jan 2021",
+            "Feb 2021",
+            "Mar 2021",
+            "Apr 2021",
+            "May 2021",
+            "Jun 2021",
+            "Jul 2021",
+            "Aug 2021",
+            "Sep 2021",
+            "Oct 2021",
+            "Nov 2021",
+            "Dec 2021",
+        ];
+        for (let i = 0; i < 12; i++) {
+            assert.strictEqual(monthHeaders[i].textContent, monthTitles[i]);
+        }
+        const dayHeaders = target
+            .querySelector(".fc-month-container")
+            .querySelectorAll(".fc-day-header");
+
+        // check day header format
+        assert.strictEqual(dayHeaders.length, 7);
+        const dayTitles = ["S", "M", "T", "W", "T", "F", "S"];
+        for (let i = 0; i < 7; i++) {
+            assert.strictEqual(dayHeaders[i].textContent, dayTitles[i]);
+        }
+
+        // check showNonCurrentDates
+        assert.containsN(target, ".fc-day-number", 365);
+    });
+
+    QUnit.test("display events", async (assert) => {
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout: () => {},
+        });
+
+        await start({
+            props: {
+                createRecord(record) {
+                    assert.step(`${record.start.toISODate()} allDay:${record.isAllDay} no event`);
+                },
+            },
+            services: {
+                popover: {
+                    start: () => ({
+                        add: (target, _, props) => {
+                            assert.step(`${props.date.toISODate()} ${props.records[0].title}`);
+                            return () => {};
+                        },
+                    }),
+                },
+            },
+        });
+
+        await clickDate(target, "2021-07-15");
+        assert.verifySteps(["2021-07-15 allDay:true no event"]);
+        await clickDate(target, "2021-07-16");
+        assert.verifySteps(["2021-07-16 1 day, all day in July"]);
+        await clickDate(target, "2021-07-17");
+        assert.verifySteps(["2021-07-17 allDay:true no event"]);
+
+        await clickDate(target, "2021-07-18");
+        assert.verifySteps(["2021-07-18 3 days, all day in July"]);
+        await clickDate(target, "2021-07-19");
+        assert.verifySteps(["2021-07-19 3 days, all day in July"]);
+        await clickDate(target, "2021-07-20");
+        assert.verifySteps(["2021-07-20 3 days, all day in July"]);
+        await clickDate(target, "2021-07-21");
+        assert.verifySteps(["2021-07-21 allDay:true no event"]);
+
+        await clickDate(target, "2021-06-28");
+        assert.verifySteps(["2021-06-28 allDay:true no event"]);
+        await clickDate(target, "2021-06-29");
+        assert.verifySteps(["2021-06-29 Over June and July"]);
+        await clickDate(target, "2021-06-30");
+        assert.verifySteps(["2021-06-30 Over June and July"]);
+        await clickDate(target, "2021-07-01");
+        assert.verifySteps(["2021-07-01 Over June and July"]);
+        await clickDate(target, "2021-07-02");
+        assert.verifySteps(["2021-07-02 Over June and July"]);
+        await clickDate(target, "2021-07-03");
+        assert.verifySteps(["2021-07-03 Over June and July"]);
+        await clickDate(target, "2021-07-04");
+        assert.verifySteps(["2021-07-04 allDay:true no event"]);
+    });
+
+    QUnit.test("select a range of date", async (assert) => {
+        assert.expect(3);
+
+        await start({
+            props: {
+                createRecord(record) {
+                    assert.ok(record.isAllDay);
+                    assert.ok(record.start.equals(luxon.DateTime.local(2021, 7, 2, 0, 0, 0, 0)));
+                    assert.ok(record.end.equals(luxon.DateTime.local(2021, 7, 5, 0, 0, 0, 0)));
+                },
+            },
+        });
+
+        await selectDateRange(target, "2021-07-02", "2021-07-05");
+    });
+});
diff --git a/addons/web/static/tests/views/calendar/helpers.js b/addons/web/static/tests/views/calendar/helpers.js
new file mode 100644
index 00000000000..fa7ed0832d4
--- /dev/null
+++ b/addons/web/static/tests/views/calendar/helpers.js
@@ -0,0 +1,536 @@
+/** @odoo-module **/
+
+import { uiService } from "@web/core/ui/ui_service";
+import { registry } from "@web/core/registry";
+import { clearRegistryWithCleanup, makeTestEnv } from "../../helpers/mock_env";
+import { click, getFixture, mount, nextTick, triggerEvent } from "../../helpers/utils";
+import { setupViewRegistries } from "@web/../tests/views/helpers";
+
+export function makeEnv(services = {}) {
+    clearRegistryWithCleanup(registry.category("main_components"));
+    setupViewRegistries();
+    services = Object.assign(
+        {
+            ui: uiService,
+        },
+        services
+    );
+
+    for (const [key, service] of Object.entries(services)) {
+        registry.category("services").add(key, service, { force: true });
+    }
+
+    return makeTestEnv({
+        config: {
+            setDisplayName: () => {},
+        },
+    });
+}
+
+//------------------------------------------------------------------------------
+
+export async function mountComponent(C, env, props) {
+    const target = getFixture();
+    return await mount(C, target, { env, props });
+}
+
+//------------------------------------------------------------------------------
+
+export function makeFakeDate() {
+    return luxon.DateTime.local(2021, 7, 16, 8, 0, 0, 0);
+}
+
+export function makeFakeRecords() {
+    return {
+        1: {
+            id: 1,
+            title: "1 day, all day in July",
+            start: makeFakeDate(),
+            isAllDay: true,
+            end: makeFakeDate(),
+        },
+        2: {
+            id: 2,
+            title: "3 days, all day in July",
+            start: makeFakeDate().plus({ days: 2 }),
+            isAllDay: true,
+            end: makeFakeDate().plus({ days: 4 }),
+        },
+        3: {
+            id: 3,
+            title: "1 day, all day in June",
+            start: makeFakeDate().plus({ months: -1 }),
+            isAllDay: true,
+            end: makeFakeDate().plus({ months: -1 }),
+        },
+        4: {
+            id: 4,
+            title: "3 days, all day in June",
+            start: makeFakeDate().plus({ months: -1, days: 2 }),
+            isAllDay: true,
+            end: makeFakeDate().plus({ months: -1, days: 4 }),
+        },
+        5: {
+            id: 5,
+            title: "Over June and July",
+            start: makeFakeDate().startOf("month").plus({ days: -2 }),
+            isAllDay: true,
+            end: makeFakeDate().startOf("month").plus({ days: 2 }),
+        },
+    };
+}
+
+export const FAKE_FILTER_SECTIONS = [
+    {
+        label: "Attendees",
+        fieldName: "partner_ids",
+        avatar: {
+            model: "res.partner",
+            field: "avatar_128",
+        },
+        hasAvatar: true,
+        write: {
+            model: "filter_partner",
+            field: "partner_id",
+        },
+        canCollapse: true,
+        canAddFilter: true,
+        filters: [
+            {
+                type: "user",
+                label: "Mitchell Admin",
+                active: true,
+                value: 3,
+                colorIndex: 3,
+                recordId: null,
+                canRemove: false,
+                hasAvatar: true,
+            },
+            {
+                type: "all",
+                label: "Everybody's calendar",
+                active: false,
+                value: "all",
+                colorIndex: null,
+                recordId: null,
+                canRemove: false,
+                hasAvatar: false,
+            },
+            {
+                type: "record",
+                label: "Brandon Freeman",
+                active: true,
+                value: 4,
+                colorIndex: 4,
+                recordId: 1,
+                canRemove: true,
+                hasAvatar: true,
+            },
+            {
+                type: "record",
+                label: "Marc Demo",
+                active: false,
+                value: 6,
+                colorIndex: 6,
+                recordId: 2,
+                canRemove: true,
+                hasAvatar: true,
+            },
+        ],
+    },
+    {
+        label: "Users",
+        fieldName: "user_id",
+        avatar: {
+            model: null,
+            field: null,
+        },
+        hasAvatar: false,
+        write: {
+            model: null,
+            field: null,
+        },
+        canCollapse: false,
+        canAddFilter: false,
+        filters: [
+            {
+                type: "record",
+                label: "Brandon Freeman",
+                active: false,
+                value: 1,
+                colorIndex: false,
+                recordId: null,
+                canRemove: true,
+                hasAvatar: true,
+            },
+            {
+                type: "record",
+                label: "Marc Demo",
+                active: false,
+                value: 2,
+                colorIndex: false,
+                recordId: null,
+                canRemove: true,
+                hasAvatar: true,
+            },
+        ],
+    },
+];
+
+export const FAKE_FIELDS = {
+    id: { string: "Id", type: "integer" },
+    user_id: { string: "User", type: "many2one", relation: "user", default: -1 },
+    partner_id: {
+        string: "Partner",
+        type: "many2one",
+        relation: "partner",
+        related: "user_id.partner_id",
+        default: 1,
+    },
+    name: { string: "Name", type: "char" },
+    start_date: { string: "Start Date", type: "date" },
+    stop_date: { string: "Stop Date", type: "date" },
+    start: { string: "Start Datetime", type: "datetime" },
+    stop: { string: "Stop Datetime", type: "datetime" },
+    delay: { string: "Delay", type: "float" },
+    allday: { string: "Is All Day", type: "boolean" },
+    partner_ids: {
+        string: "Attendees",
+        type: "one2many",
+        relation: "partner",
+        default: [[6, 0, [1]]],
+    },
+    type: { string: "Type", type: "integer" },
+    event_type_id: { string: "Event Type", type: "many2one", relation: "event_type" },
+    color: { string: "Color", type: "integer", related: "event_type_id.color" },
+};
+
+function makeFakeModelState() {
+    return {
+        canCreate: true,
+        canDelete: true,
+        canEdit: true,
+        date: makeFakeDate(),
+        fieldMapping: {
+            date_start: "start_date",
+            date_stop: "stop_date",
+            date_delay: "delay",
+            all_day: "allday",
+            color: "color",
+        },
+        fieldNames: ["start_date", "stop_date", "color", "delay", "allday", "user_id"],
+        fields: FAKE_FIELDS,
+        filterSections: FAKE_FILTER_SECTIONS,
+        firstDayOfWeek: 0,
+        isDateHidden: false,
+        isTimeHidden: false,
+        hasAllDaySlot: true,
+        hasEditDialog: false,
+        hasQuickCreate: false,
+        popoverFields: {
+            name: { rawAttrs: {}, options: {} },
+        },
+        rangeEnd: makeFakeDate().endOf("month"),
+        rangeStart: makeFakeDate().startOf("month"),
+        records: makeFakeRecords(),
+        resModel: "event",
+        scale: "month",
+        scales: ["day", "week", "month", "year"],
+        unusualDays: [],
+    };
+}
+
+export function makeFakeModel(state = {}) {
+    return {
+        ...makeFakeModelState(),
+        load() {},
+        createFilter() {},
+        createRecord() {},
+        unlinkFilter() {},
+        unlinkRecord() {},
+        updateFilter() {},
+        updateRecord() {},
+        ...state,
+    };
+}
+
+// DOM Utils
+//------------------------------------------------------------------------------
+
+async function scrollTo(el, scrollParam) {
+    el.scrollIntoView(scrollParam);
+    await new Promise(window.requestAnimationFrame);
+}
+
+export function findPickedDate(target) {
+    return target.querySelector(".ui-datepicker-current-day");
+}
+
+export async function pickDate(target, date) {
+    const [year, month, day] = date.split("-");
+    const iMonth = parseInt(month, 10) - 1;
+    const iDay = parseInt(day, 10) - 1;
+    const el = target.querySelectorAll(
+        `.ui-datepicker-calendar td[data-year="${year}"][data-month="${iMonth}"]`
+    )[iDay];
+    el.scrollIntoView();
+    await click(el);
+}
+
+function findAllDaySlot(target, date) {
+    return target.querySelector(`.fc-day-grid .fc-day[data-date="${date}"]`);
+}
+
+export function findDateCell(target, date) {
+    return target.querySelector(`.fc-day-top[data-date="${date}"]`);
+}
+
+export function findEvent(target, eventId) {
+    return target.querySelector(`.fc-event[data-event-id="${eventId}"]`);
+}
+
+function findDateCol(target, date) {
+    return target.querySelector(`.fc-day-header[data-date="${date}"]`);
+}
+
+export function findTimeRow(target, time) {
+    return target.querySelector(`.fc-slats [data-time="${time}"] .fc-widget-content`);
+}
+
+async function triggerEventForCalendar(el, type, position = {}) {
+    const rect = el.getBoundingClientRect();
+    const x = position.x || rect.x + rect.width / 2;
+    const y = position.y || rect.y + rect.height / 2;
+    const attrs = {
+        which: 1,
+        clientX: x,
+        clientY: y,
+    };
+    await triggerEvent(el, null, type, attrs);
+}
+
+export async function clickAllDaySlot(target, date) {
+    const el = findAllDaySlot(target, date);
+    await scrollTo(el);
+    await triggerEventForCalendar(el, "mousedown");
+    await triggerEventForCalendar(el, "mouseup");
+    await nextTick();
+}
+
+export async function clickDate(target, date) {
+    const el = findDateCell(target, date);
+    await scrollTo(el);
+    await triggerEventForCalendar(el, "mousedown");
+    await triggerEventForCalendar(el, "mouseup");
+    await nextTick();
+}
+
+export async function clickEvent(target, eventId) {
+    const el = findEvent(target, eventId);
+    await scrollTo(el);
+    await click(el);
+    await nextTick();
+}
+
+export async function selectTimeRange(target, startDateTime, endDateTime) {
+    const [startDate, startTime] = startDateTime.split(" ");
+    const [endDate, endTime] = endDateTime.split(" ");
+
+    const startCol = findDateCol(target, startDate);
+    const endCol = findDateCol(target, endDate);
+    const startRow = findTimeRow(target, startTime);
+    const endRow = findTimeRow(target, endTime);
+
+    await scrollTo(startRow);
+    const startColRect = startCol.getBoundingClientRect();
+    const startRowRect = startRow.getBoundingClientRect();
+
+    await triggerEventForCalendar(startRow, "mousedown", {
+        x: startColRect.x + startColRect.width / 2,
+        y: startRowRect.y + 1,
+    });
+
+    await scrollTo(endRow, false);
+    const endColRect = endCol.getBoundingClientRect();
+    const endRowRect = endRow.getBoundingClientRect();
+
+    await triggerEventForCalendar(endRow, "mousemove", {
+        x: endColRect.x + endColRect.width / 2,
+        y: endRowRect.y - 1,
+    });
+    await triggerEventForCalendar(endRow, "mouseup", {
+        x: endColRect.x + endColRect.width / 2,
+        y: endRowRect.y - 1,
+    });
+    await nextTick();
+}
+
+export async function selectDateRange(target, startDate, endDate) {
+    const start = findDateCell(target, startDate);
+    const end = findDateCell(target, endDate);
+    await scrollTo(start);
+    await triggerEventForCalendar(start, "mousedown");
+    await scrollTo(end);
+    await triggerEventForCalendar(end, "mousemove");
+    await triggerEventForCalendar(end, "mouseup");
+    await nextTick();
+}
+
+export async function selectAllDayRange(target, startDate, endDate) {
+    const start = findAllDaySlot(target, startDate);
+    const end = findAllDaySlot(target, endDate);
+    await scrollTo(start);
+    await triggerEventForCalendar(start, "mousedown");
+    await scrollTo(end);
+    await triggerEventForCalendar(end, "mousemove");
+    await triggerEventForCalendar(end, "mouseup");
+    await nextTick();
+}
+
+export async function moveEventToDate(target, eventId, date, options = {}) {
+    const event = findEvent(target, eventId);
+    const cell = findDateCell(target, date);
+
+    await scrollTo(event);
+    await triggerEventForCalendar(event, "mousedown");
+
+    await scrollTo(cell);
+    await triggerEventForCalendar(cell, "mousemove");
+
+    if (!options.disableDrop) {
+        await triggerEventForCalendar(cell, "mouseup");
+    }
+    await nextTick();
+}
+
+export async function moveEventToTime(target, eventId, dateTime) {
+    const event = findEvent(target, eventId);
+    const [date, time] = dateTime.split(" ");
+
+    const col = findDateCol(target, date);
+    const row = findTimeRow(target, time);
+
+    // Find event position
+    await scrollTo(event);
+    const eventRect = event.getBoundingClientRect();
+    const eventPos = {
+        x: eventRect.x + eventRect.width / 2,
+        y: eventRect.y,
+    };
+
+    await triggerEventForCalendar(event, "mousedown", eventPos);
+
+    // Find target position
+    await scrollTo(row, false);
+    const colRect = col.getBoundingClientRect();
+    const rowRect = row.getBoundingClientRect();
+    const toPos = {
+        x: colRect.x + colRect.width / 2,
+        y: rowRect.y - 1,
+    };
+
+    await triggerEventForCalendar(row, "mousemove", toPos);
+    await triggerEventForCalendar(row, "mouseup", toPos);
+    await nextTick();
+}
+
+export async function moveEventToAllDaySlot(target, eventId, date) {
+    const event = findEvent(target, eventId);
+    const slot = findAllDaySlot(target, date);
+
+    // Find event position
+    await scrollTo(event);
+    const eventRect = event.getBoundingClientRect();
+    const eventPos = {
+        x: eventRect.x + eventRect.width / 2,
+        y: eventRect.y,
+    };
+    await triggerEventForCalendar(event, "mousedown", eventPos);
+
+    // Find target position
+    await scrollTo(slot);
+    const slotRect = slot.getBoundingClientRect();
+    const toPos = {
+        x: slotRect.x + slotRect.width / 2,
+        y: slotRect.y - 1,
+    };
+    await triggerEventForCalendar(slot, "mousemove", toPos);
+    await triggerEventForCalendar(slot, "mouseup", toPos);
+    await nextTick();
+}
+
+export async function resizeEventToTime(target, eventId, dateTime) {
+    const event = findEvent(target, eventId);
+    const [date, time] = dateTime.split(" ");
+
+    const col = findDateCol(target, date);
+    const row = findTimeRow(target, time);
+
+    // Find event position
+    await scrollTo(event);
+    await triggerEventForCalendar(event, "mouseenter");
+
+    // Find event resizer
+    const resizer = event.querySelector(".fc-end-resizer");
+    resizer.style.display = "block";
+    resizer.style.width = "100%";
+    resizer.style.height = "1em";
+    resizer.style.bottom = "0";
+    const resizerRect = resizer.getBoundingClientRect();
+    const resizerPos = {
+        x: resizerRect.x + resizerRect.width / 2,
+        y: resizerRect.y + resizerRect.height / 2,
+    };
+    await triggerEventForCalendar(resizer, "mousedown", resizerPos);
+
+    // Find target position
+    await scrollTo(row, false);
+    const colRect = col.getBoundingClientRect();
+    const rowRect = row.getBoundingClientRect();
+    const toPos = {
+        x: colRect.x + colRect.width / 2,
+        y: rowRect.y - 1,
+    };
+
+    await triggerEventForCalendar(row, "mousemove", toPos);
+    await triggerEventForCalendar(row, "mouseup", toPos);
+    await nextTick();
+}
+
+export async function changeScale(target, scale) {
+    await click(target, `.o_calendar_scale_buttons .scale_button_selection`);
+    await click(target, `.o_calendar_scale_buttons .o_calendar_button_${scale}`);
+    await nextTick();
+}
+
+export async function navigate(target, direction) {
+    await click(target, `.o_calendar_navigation_buttons .o_calendar_button_${direction}`);
+}
+
+export function findFilterPanelSection(target, sectionName) {
+    return target.querySelector(`.o_calendar_filter[data-name="${sectionName}"]`);
+}
+
+export function findFilterPanelFilter(target, sectionName, filterValue) {
+    return findFilterPanelSection(target, sectionName).querySelector(
+        `.o_calendar_filter_item[data-value="${filterValue}"]`
+    );
+}
+
+export function findFilterPanelSectionFilter(target, sectionName) {
+    return findFilterPanelSection(target, sectionName).querySelector(
+        `.o_calendar_filter_items_checkall`
+    );
+}
+
+export async function toggleFilter(target, sectionName, filterValue) {
+    const el = findFilterPanelFilter(target, sectionName, filterValue).querySelector(`input`);
+    await scrollTo(el);
+    await click(el);
+}
+
+export async function toggleSectionFilter(target, sectionName) {
+    const el = findFilterPanelSectionFilter(target, sectionName).querySelector(`input`);
+    await scrollTo(el);
+    await click(el);
+}
diff --git a/addons/web/tooling/_eslintrc.json b/addons/web/tooling/_eslintrc.json
index e48bce8037f..087051e506d 100644
--- a/addons/web/tooling/_eslintrc.json
+++ b/addons/web/tooling/_eslintrc.json
@@ -41,6 +41,7 @@
     "luxon": "readonly",
     "moment": "readonly",
     "py": "readonly",
+    "FullCalendar": "readonly",
     "ClipboardJS": "readonly",
     "globalThis": "readonly"
   }
diff --git a/odoo/addons/test_lint/tests/eslintrc b/odoo/addons/test_lint/tests/eslintrc
index 9e2bb1333b8..0e0da3fa470 100644
--- a/odoo/addons/test_lint/tests/eslintrc
+++ b/odoo/addons/test_lint/tests/eslintrc
@@ -34,6 +34,7 @@
         "luxon": "readonly",
         "moment": "readonly",
         "py": "readonly",
+        "FullCalendar": "readonly",
         "ClipboardJS": "readonly",
         "Modal": "readonly",
         "Dropdown": "readonly",