OWL
data_display
Calendar Controller
Odoo 19 OWL component — Calendar Controller (views)
Live preview
Interactive
Source excerpt
web/static/src/views/calendar/calendar_controller.js
import {
deleteConfirmationMessage,
ConfirmationDialog,
} from "@web/core/confirmation_dialog/confirmation_dialog";
import { _t } from "@web/core/l10n/translation";
import { useBus, useOwnedDialogs, useService } from "@web/core/utils/hooks";
import { Layout } from "@web/search/layout";
import { useModelWithSampleData } from "@web/model/model";
import { FormViewDialog } from "@web/views/view_dialogs/form_view_dialog";
import { CallbackRecorder, useSetupAction } from "@web/search/action_hook";
import { CalendarMobileFilterPanel } from "./mobile_filter_panel/calendar_mobile_filter_panel";
import { CalendarQuickCreate } from "./quick_create/calendar_quick_create";
import { CalendarSidePanel } from "@web/views/calendar/calendar_side_panel/calendar_side_panel";
import { SearchBar } from "@web/search/search_bar/search_bar";
import { useSearchBarToggler } from "@web/search/search_bar/search_bar_toggler";
import { ViewScaleSelector } from "@web/views/view_components/view_scale_selector";
import { CogMenu } from "@web/search/cog_menu/cog_menu";
import { browser } from "@web/core/browser/browser";
import { standardViewProps } from "@web/views/standard_view_props";
import { MultiSelectionButtons } from "@web/views/view_components/multi_selection_buttons";
import { getLocalYearAndWeek } from "@web/core/l10n/dates";
import { Component, reactive, useState } from "@odoo/owl";
const { DateTime } = luxon;
export const SCALE_LABELS = {
day: _t("Day"),
week: _t("Week"),
month: _t("Month"),
year: _t("Year"),
};
function useUniqueDialog() {
const displayDialog = useOwnedDialogs();
let close = null;
return (...args) => {
if (close) {
close();
}
close = displayDialog(...args);
};
}
export class CalendarController extends Component {
static components = {
MobileFilterPanel: CalendarMobileFilterPanel,
QuickCreate: CalendarQuickCreate,
QuickCreateFormView: FormViewDialog,
Layout,
SearchBar,
ViewScaleSelector,
CogMenu,
CalendarSidePanel,
MultiSelectionButtons,
};
static template = "web.CalendarController";
static props = {
...standardViewProps,
Model: Function,
Renderer: Function,
archInfo: Object,
buttonTemplate: String,
itemCalendarProps: { type: Object, optional: true },
};
setup() {
this.action = useService("action");
this.orm = useService("orm");
this.displayDialog = useUniqueDialog();
this.model = useModelWithSampleData(this.props.Model, this.modelParams);
useSetupAction({
getLocalState: () => this.model.exportedState,
});
const sessionShowSidebar = browser.sessionStorage.getItem("calendar.showSideBar");
this.state = useState({
isWeekendVisible:
browser.localStorage.getItem("calendar.isWeekendVisible") != null
? JSON.parse(browser.localStorage.getItem("calendar.isWeekendVisible"))
: true,
showSideBar:
!this.env.isSmall &&
Boolean(sessionShowSidebar != null ? JSON.parse(sessionShowSidebar) : true),
});
this.searchBarToggler = useSearchBarToggler();
this._baseRendererProps = {
createRecord: this.createRecord.bind(this),
deleteRecord: this.deleteRecord.bind(this),
editRecord: this.editRecord.bind(this),
setDate: this.setDate.bind(this),
};
this.prepareSelectionFeature();
}
get modelParams() {
return {
...this.props.archInfo,
resModel: this.props.resModel,
domain: this.props.domain,
fields: this.props.fields,
date: this.props.state?.date,
};
}
get currentDate() {
const meta = this.model.meta;
const scale = meta.scale;
if (this.env.isSmall && ["week", "month"].includes(scale)) {
const date = meta.date || DateTime.now();
let text = "";
if (scale === "week") {
const startMonth = date.startOf("week");
const endMonth = date.endOf("week");
if (startMonth.toFormat("LLL") !== endMonth.toFormat("LLL")) {
Registry / API
- Registry name
CalendarController- Category
—- Module
web- Slug
calendar-controller- Nav group
data_display