Pular para o conteúdo
Odoo Menu
  • Entrar
  • Experimente grátis
  • Aplicativos
    Finanças
    • Financeiro
    • Faturamento
    • Despesas
    • Planilhas (BI)
    • Documentos
    • Assinar Documentos
    Vendas
    • CRM
    • Vendas
    • PDV Loja
    • PDV Restaurantes
    • Assinaturas
    • Locação
    Websites
    • Criador de Sites
    • e-Commerce
    • Blog
    • Fórum
    • Chat ao Vivo
    • e-Learning
    Cadeia de mantimentos
    • Inventário
    • Fabricação
    • PLM - Ciclo de Vida do Produto
    • Compras
    • Manutenção
    • Qualidade
    Recursos Humanos
    • Funcionários
    • Recrutamento
    • Folgas
    • Avaliações
    • Indicações
    • Frota
    Marketing
    • Redes Sociais
    • Marketing por E-mail
    • Marketing por SMS
    • Eventos
    • Automação de Marketing
    • Pesquisas
    Serviços
    • Projeto
    • Planilhas de Horas
    • Serviço de Campo
    • Central de Ajuda
    • Planejamento
    • Compromissos
    Produtividade
    • Mensagens
    • Inteligência Artificial
    • Internet das Coisas
    • VoIP
    • Conhecimento
    • WhatsApp
    Aplicativos de terceiros Odoo Studio Plataforma Odoo Cloud
  • Setores
    Varejo
    • Loja de livros
    • Loja de roupas
    • Loja de móveis
    • Mercearia
    • Loja de ferramentas
    • Loja de brinquedos
    Comida e hospitalidade
    • Bar e Pub
    • Restaurante
    • Fast Food
    • Hospedagem
    • Distribuidor de bebidas
    • Hotel
    Imóveis
    • Imobiliária
    • Escritório de arquitetura
    • Construção
    • Gestão de Imóveis
    • Jardinagem
    • Associação de proprietários de imóveis
    Consultoria
    • Escritório de Contabilidade
    • Parceiro Odoo
    • Agência de marketing
    • Escritório de advocacia
    • Aquisição de talentos
    • Auditoria e Certificação
    Fabricação
    • Têxtil
    • Metal
    • Móveis
    • Alimentação
    • Cervejaria
    • Presentes corporativos
    Saúde e Boa forma
    • Clube esportivo
    • Loja de óculos
    • Academia
    • Profissionais de bem-estar
    • Farmácia
    • Salão de cabeleireiro
    Comércio
    • Handyman
    • Hardware e Suporte de TI
    • Sistemas de energia solar
    • Sapataria
    • Serviços de limpeza
    • Serviços de climatização
    Outros
    • Organização sem fins lucrativos
    • Agência Ambiental
    • Aluguel de outdoors
    • Fotografia
    • Aluguel de bicicletas
    • Revendedor de software
    Navegar por todos os setores
  • Comunidade
    Aprenda
    • Tutoriais
    • Documentação
    • Certificações
    • Treinamento
    • Blog
    • Podcast
    Empodere a Educação
    • Programa de educação
    • Scale Up! Jogo de Negócios
    • Visite a Odoo
    Obtenha o Software
    • Baixar
    • Comparar edições
    • Releases
    Colaborar
    • Github
    • Fórum
    • Eventos
    • Traduções
    • Torne-se um parceiro
    • Serviços para parceiros
    • Cadastre seu escritório contábil
    Obtenha os serviços
    • Encontre um parceiro
    • Encontre um Contador
    • Agende uma Demonstração
    • Serviços de Implementação
    • Referências de Clientes
    • Suporte
    • Upgrades
    Github YouTube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Faça uma demonstração
  • Preços
  • Ajuda
É necessário estar registrado para interagir com a comunidade.
Todas as publicações Pessoas Emblemas
Marcadores (Ver tudo)
odoo accounting v14 pos v15
Sobre este fórum
É necessário estar registrado para interagir com a comunidade.
Todas as publicações Pessoas Emblemas
Marcadores (Ver tudo)
odoo accounting v14 pos v15
Sobre este fórum
Ajuda

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

Inscrever

Seja notificado quando houver atividade nesta publicação

Esta pergunta foi sinalizada
javascriptcommunitycrmcalendarleadsactivitycssOWLodoo16
2 Respostas
646 Visualizações
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
Cancelar
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.
Melhor resposta

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
Cancelar
Avatar
Gabriel Cabalin Salazar
Autor Melhor resposta

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
Cancelar
Gabriel Cabalin Salazar
Autor

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.

Está gostando da discussão? Não fique apenas lendo, participe!

Crie uma conta hoje mesmo para aproveitar os recursos exclusivos e interagir com nossa incrível comunidade!

Inscrever-se
Publicações relacionadas Respostas Visualizações Atividade
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
fev. 25
3135
Differentiating Lost vs Archived Leads in CRM Reporting
crm leads
Avatar
Avatar
1
mai. 26
1085
How can I apply an activity plan to many leads at once?
leads activity
Avatar
Avatar
1
fev. 26
2639
How can I get the current user ID in Odoo version 18 using JavaScript
javascript crm
Avatar
Avatar
Avatar
2
jul. 25
4399
Comunidade
  • Tutoriais
  • Documentação
  • Fórum
Open Source
  • Baixar
  • Github
  • Runbot
  • Traduções
Serviços
  • Odoo.sh Hosting
  • Suporte
  • Upgrade
  • Desenvolvimentos personalizados
  • Educação
  • Encontre um Contador
  • Encontre um parceiro
  • Torne-se um parceiro
Sobre nós
  • Nossa empresa
  • Ativos da marca
  • Contato
  • Empregos
  • Eventos
  • Podcast
  • Blog
  • Clientes
  • Legal • Privacidade
  • Segurança
الْعَرَبيّة 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 é um conjunto de aplicativos de negócios em código aberto que cobre todas as necessidades de sua empresa: CRM, comércio eletrônico, contabilidade, estoque, ponto de venda, gerenciamento de projetos, etc.

A proposta de valor exclusiva Odoo é ser, ao mesmo tempo, muito fácil de usar e totalmente integrado.

Site feito com

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