ExtJS 4.2显示1-12个月的动态日历

在我的

extjs4.2

应用程序中，我需要根据所选员工的假日日历显示1到12个月的日历

我需要展示这样的东西：

因此，从上述方法中，我认为可以通过使用

DatePicker

组件（根据需要使用多个组件）来实现这一点

我还发现了如何显示完整年份信息的示例：

从上面的示例中，我认为该方法将创建一个具有自定义列和行的动态网格

任何人都做过类似的事情，所以可以给我一个最好的方法来实现这一点的想法吗

---

提前感谢。

我使用了Extensible.calendar

Ext.define('App.view.calendar.calendar_v', {
extend: 'Extensible.calendar.CalendarPanel',
requires: ['Ext.panel.*',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Ext.tip.QuickTipManager',
'Ext.form.field.ComboBox',
'Ext.layout.container.Table'],
controllers: ['Main'],
eventStore: eventStore,
xtype: 'calendar',
title: 'Custom Views',
width: 800,
height: 700,
activeItem: 3,

// These show by default, turn them off
showDayView: true,
showMonthView: true,

// Defaults to 3 days. You could also set the dayCount config
// inside multiDayViewCfg to change that.
showMultiDayView: true,


// Used with the custom week view configured below
weekText: 'Week',

weekViewCfg: {
    // These settings create a fixed weekday view. 
    // This view will only show Mon-Fri.
    dayCount: 5,
    // Always start the view on Monday
    startDay: 1,
    startDayIsStatic: true,

    // NOTE: the configs below apply to any DayView or WeekView. If you wanted all day
    // and week views to share these same settings, you could simply pass these configs
    // in the general viewCfg. Any views that do not use them will ignore them. They are
    // only on this view in this sample to demonstrate how they can be easily customized per view.

    // Hide the half-hour marker line
    showHourSeparator: false,
    // Start the view at 6:00
    viewStartHour: 6,
    // End the view at 8:00pm / 20:00
    viewEndHour: 20,
    // Default the scroll position on load to 8:00 if the body is overflowed
    scrollStartHour: 8,
    // Customize the hour (and event) heights. See the docs for details on setting this.
    // This example will be double-height (the default is 42)
    hourHeight: 84,
    // Allow drag-drop, drag-create and resize of events in 10-minute increments
    ddIncrement: 10,
    // Since the hour blocks are double-height, we can shorten the minimum event display 
    // height to match the ddIncrement
    minEventDisplayMinutes: 10
}
});

然后我从商店加载事件 var x=1

        var u = Ext.data.StoreManager.lookup('calendar.calendar_s');
        u.load({
            callback: function () {



                Ext.each(Ext.data.StoreManager.lookup('calendar.calendar_s').data.items, function (value) {

                    eventStore.add({
                        CalendarId: (x + 1),
                        EndDate: value.data.date,
                        IsAllDay: true,
                        Location: "",
                        Notes: notes,
                        RecurRule: "",
                        Reminder: "",
                        StartDate: value.data.date,
                        Title: "",
                        Url: "sumpnsumpn"
                    })


                });
            }
        });