Passa al contenuto
Odoo Menu
  • Accedi
  • Provalo gratis
  • App
    Finanze
    • Contabilità
    • Fatturazione
    • Note spese
    • Fogli di calcolo (BI)
    • Documenti
    • Firma
    Vendite
    • CRM
    • Vendite
    • Punto vendita Negozio
    • Punto vendita Ristorante
    • Abbonamenti
    • Noleggi
    Siti web
    • Configuratore sito web
    • E-commerce
    • Blog
    • Forum
    • Live chat
    • E-learning
    Supply chain
    • Magazzino
    • Produzione
    • PLM
    • Acquisti
    • Manutenzione
    • Qualità
    Risorse umane
    • Dipendenti
    • Assunzioni
    • Ferie
    • Valutazioni
    • Referral dipendenti
    • Parco veicoli
    Marketing
    • Social marketing
    • E-mail marketing
    • SMS marketing
    • Eventi
    • Marketing automation
    • Sondaggi
    Servizi
    • Progetti
    • Fogli ore
    • Assistenza sul campo
    • Helpdesk
    • Pianificazione
    • Appuntamenti
    Produttività
    • Comunicazioni
    • Intelligenza artificiale
    • IoT
    • VoIP
    • Knowledge
    • WhatsApp
    App di terze parti Odoo Studio Piattaforma cloud Odoo
  • Settori
    Retail
    • Libreria
    • Negozio di abbigliamento
    • Negozio di arredamento
    • Alimentari
    • Ferramenta
    • Negozio di giocattoli
    Cibo e ospitalità
    • Bar e pub
    • Ristorante
    • Fast food
    • Pensione
    • Grossista di bevande
    • Hotel
    Agenzia immobiliare
    • Agenzia immobiliare
    • Studio di architettura
    • Edilizia
    • Gestione immobiliare
    • Impresa di giardinaggio
    • Associazione di proprietari immobiliari
    Consulenza
    • Società di contabilità
    • Partner Odoo
    • Agenzia di marketing
    • Studio legale
    • Selezione del personale
    • Audit e certificazione
    Produzione
    • Tessile
    • Metallo
    • Arredamenti
    • Alimentare
    • Birrificio
    • Ditta di regalistica aziendale
    Benessere e sport
    • Club sportivo
    • Negozio di ottica
    • Centro fitness
    • Centro benessere
    • Farmacia
    • Parrucchiere
    Commercio
    • Tuttofare
    • Hardware e assistenza IT
    • Ditta di installazione di pannelli solari
    • Calzolaio
    • Servizi di pulizia
    • Servizi di climatizzazione
    Altro
    • Organizzazione non profit
    • Ente per la tutela ambientale
    • Agenzia di cartellonistica pubblicitaria
    • Studio fotografico
    • Punto noleggio di biciclette
    • Rivenditore di software
    Carica tutti i settori
  • Community
    Apprendimento
    • Tutorial
    • Documentazione
    • Certificazioni 
    • Formazione
    • Blog
    • Podcast
    Potenzia la tua formazione
    • Programma educativo
    • Scale Up! Business Game
    • Visita Odoo
    Ottieni il software
    • Scarica
    • Versioni a confronto
    • Note di versione
    Collabora
    • Github
    • Forum
    • Eventi
    • Traduzioni
    • Diventa nostro partner
    • Servizi per partner
    • Registra la tua società di contabilità
    Ottieni servizi
    • Trova un partner
    • Trova un contabile
    • Incontra un esperto
    • Servizi di implementazione
    • Testimonianze dei clienti
    • Supporto
    • Aggiornamenti
    GitHub Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Richiedi una demo
  • Prezzi
  • Aiuto
È necessario essere registrati per interagire con la community.
Tutti gli articoli Persone Badge
Etichette (Mostra tutto)
odoo accounting v14 pos v15
Sul forum
È necessario essere registrati per interagire con la community.
Tutti gli articoli Persone Badge
Etichette (Mostra tutto)
odoo accounting v14 pos v15
Sul forum
Assistenza

How to dynamically add a CSS class to a Calendar view event based on a computed field in Odoo 16?

Iscriviti

Ricevi una notifica quando c'è un'attività per questo post

La domanda è stata contrassegnata
javascriptcommunitycrmcalendarleadsactivitycssOWLodoo16
2 Risposte
647 Visualizzazioni
Avatar
Gabriel Cabalin Salazar
Hello community,

I am trying to dynamically add a CSS class (specifically 'o_event_hatched') to a meeting/activity in the Calendar view (`calendar.event`) in Odoo 16, depending on the stage of its linked CRM Opportunity (`opportunity_id.stage_id.name == 'Rallada'`).

I have already created a boolean computed field in Python:

class CalendarEvent(models.Model):
    _inherit = 'calendar.event'

    is_crm_hatched = fields.Boolean(compute="_compute_is_crm_hatched")

    @api.depends('opportunity_id.stage_id')
    def _compute_is_crm_hatched(self):
        for event in self:
            event.is_crm_hatched = event.opportunity_id.stage_id.name == 'Rallada'

And I injected the field into the XML view:
<field name="is_crm_hatched" invisible="1"/>

However, patch methods on `CalendarCommonRenderer` (like `getEventOptions` or `eventDataTransform`) are not triggering or applying the class correctly to the FullCalendar DOM elements in Odoo 16.

