Odoo Calendar

custom_calendar.js

// extends the project task
class ProjectTaskCalendar(models.Model):
    _inherit = 'project.task'

    color_hex = fields.Char(
        string="Color",
        help="Choose your color"
    )

// some hack to render the jscolor correctly on QuickCreate Form
instance.web_calendar.CalendarView = instance.web_calendar.CalendarView.extend({
        open_quick_create: function (data_template) {
            this._super.apply(this, arguments);
            if (this.quick) {
                jscolor.init(this.quick.$el[0]);
            }
        }
    });

    instance.web_calendar.QuickCreate = instance.web_calendar.QuickCreate.extend({
        focus: function () {
            // focus on 1st elt in the view
            debugger;
            if (this.$el.find('input').length > 1) {
                this.$el.find('input')[0].focus();
            } else {
                this.$el.find('input').focus();
            }
        },
        quick_add: function () {
            var val = this.$input.val();
            if (/^\s*$/.test(val)) {
                return false;
            }
            if (this.$input.length == 2) {
                var color = $(this.$input[1]).val();
                var isOk = /^#[0-9A-F]{6}$/i.test(val);
                if (isOk) {
                    color = 'FFFFFF';
                }
            }
            return this.quick_create({'name': val, 'color_hex': color}).always(function () {
                return true;
            });
        },
    });
    
// the Qweb view : to inject the color input
<tr t-extend="CalendarView.quick_create">
        <t t-jquery=".form-group" t-operation="after">
            <div class="form-group">
                <label for='name' class='control-label'>Color:</label>
                <input name='color' class="color form-control"/>
            </div>
        </t>
</tr>