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

Question

在我的ExtJS 4.2申请表中，我要求根据所选员工的假日日历显示1到12个月的日历。

我需要展示这样的东西：

所以从上面的方法来看，我认为这可以通过使用DatePicker组件（尽可能多的组件）来完成。

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

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

  

任何人都做过类似的事情，所以可以让我知道实现这个目标的最佳途径吗？

提前感谢。

Answer 1

我使用了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"
                    })


                });
            }
        });