Show cool things you have done with our products


Post by kesikp »

I have question about vertical view.
In horizontal view we have date in header display above header with time. When we click to vertical view mode header with date isn't show. It's posibble, that the header with date to be shown to left of hedaer with time in vertical view like in horizontal view?

https://www.bryntum.com/examples/schedul ... tical.html

Post by mats »

Sure, try adding this to your panel declaration:
listeners : {
        
        viewchange : function() {
            var verticalAxis = Ext.ComponentQuery.query('verticaltimeaxis')[0];

            if (verticalAxis) {
                verticalAxis.setText(Ext.Date.format(this.getStartDate(), 'd M Y'));
            }
        }
    }

Post by kesikp »

Thanks. I have brytnum calendar in my Sencha application. Below I present code with view week in my app.
Ext.define('Hydrogen.view.Glowny.Rezerwacje.Kalendarz_rezerwacji.Kalendarz_rezerwacji_ViewWeek', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.Rezerwacje_KalendarzRezerwacji_ViewWeek',

    requires: [
        'Sch.panel.SchedulerGrid',
        'Sch.plugin.Zones'
    ],

    items: [
        {
            xtype: 'schedulergrid',
            margin: '9 0 0 5',
            region: 'center',
            viewPreset: 'myweek',
            flex: 1,
            startDate: new Date(2015, 9, 22, 7),
            mode: 'vertical',
            snapToIncrement: true,
            eventResizeHandles: 'end',
            plugins: [
                Ext.create("Sch.plugin.CurrentTimeLine")
            ],
            eventBodyTemplate: '<div class=""></div>',
            startTime: 7,
            endTime: 22,
            calendarTimeAxisCfg: {
                height: 20
            },
            timeAxisColumnCfg: {
                text: '',
                width: 60
            }
        }
    ]

});
Where I must paste your solution in preset configuration for my example?
 Sch.preset.Manager.registerPreset('myweek', {
    timeRowHeight       : 40,
    calendarColumnWidth : 200,
    displayDateFormat   : 'G:i',
    shiftIncrement      : 1,
    shiftUnit           : 'WEEK',
    defaultSpan         : 24,
    timeResolution      : {
        unit        : 'DAY',
		increment   : 1
    },
	headerConfig        : {
        bottom  : {
        // this header describe left column
			unit        : 'MINUTE',
			increment   : 10,
			//align       : 'center',
			renderer    : function (value) {
				return Ext.String.format(
					'<div class="sch-calendarcolumn-ct"><span class="sch-calendarcolumn-hours">{0}</span>' +
					'<span class="sch-calendarcolumn-minutes">{1}</span></div>',
					Ext.Date.format(value, 'H'),
					Ext.Date.format(value, 'i')
				);
			}
		},
		middle  : {
			unit        : 'DAY',
			align       : 'center',
			dateFormat  : 'D d/m',
			splitUnit   : 'DAY'
		}
	}
});
In screenshot you can see how it look.
https://kesikp.pl/download/BrytnumViewWeek.png
Image

Post by mats »

See my answer - you should add it to your main SchedulerPanel. Did you try this?

https://bryntum.com/products/gantt-for-extjs/docs/ ... viewchange

Post Reply