[FIX] Calendar Attendee Issue In Responsive Screens

addons/web_flectra/static/src/js/calendar.js

@@ -0,0 +1,49 @@
+flectra.define('web_flectra.CalendarRenderer', function(require){
+    'use strict';
+
+    const config = require('web.config');
+    const core = require('web.core');
+
+
+    const Calendar = require('web.CalendarRenderer');
+
+    Calendar.include({
+        events: _.extend({}, Calendar.events, {
+            'click .o_other_calendar_panel': '_onFilterClick'
+        }),
+
+        init: function (parent, state, params) {
+            var self = this
+            this._super.apply(this, arguments);
+            this.filterPanelToggle = false;
+        },
+
+        _renderFilters() {
+            return this._super(...arguments).then(() => {
+                this.$('.o_calendar_mini').addClass('d-none');
+                this._renderFilterBar();
+            });
+        },
+
+        _onFilterClick() {
+            this.filterPanelToggle = !this.filterPanelToggle;
+            this.$('.o_calendar_view').toggleClass('d-none', this.filterPanelToggle);
+            this.$('.o_calendar_sidebar_container').toggleClass('d-none', !this.filterPanelToggle);
+            this._renderFilterBar();
+        },
+
+        _renderFilterBar(){
+            if(this.$('.o_other_calendar_panel').length) { this.$('.o_other_calendar_panel').remove(); }
+            var filters = [];
+            for(const filter in this.state.filters){
+                filters.push(this.state.filters[filter])
+            }
+            console.log(this.state.filters,'.THIS',filters)
+            const filterBar = $(core.qweb.render('calendar.filterBar', {
+                filterSections: filters,
+                widget: this,
+            }));
+            this.$el.prepend(filterBar);
+        }
+    });
+});

addons/web_flectra/static/src/scss/web_responsive.scss

@@ -783,4 +783,20 @@ and (max-device-width : 1024px){
         border-bottom: 1px solid #ddd;
     }
 
+}
+
+@media (max-width: 767.98px){
+    .o_calendar_container {
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: column;
+        flex-direction: column;
+    }
+
+    .o_calendar_container .o_other_calendar_panel > .o_filter > span > span:nth-child(1) {
+        font-size: xx-small;
+    }
+    .o_calendar_container .o_other_calendar_panel {
+        padding: 8px 16px;
+    }
 }

addons/web_flectra/static/src/xml/calendar.xml

@@ -0,0 +1,24 @@
+<templates>
+
+    <t t-name="calendar.filterBar">
+        <div class="o_other_calendar_panel d-flex align-items-center d-md-none">
+            <i class="fa fa-fw fa-filter me-3" />
+            <div class="o_filter me-auto d-flex overflow-auto">
+                <t t-foreach="filterSections" t-as="section">
+                    <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="section.filters" t-as="filter">
+                            <span t-if="filter.active" class="d-flex align-items-center text-nowrap ml-1 mr-2">
+                                <span t-att-class="widget.getColor(filter.color_index)">⬤</span>
+                                <span class="ml-1 fw-bold text-nowrap" t-esc="filter.label" />
+                            </span>
+                        </t>
+                    </t>
+                </t>
+            </div>
+            <i t-attf-class="fa fa-fw fa-caret-{{caretDirection}} ml-2" />
+        </div>
+    </t>
+
+</templates>

addons/web_flectra/views/assets.xml

@@ -44,6 +44,7 @@
             <script type="text/javascript" src="/web_flectra/static/src/js/web_client.js" />
             <script type="text/javascript" src="/web_flectra/static/src/js/apps_menu.js" />
             <script type="text/javascript" src="/web_flectra/static/src/js/menu.js" />
+            <script type="text/javascript" src="/web_flectra/static/src/js/calendar.js" />
             <script type="text/javascript" src="/web_flectra/static/src/js/systray_activity_menu.js" />
             <script type="text/javascript" src="/web_flectra/static/src/js/sidebar.js" />
 	        <script type="text/javascript" src="/web_flectra/static/src/js/field_upgrade.js"/>