Odoo 11中如何在日历视图自定义显示看板卡片？

Hey there, let's tackle this calendar view customization problem you're facing. I've worked through similar Odoo 11 calendar tweaks before, so I know exactly where the common pitfalls are.

Your Goal Recap #

You want to:

• Display new fields in the calendar event cards
• Bind the event background color to your custom color_confirmed field
• Use a custom calendar box template without breaking the JS functionality

Where You Might Have Gone Wrong #

Your approach was on the right track, but Odoo 11's calendar component has strict expectations for the template structure:

• Fully replacing the <calendar> tag can break inherited JS logic
• Not inheriting the default calendar-box template means you're missing required classes/elements that the calendar relies on
• Forgetting to declare all fields used in your template in the view leads to undefined data errors

The Correct Implementation #

Let's break this down into actionable steps:

1. First, Confirm Your color_confirmed Field Setup #

Make sure your custom field is an integer type (Odoo uses 0-11 as color indices for its default color palette):

from odoo import fields, models

class CalendarEvent(models.Model):
    _inherit = 'calendar.event'
    
    color_confirmed = fields.Integer(string='Confirmed Status Color')

2. Inherit the Original Calendar View (Don't Replace It) #

Instead of replacing the entire calendar tag, inherit the existing view and modify only what you need. This preserves the original functionality while adding your customizations:

<record id="view_calendar_event_calendar_custom" model="ir.ui.view">
    <field name="name">calendar.event.calendar.custom</field>
    <field name="model">calendar.event</field>
    <field name="inherit_id" ref="calendar.view_calendar_event_calendar"/>
    <field name="priority" eval="3"/> <!-- Higher than original view's priority (2) -->
    <field name="arch" type="xml">
        <!-- Update the color binding to use your custom field -->
        <xpath expr="//calendar" position="attributes">
            <attribute name="color">color_confirmed</attribute>
        </xpath>

        <!-- Add your custom calendar-box template by inheriting the default one -->
        <xpath expr="//calendar" position="inside">
            <templates>
                <t t-name="calendar-box" t-inherit="calendar.calendar-box" t-inherit-mode="primary">
                    <!-- Inject your custom content into the existing event details -->
                    <xpath expr="//div[hasclass('oe_kanban_details')]" position="inside">
                        <ul class="oe_kanban_list mt16">
                            <!-- Example: Show assigned user -->
                            <li t-if="record.user_id.raw_value">
                                <span class="oe_label">Assigned To:</span>
                                <field name="user_id"/>
                            </li>
                            <!-- Your custom test items -->
                            <li>TEST ITEM 1</li>
                            <li>TEST ITEM 2</li>
                            <!-- Add any other new fields here -->
                        </ul>
                    </xpath>
                </t>
            </templates>
        </xpath>

        <!-- Make sure all fields used in your template are loaded in the view -->
        <xpath expr="//calendar/field[@name='partner_ids']" position="after">
            <field name="color_confirmed"/>
            <!-- Add any other new fields you want to use here -->
        </xpath>
    </field>
</record>

3. Key Things to Remember #

• Template Inheritance: Using t-inherit on the default calendar.calendar-box template ensures you keep all the original JS-friendly structure—no more broken JS!
• Field Declaration: Every field you reference in your template must be added to the <calendar> tag's field list, otherwise the template won't have access to the data.
• Priority: Setting a higher priority than the original view ensures your customizations are applied first.
• Color Field Type: color_confirmed must be an integer—Odoo maps integer values (0-11) to its built-in color palette automatically.

Alternative: Full Custom Template (If You Really Need It) #

If you absolutely need to build the calendar box from scratch, you have to replicate the exact structure of the default template to avoid JS errors. Here's a minimal working example:

<templates>
    <t t-name="calendar-box">
        <div class="oe_calendar_event oe_kanban_global_click" t-att-data-id="record.id.raw_value">
            <div class="oe_calendar_event_details">
                <strong class="oe_calendar_event_title">
                    <field name="name"/>
                </strong>
                <div class="oe_calendar_event_time" t-if="!record.allday.raw_value">
                    <field name="start" widget="datetime"/>
                    <span t-if="record.stop.raw_value"> - <field name="stop" widget="datetime"/></span>
                </div>
                <!-- Your custom content -->
                <ul class="mt16">
                    <li>TEST ITEM 1</li>
                    <li>TEST ITEM 2</li>
                    <li t-if="record.user_id.raw_value">Assigned To: <field name="user_id"/></li>
                </ul>
            </div>
        </div>
    </t>
</templates>

Note: This approach is riskier because any changes to Odoo's default calendar structure could break your custom template. Inheritance is almost always the better choice.

Debugging Tips #

If you still run into JS errors:

1. Open your browser's dev tools (F12) and check the Console tab for specific error messages—this will tell you exactly what's broken.
2. Verify that your view is being loaded correctly by checking the Network tab for the view's XML request.
3. Double-check that all fields used in your template are declared in the <calendar> tag.

内容的提问来源于stack exchange，提问作者forvas