İçereği Atla
Odoo Menü
  • Portal
  • Ücretsiz deneyin
  • Uygulamalar
    Finans
    • Muhasebe
    • Faturalama
    • Masraf Yönetimi
    • Elektronik Çizelge (BI)
    • Belgeler
    • İmza
    Satış
    • Müşteri İlişkileri Yönetimi (CRM)
    • Satış
    • Satış Noktası Mağaza
    • Satış Noktası Restoran
    • Abonelikler
    • Kiralama
    Web Sitesi
    • Web Sitesi Oluşturucu
    • eTicaret
    • Blog
    • Forum
    • Canlı Sohbet
    • eÖğrenme
    Tedarik Zinciri
    • Envanter
    • Üretim
    • Ürün Yaşam Döngüsü Yönetimi
    • Satın Alma
    • Bakım
    • Kalite
    İnsan Kaynakları
    • Çalışanlar
    • İşe Alım
    • İzin
    • Değerlendirme
    • Referans
    • Filo Yönetimi
    Pazarlama
    • Sosyal Medyada Pazarlama
    • E-posta ile Pazarlama
    • SMS ile Pazarlama
    • Etkinlikler
    • Pazarlama Otomasyonu
    • Anket
    Hizmetler
    • Proje Yönetimi
    • Çalışma Çizelgeleri
    • Saha Hizmeti
    • Yardım Masası
    • Planlama
    • Randevular
    Verimlilik
    • Sohbet
    • Yapay Zeka
    • Nesnelerin İnterneti
    • VoIP
    • Bilgi Bankası
    • WhatsApp
    Üçüncü taraf uygulamalar Odoo Stüdyo Odoo Bulut Platformu
  • Sektörler
    Perakende satış
    • Kitapçı
    • Giyim Mağazası
    • Mobilya Mağazası
    • Gıda Marketi
    • Hırdavat Dükkanı
    • Oyuncak Dükkanı
    Gıda ve Konaklama
    • Bar ve Pub
    • Restoran
    • Fast Food Restoranı
    • Konuk Evi
    • İçecek Distribütörü
    • Otel
    Gayrimenkul
    • Emlak Acentesi
    • Mimarlık Firması
    • İnşaat
    • Emlak Yönetimi
    • Bahçe Tasarımı
    • Mülk Sahipleri Derneği
    Uzmanlık
    • Muhasebe Firması
    • Odoo Partner
    • Pazarlama Ajansı
    • Hukuk Firması
    • Yetenek Kazanımı
    • Denetim ve Belgelendirme
    Üretim
    • Tekstil
    • Metal
    • Mobilyalar
    • Gıda
    • Bira fabrikası
    • Kurumsal Hediye
    Sağlık ve Spor
    • Spor Kulübü
    • Optik Mağazası
    • Fitness Merkezi
    • Sağlıklı Yaşam Merkezi
    • Eczane
    • Kuaför Salonu
    Ticaret
    • Tamirci
    • BT Donanım & Destek
    • Güneş Enerjisi Sistemleri
    • Ayakkabı İmalatçısı
    • Temizlik Hizmetleri
    • HVAC Hizmetleri
    Diğerleri
    • Kar Amacı Gütmeyen Kuruluş
    • Çevre Ajansı
    • Reklam Panosu Kiralama
    • Fotoğrafçılık
    • Bisiklet Kiralama
    • Yazılım Bayisi
    Tüm Sektörlere Göz Atın
  • Topluluk
    Öğrenim
    • Eğitim Araçları
    • Dokümantasyon
    • Sertifikasyonlar
    • Eğitim Etkinlikleri
    • Blog
    • Podcast
    Eğitim ve Gelişim
    • Eğitim Programı
    • Scale Up! İşletme Oyunu
    • Odoo'yu Ziyaret Edin
    Yazılım
    • İndirin
    • Sürümleri Kıyaslayın
    • Sürümler
    İş Birliği
    • Github
    • Forum
    • Etkinlikler
    • Çeviriler
    • Partner Olun
    • Partnerler için Hizmetler
    • Muhasebe Firmanızı Kaydettirin
    Hizmetler
    • Partner Bulun
    • Muhasebeci Bulun
    • Bir danışmanla görüşün
    • Kurulum Hizmetleri
    • Müşteri Referansları
    • Destek
    • Sürüm Yükseltme
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Demo randevusu alın
  • Fiyatlandırma
  • Yardım
Toplulukla etkileşime geçmek için kayıtlı olmanız gerekir.
Tüm Gönderiler İnsanlar Rozetler
Etiketler (Tümünü göster)
odoo accounting v14 pos v15
Bu forum hakkında
Toplulukla etkileşime geçmek için kayıtlı olmanız gerekir.
Tüm Gönderiler İnsanlar Rozetler
Etiketler (Tümünü göster)
odoo accounting v14 pos v15
Bu forum hakkında
Yardım

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

Abone Ol

Bu gönderide etkinlik olduğunda bildirim alın

Bu soru işaretlendi
javascriptcommunitycrmcalendarleadsactivitycssOWLodoo16
2 Cevaplar
648 Görünümler
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
Vazgeç
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.
En İyi Yanıt

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
Vazgeç
Avatar
Gabriel Cabalin Salazar
Üretici En İyi Yanıt

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
Vazgeç
Gabriel Cabalin Salazar
Üretici

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.

Tartışma hoşunuza mı gidiyor? Sadece okumakla kalmayın, katılın!

Özel özelliklerden yararlanmak ve harika topluluğumuzla etkileşime geçmek için bugün bir hesap oluşturun!

Üye Ol
İlgili Gönderiler Cevaplar Görünümler Aktivite
change style of "t-ref" hook from javascript
javascript css OWL t-ref
Avatar
Avatar
1
Ağu 23
3152
Need Help: Odoo 16 Lead Transfer Module - Notifications & Activity Logging Not Working
javascript crm python notifications odoo odoo16
Avatar
Avatar
1
Şub 25
3136
Differentiating Lost vs Archived Leads in CRM Reporting
crm leads
Avatar
Avatar
1
May 26
1086
How can I apply an activity plan to many leads at once?
leads activity
Avatar
Avatar
1
Şub 26
2642
How can I get the current user ID in Odoo version 18 using JavaScript
javascript crm
Avatar
Avatar
Avatar
2
Tem 25
4400
Topluluk
  • Eğitim Araçları
  • Dokümantasyon
  • Forum
Açık Kaynak
  • İndirin
  • Github
  • Runbot
  • Çeviriler
Hizmetler
  • Odoo.sh Hosting
  • Destek
  • Sürüm Yükseltme
  • Özel Geliştirmeler
  • Eğitim
  • Muhasebeci Bulun
  • Partner Bulun
  • Partner Olun
Hakkında
  • Şirketimiz
  • Pazarlama Gereçleri
  • İletişim
  • Kariyer
  • Etkinlikler
  • Podcast
  • Blog
  • Müşteriler
  • Hukuki • Gizlilik
  • Güvenlik
الْعَرَبيّة 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, müşteri ilişkileri yönetimi, eTicaret, muhasebe, envanter, satış noktası, proje yönetimi gibi şirketinizin tüm ihtiyaçlarını karşılayan bir açık kaynak işletme uygulamaları paketidir.

Odoo’nun eşsiz değer önermesi, aynı anda hem kullanımının çok kolay olup hem de tamamen entegre olmasıdır.

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