ExtJS 4.2 Show a 1 - 12 Month Dynamic calendar - extjs

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"
})
});
}
});