[CLOSED] Calendar Panel - Customise Event Window to disable End Date and All Day Check box

  1. #1

    [CLOSED] Calendar Panel - Customise Event Window to disable End Date and All Day Check box

    Is it possible to disable To Date and All Day Check Box in EventWindow shown below ? If yes, can you please provide me the sample code



    Here, I would like to mention that I have used following code to override the eventwindow.
    Ext.calendar.form.EventWindow.override({
                constructor: function(config) {
                    var formPanelCfg = {
                        xtype: 'form',
                        fieldDefaults: {
                            msgTarget: 'side',
                            labelWidth: 65
                        },
                        frame: false,
                        bodyStyle: 'background:transparent;padding:5px 10px 10px;',
                        bodyBorder: false,
                        border: false,
                        items: [{
                            itemId: 'title',
                            name: Ext.calendar.data.EventMappings.Title.name,
                            fieldLabel: 'Title',
                            xtype: 'textfield',
                            anchor: '100%'
                        },
                        {
                            xtype: 'daterangefield',
                            itemId: 'date-range',
                            name: 'dates',
                            anchor: '100%',
                            fieldLabel: 'When'//,
                            //hidden: true
    }]
                        };
    
                        if (config.calendarStore) {
                            this.calendarStore = config.calendarStore;
                            delete config.calendarStore;
    
                            formPanelCfg.items.push({
                                xtype: 'calendarpicker',
                                itemId: 'calendar',
                                name: Ext.calendar.data.EventMappings.CalendarId.name,
                                anchor: '100%',
                                store: this.calendarStore,
                                hidden: true
                            });
                        }
    
                        // CUSTOMIZATION
    
                        // 1. Adds one more standard field.
                        formPanelCfg.items.push({
                            itemId: 'Location',
                            name: Ext.calendar.data.EventMappings.Location.name,
                            fieldLabel: 'Location',
                            xtype: 'textfield',
                            anchor: '100%',
                            hidden: true
                        });
    
                        // 2. Add Customised fields
                        formPanelCfg.items.push({
                            itemId: 'EmployeeId',
                            name: Ext.calendar.data.EventMappings.EmployeeId.name,
                            fieldLabel: 'Employee',
                            xtype: 'textfield',
                            anchor: '100%',
                            hidden: true
                        });
    
                        formPanelCfg.items.push({
                            itemId: 'ProjectId',
                            name: Ext.calendar.data.EventMappings.ProjectId.name,
                            fieldLabel: 'Project',
                            xtype: 'combobox',
                            anchor: '100%',
                            dataIndex: 'ProjectId',
                            valueField: 'ProjectId',
                            displayField: 'Code',
                            store: 'projectStore',
                            columnWidth: .5,
                            anchor: '100%',
                            selectOnFocus: true,
                            typeAhead: true,
                            forceSelection: true,
                            minChars: 1,
                            tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>")
                            //                        listConfig: {
                            //                            getInnerTpl: function() {
                            //                                return '<div data-qtip="{Name}">{Code} ({Name})</div>';
                            //                            }
                            //                        }
                        });
    
                        formPanelCfg.items.push({
                            xtype: 'fieldcontainer',
                            layout: 'column',
                            items: [
                            { itemId: 'DepartmentId',
                                name: Ext.calendar.data.EventMappings.DepartmentId.name,
                                fieldLabel: 'Department',
                                xtype: 'combobox',
                                dataIndex: 'DepartmentId',
                                valueField: 'DepartmentId',
                                displayField: 'Name',
                                store: 'departmentStore',
                                columnWidth: .5,
                                anchor: '100%',
                                selectOnFocus: true,
                                typeAhead: true,
                                forceSelection: true,
                                minChars: 1,
                                tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>"),
                                listeners: {
                                    scope: CompanyX,
                                    'select': CompanyX.selectDepartment
                                }
                            },
                            {
                                itemId: 'SectionId',
                                name: Ext.calendar.data.EventMappings.SectionId.name,
                                fieldLabel: 'Section',
                                xtype: 'combobox',
                                columnWidth: .49,
                                dataIndex: 'SectionId',
                                valueField: 'SectionId',
                                displayField: 'Code',
                                store: 'sectionStore',
                                columnWidth: .49,
                                anchor: '100%',
                                selectOnFocus: true,
                                typeAhead: true,
                                forceSelection: true,
                                minChars: 4,
                                tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>"),
                                //                            listConfig: {
                                //                                getInnerTpl: function() {
                                //                                    return '<div data-qtip="{Name}">{Code} ({Name})</div>';
                                //                                }
                                //                            },
                                forceSelection: true
                                //pageSize: 10
                                //minChars: 1,
                                //matchFieldWidth: false
                                //disabled: true
                            },
                            {
                                xtype: 'button',
                                //text: 'Help',
                                disabled: false,
                                handler: CompanyX.showSectionHelp,
                                scope: CompanyX,
                                iconCls: 'icon-help'
    }]
                            });
    
                            formPanelCfg.items.push({
                                xtype: 'fieldcontainer',
                                layout: 'column',
                                items: [
                            { itemId: 'SubSectionId',
                                name: Ext.calendar.data.EventMappings.SubSectionId.name,
                                fieldLabel: 'Sub-Section',
                                xtype: 'combobox',
                                dataIndex: 'SubSectionId',
                                valueField: 'SubSectionId',
                                displayField: 'Name',
                                store: 'subsectionStore',
                                columnWidth: .5,
                                anchor: '100%',
                                selectOnFocus: true,
                                typeAhead: true,
                                forceSelection: true,
                                minChars: 1,
                                tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>")
                            },
                            { itemId: 'StageId',
                                name: Ext.calendar.data.EventMappings.StageId.name,
                                fieldLabel: 'Stage',
                                xtype: 'combobox',
                                dataIndex: 'StageId',
                                valueField: 'StageId',
                                displayField: 'Name',
                                store: 'stageStore',
                                columnWidth: .5,
                                anchor: '100%',
                                selectOnFocus: true,
                                typeAhead: true,
                                forceSelection: true,
                                minChars: 1,
                                tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>")
    }]
                            });
    
                            // END OF CUSTOMIZATION
    
                            this.callParent([Ext.apply({
                                titleTextAdd: 'Add Event',
                                titleTextEdit: 'Edit Event',
                                width: 600,
                                autocreate: true,
                                border: true,
                                closeAction: 'hide',
                                modal: false,
                                resizable: false,
                                buttonAlign: 'left',
                                savingMessage: 'Saving changes...',
                                deletingMessage: 'Deleting event...',
                                layout: 'fit',
    
                                fbar: [{
                                    xtype: 'tbtext',
                                    text: '<a href="#" id="tblink">Edit Details...</a>',
                                    hidden: true
                                },
                        '->', {
                            text: 'Save',
                            disabled: false,
                            handler: this.onSave,
                            scope: this
                        },
                        {
                            itemId: 'delete-btn',
                            text: 'Delete',
                            disabled: false,
                            handler: this.onDelete,
                            scope: this,
                            hideMode: 'offsets'
                        },
                        {
                            text: 'Cancel',
                            disabled: false,
                            handler: this.onCancel,
                            scope: this
    }],
                                items: formPanelCfg
                            },
                    config)]);
                        }
                    });
    Thanks & BR,
    PRASAD
    Attached Thumbnails Click image for larger version. 