What is the best practice to achieve this? Should I use the native `color` attribute workaround or is there a clean OWL patch approach to inject a custom class into the event's HTML wrapper?

Thanks in advance!


0
Avatar
Abbandona
Codesphere Tech

I'll let you after testing.

Codesphere Tech

Let you know after testing.

Codesphere Tech

As I've explored about this and want to share that don't touch this calendar view because there is not any single file for JS or XML where you can inject your custom code. see below example for <a> tag.

return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, { elClasses: ['fc-daygrid-event', 'fc-daygrid-block-event', 'fc-h-event'], defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.seg.eventRange.def.allDay })));

Codesphere Tech

I'll check what you share about time off.

Avatar
Zehntech Technologies Inc.
Risposta migliore

Hello, 

Your computed field approach is correct and is generally the recommended way to determine whether an event should receive special styling.

In Odoo 16, Calendar events are rendered through FullCalendar and OWL components, so simply patching methods like getEventOptions() or eventDataTransform() may not always affect the final DOM output. A cleaner approach is to extend the Calendar renderer/component responsible for event rendering and inject a custom class based on your is_crm_hatched field.

If the requirement is only visual differentiation, using Odoo's native color mechanism is often the simplest and most upgrade-friendly solution. However, if you specifically need the o_event_hatched styling, a custom OWL/Calendar renderer extension is the preferred approach rather than relying solely on CSS or unsupported DOM manipulation.

Hope this works for you! If you need any help implementing this or want a more optimized approach, feel free to reach out for further discussion.

Regards,

Zehntech Technologies Inc.

santosh.sekwadia@zehntech.com

0
Avatar
Abbandona
Avatar
Gabriel Cabalin Salazar
Autore Risposta migliore

I did it! Here is the code.

is_hatched = fields.Boolean(
        string="¿Está rayado?", 
        compute="_compute_is_hatched",
        store=False
    )

    @api.depends('stage_id')
    def _compute_is_hatched(self):
        for lead in self:
            # Si la oportunidad está en la etapa 'Rallada', activamos el patrón nativo
            if lead.stage_id and lead.stage_id.name == 'Rallada':
                lead.is_hatched = True
            else:
                lead.is_hatched = False
<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="view_crm_lead_calendar_hatched_inherit" model="ir.ui.view">
        <field name="name">crm.lead.calendar.hatched.inherit</field>
        <field name="model">crm.lead</field>
        <field name="inherit_id" ref="crm.crm_case_calendar_view_leads"/>
        <field name="arch" type="xml">
            <xpath expr="//calendar" position="inside">
                <field name="is_hatched" invisible="1"/>
            </xpath>
        </field>
    </record>
</odoo>
0
Avatar
Abbandona
Gabriel Cabalin Salazar
Autore

Yes, it must be possible because the native hr_holidays (Time Off) module does exactly what I want to achieve.If you look at the Time Off calendar view (hr.leave), when a leave request is not yet approved (in 'To Approve' status), Odoo dynamically applies that exact same hatched/striped CSS pattern to the calendar event.

Ti stai godendo la conversazione? Non leggere soltanto, partecipa anche tu!

Crea un account oggi per scoprire funzionalità esclusive ed entrare a far parte della nostra fantastica community!

Registrati
Post correlati Risposte Visualizzazioni Attività
change style of "t-ref" hook from javascript
javascript css OWL t-ref
Avatar
Avatar
1
ago 23
3151
Need Help: Odoo 16 Lead Transfer Module - Notifications & Activity Logging Not Working
javascript crm python notifications odoo odoo16
Avatar
Avatar
1
feb 25
3135
Differentiating Lost vs Archived Leads in CRM Reporting
crm leads
Avatar
Avatar
1
mag 26
1086
How can I apply an activity plan to many leads at once?
leads activity
Avatar
Avatar
1
feb 26
2640
How can I get the current user ID in Odoo version 18 using JavaScript
javascript crm
Avatar
Avatar
Avatar
2
lug 25
4399
Community
  • Tutorial
  • Documentazione
  • Forum
Open source
  • Scarica
  • Github
  • Runbot
  • Traduzioni
Servizi
  • Hosting Odoo.sh
  • Supporto
  • Aggiornamenti
  • Sviluppi personalizzati
  • Formazione
  • Trova un contabile
  • Trova un partner
  • Diventa nostro partner
Chi siamo
  • La nostra azienda
  • Branding
  • Contattaci
  • Lavora con noi
  • Eventi
  • Podcast
  • Blog
  • Clienti
  • Note legali • Privacy
  • Sicurezza
الْعَرَبيّة Català 简体中文 繁體中文 (台灣) Čeština Dansk Nederlands English Suomi Français Deutsch हिंदी Bahasa Indonesia Italiano 日本語 한국어 (KR) Lietuvių kalba Język polski Português (BR) română русский язык Slovenský jazyk Slovenščina Español (América Latina) Español Svenska ภาษาไทย Türkçe українська Tiếng Việt

Odoo è un gestionale di applicazioni aziendali open source pensato per coprire tutte le esigenze della tua azienda: CRM, Vendite, E-commerce, Magazzino, Produzione, Fatturazione elettronica, Project Management e molto altro.

Il punto di forza di Odoo è quello di offrire un ecosistema unico di app facili da usare, intuitive e completamente integrate tra loro.

Website made with

Odoo Experience on YouTube

1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.

Live support on Youtube
Watch now