ExtJS 4.2 Show a 1 - 12 Month Dynamic calendar

Question

In my ExtJS 4.2 Application I have the requirement to show from 1 to 12 months calendar depending on the Holiday calendar from a selected employee.

I need to show something like this:

So from the above approach I think this can be done by using DatePicker components (as many as needed)

I also found this sample of how to show a complete year info:

From the above sample I think the approach would be creating a dynamic grid with custom columns and rows.

Anyone has done something similar so can give me an idea of the best way to achieve this?

Appreciate in advance.

Answer 1

I used 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
}
});

And then I load in events from a store 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"
                    })


                });
            }
        });