Name:	EventWindow.jpg 
Views:	105 
Size:	33.5 KB 
ID:	12601  
    Last edited by Daniil; Jun 20, 2014 at 4:37 AM. Reason: [CLOSED]
  2. #2
    Hi @Arohan,

    Those fields are inside a DateRangeField. You should override it to exclude those fields.
  3. #3
    I have added following code to override the DateRange in Calendar. It works great.

     Ext.calendar.form.field.DateRange.override({
                getStartTimeConfig: function() {
                    return {
                        xtype: 'timefield',
                        itemId: this.id + '-start-time',
                        hidden: this.showTimes === false,
                        labelWidth: 0,
                        hideLabel: true,
                        width: 90,
                        format: this.timeFormat,
                        //format: "G:i", //added
                        minValue: "9:00", //added
                        maxValue: "18:00", //added
                        listeners: {
                            'select': {
                                fn: function() {
                                    this.onFieldChange('time', 'start');
                                },
                                scope: this
                            }
                        }
                    };
                }
            });
    I have one more query though. I want to set minValue and maxValue for the timefield from database settings. How can I achieve this ?
  4. #4
    You can render those setting to a client, for example, as an EventWindow's CustomConfig. Then apply it to the respective fields in your JavaScript overrides.
  5. #5
    Can you please given an example?
  6. #6
    Unfortunately, we don't have such an example.

Similar Threads

  1. Replies: 3
    Last Post: Jun 26, 2014, 12:08 PM
  2. Replies: 1
    Last Post: Apr 13, 2014, 7:09 AM
  3. Replies: 0
    Last Post: Feb 04, 2012, 8:05 PM
  4. Replies: 4
    Last Post: Jun 30, 2011, 3:30 PM
  5. [CLOSED] [1.0] Calendar - hide/disable buttons in event edit window
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 08, 2010, 12:21 PM

Posting Permissions