Skip to Content
This question has been flagged
1 Reply
3248 Views
Avatar
Alessandro Fiorino

Is there any module or example improving the customizability of the calendar view ?

For example:

- color based on a field

- change order when date/hour is the same

- what is drawn in the colored box

Avatar
Discard
Birgir Steinarsson

Did you ever solve this Alessandro?
In v17 you can choose a field to use for the color but I need a way to add more info to the colored card on the calendar view, without having to click each event to see the pop-up.

Avatar
D Enterprise
Best Answer

Here you go,

__manifest__.py

Defines the module and its dependencies.

# File: custom_calendar_view/__manifest__.py
{ 
    "name" : "Custom Calendar View Enhancements" ,
     "version" : "1.0" ,
     "depends" : [ "calendar" , "web" ],
     "author" : "Your Name" ,
     "category" : "Customization" ,
     "data" : [
         "views/calendar_event_view.xml"
    ], 
    "assets" : {
         "web. assets_backend" : [
             "custom_calendar_view/static/src/js/calendar_renderer.js"
        ]
    }, 
    "installable" : True ,
     "application" : False
}
calendar_event.py

Extends the calendar.event model with new fields.

# File: custom_calendar_view/models/calendar_event.py 
from odoo import models, fields

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

    color_category_id = fields.Many2one( 'calendar.color.category' , string= "Color Category" )
    x_location = fields.Char(string= "Location" )
calendar_color_category.py

Defines a simple model used for coloring events.

# File: custom_calendar_view/models/calendar_color_category.py 
from odoo import models, fields

class  CalendarColorCategory (models.Model):
    _name = 'calendar.color.category'
    _description = 'Calendar Color Category' 

    name = fields.Char(required= True )
calendar_event_view.xml

Customizes the calendar view to use colors and display more fields.

<!-- File: custom_calendar_view/views/calendar_event_view.xml --> 
< odoo >
     < record  id = "view_calendar_event_custom"  model = "ir.ui.view" >
         < field  name = "name" >calendar.event.calendar.view.custom </ field >
         < field  name = "model" >calendar.event </ field >
         < field  name = "arch"  type = "xml" >
             < calendar  string = "Meetings"  date_start = "start"  date_stop = "stop"  color = "color_category_id" >
                 <field  name = "name" />
                 < field  name = "x_location" />
                 < field  name = "partner_ids" />
                 < field  name = "color_category_id" />
             </ calendar >
         </field>
     </ record >
 </ odoo >
calendar_renderer.js

Custom JS to control event order in the calendar.


// File: custom_calendar_view/static/src/js/calendar_renderer.js
odoo. define ( 'custom_calendar_view.CalendarOrder' , function ( require ) {
     "use strict" ;

    const  CalendarRenderer = require ( 'web.CalendarRenderer' );

    CalendarRenderer . include ({
         _renderEvents : function ( ) {
             // Sort events alphabetically by name if they start at the same time 
            this. state . data . sort ( ( a, b ) => {
                 if (a. start === b. start ) {
                     return a. name . localeCompare (b. name );
                } 
                return  new  Date (a. start ) - new  Date (b. start );
            }); 
            return  this . _Super . apply ( this , arguments );
        },
    });
});


I hope it is of full use.

Avatar
Discard