Simple Calendar Panel

[durlabh]

Hi Daniel_82,

I'm not sure what are you trying to set. If you just need to move to today, you can set like:

homeCalendar.value = new Date();
homeCalendar.update();

[senacle]

In red/bold, the changes to have the french version.

calendar.js

Ext.ux.Calendar = function(config) {
    Ext.ux.Calendar.superclass.constructor.call(this, config);
    this.addEvents({
        click: true,
        mouseover: true,
        mouseout: true
    });
};

Ext.ux.Calendar = Ext.extend(Ext.Panel, {
    onRender: function(container, position) {
        Ext.ux.Calendar.superclass.onRender.apply(this, arguments);
        this.createInitialLayout();
        this.update();
    },
    daysOfWeek: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
    value: new Date(),
    moveMonths: function(months) {
        this.value = this.value.add(Date.MONTH, months);
        this.update();
    },
    showPrevMonth: function() {
        this.moveMonths(-1);
    },
    showNextMonth: function() {
        this.moveMonths(1);
    },
    showNavigation: true,

    createInitialLayout: function() {
        var htmlData = [];
        htmlData.push("<table class=\"ux-cal\" width='100%' height='100%' cellspacing='0'>");

        htmlData.push("<thead>");
        htmlData.push("<tr class='ux-cal-header'>");
        htmlData.push("<th><div class='x-date-left'><a href='#'>&nbsp;</a></th>")
        htmlData.push("<th colspan='5' class='ux-cal-monthTitle'>&nbsp;</th>");
        htmlData.push("<th><div class='x-date-right' style='float:right'><a href='#'>&nbsp;</a></div></th>")
        htmlData.push('</th></tr>');
        htmlData.push('</thead>');
        htmlData.push('<tbody>');

        htmlData.push("<tr class='ux-cal-weekday'>");
        var daysOfWeek = this.daysOfWeek;
        for (var i = 0; i < 7; i++) {
            var width = i == 5 || i == 6 ? 15 : 14;
            htmlData.push('<td width="' + width + '%">' + daysOfWeek[i] + '</td>');
        }
        htmlData.push('</tr>');

        for (var i = 0; i < 42; i++) {
            if (i % 7 == 0) { // First day of week
                htmlData.push("<tr class='ux-cal-row'>");
            }
            htmlData.push("<td>&nbsp;</td>");
            if (i % 7 == 6) { // Last day of week
                htmlData.push("</tr>");
            }
        }
        htmlData.push('</tbody>');
        htmlData.push("</table>");
        this.body.update(htmlData.join(""));

        var leftNav = this.body.child("div.x-date-left a");
        var rightNav = this.body.child("div.x-date-right a");
        this.leftClickRpt = new Ext.util.ClickRepeater(leftNav, { handler: this.showPrevMonth, scope: this, preventDefault: true, stopDefault: true });
        this.rightClickRpt = new Ext.util.ClickRepeater(rightNav, { handler: this.showNextMonth, scope: this, preventDefault: true, stopDefault: true });

        var showNavigation = this.showNavigation;
        leftNav.setDisplayed(showNavigation);
        rightNav.setDisplayed(showNavigation);
        this.calendarHeaderEl = this.body.child('th.ux-cal-monthTitle');

        var table = this.body.select('table');
        table.on({
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            click: this.onClick,
            scope: this
        });

        this.cells = this.body.select('tbody td');
    },

    beforeDestroy: function() {
        this.leftClickRpt.destroy();
        this.rightClickRpt.destroy();
        this.cells.destroy();
        Ext.ux.Calendar.superclass.beforeDestroy.apply(this, arguments);
    },

    onMouseOver: function(e) {
        this.processEvent('mouseover', e);
    },

    onMouseOut: function(e) {
        this.fireEvent('mouseout', e, this);
    },

    onClick: function(e) {
        this.processEvent('click', e);
    },

    processEvent: function(eventName, e) {
        var t = e.getTarget();
        var o = {};
        if (t.tagName == 'TD') {
            var cell = t;
            var row = t.parentNode;
            var rowIndex = row.rowIndex - 2; // Ignore header rows
            o = { cellIndex: cell.cellIndex, rowIndex: rowIndex, row: row, cell: cell };
            if (rowIndex >= 0) {
                o.date = this.startOfCalendar.add(Date.DAY, ((o.rowIndex) * 7) + o.cellIndex);
            }
        }
        this.fireEvent(eventName, o, e);
    },

    update: function() {
        var value = this.value.clearTime();
        var startOfCalendar = value.getFirstDateOfMonth();
        var endOfCalendar = startOfCalendar.getLastDateOfMonth();

        var startWeekDay = Number(startOfCalendar.format("N"));
        if (startWeekDay > 0) {
            startOfCalendar = startOfCalendar.add(Date.DAY, 1-startWeekDay);
        }

        var endWeekDay = Number(endOfCalendar.format("N"));
        if (endWeekDay < 6) {
            endOfCalendar = endOfCalendar.add(Date.DAY, 6 - endWeekDay);
        }

        var duration = endOfCalendar - startOfCalendar;
        var oneDay = 1000 * 60 * 60 * 24;
        duration = duration / oneDay + 1;

        endOfCalendar = endOfCalendar.add(Date.DAY, 42 - duration);

        var htmlData = [];

        var calendarTitle = value.format("F Y");
        this.calendarHeaderEl.update(calendarTitle);

        var currentMonth = value.format("m");
        var o = { today: new Date().clearTime(), date: startOfCalendar };
        var cells = this.cells.elements;
        this.startOfCalendar = startOfCalendar;
        for (var i = 0; i < 42; i++) {

            o.css = o.date.format("m") == currentMonth ? "sameMonth" : "otherMonth";
            o.css += " x-unselectable";
            o.caption = o.date.format("d");
            o.cell = cells[i + 7];

            this.formatDay(o);

            o.cell.className = o.css;
            o.cell.innerHTML = o.caption;
            o.date = o.date.add(Date.DAY, 1);
        }
    },
    beforeDestroy: function() {
        if (this.rendered) {
            Ext.destroy(
                this.leftClickRpt,
                this.rightClickRpt
            );
        }
        Ext.ux.Calendar.superclass.beforeDestroy.apply(this, arguments);
    }
});
Ext.reg('ux-cal', Ext.ux.Calendar);

[senacle]

mankz, Tooltip is not part of the control itself. It is just to demonstrate the capabilities of the UX itself. So, you can customize whatever way you want.

To change the tooltip and alert message to have your own date format, put in the html header part of this nice extension :

o.date.format("d/m/Y").toString()  //french date

in place of :

o.date.toString()

[malstroem]

Hi There,

I just try to use this extension with a dynamic date-store.
That means that different dates for each month are loaded from the database into a JsonStore

Any Ideas how to integrate that store with the "dates"-config of the extension?
Cheers
Thomas

[malstroem]

One more question - how can I add several events (dates) to one day???

[durlabh]

Here is a sample implementation we have with AJAX requests:

/*global Ext:false, MyApp: true */
MyApp.AjaxCalendar = Ext.extend(Ext.ux.Calendar, {
	storeDateField: 'LeaveDate',
	cssConfig: {
		busyDay: 'new-day-taken',
		holiday: 'holiday'
	},
	initComponent: function() {
		var storeOptions = Ext.apply({}, this.storeOptions, {
			url: this.controller,
			root: 'data',
			baseParams: { action: 'list' },
			fields: ['PtoId', 'EmployeeNumber', 'LeaveDate', 'Remarks', 'DayRemarks', 'FullName', { name: 'FromDate', type: 'date' }, { name: 'ToDate', type: 'date'}]
		});

		var store = new Ext.data.JsonStore(storeOptions);
		this.store = store;
		store.addListener({
			load: this.onDataLoad,
			scope: this
		});

		MyApp.AjaxCalendar.superclass.initComponent.apply(this, arguments);
		this.addListener({
			beforeUpdate: this.beforeUpdate,
			render: this.createTooltip,
			scope: this
		});

		this.on('mouseover', this.handleMouseOver, this);
	},

	createTooltip: function() {
		this.tooltip = new Ext.ToolTip({
			target: this.body,
			showDelay: 20,
			trackMouse: true,
			disabled: true
		});
	},

	getTooltipText: function(o) {
		var store = this.store;
		this.filterData(o);
		if (store.getCount() > 0) {
			var record = store.getAt(0);
			return record.get('DayRemarks') || record.get('Remarks');
		}
	},

	handleMouseOver: function(o) {
		var tooltip = this.tooltip;
		var text;
		if (o.date) {
			text = this.getTooltipText(o);
		}
		if (text) {
			if (this.tooltip.rendered) {
				this.tooltip.body.dom.innerHTML = text;
			} else {
				this.tooltip.html = text;
			}
			this.tooltip.show();
		} else {
			tooltip.hide();
		}
	},

	refresh: function() {
		delete this.loadedValue;
		this.update();
	},

	beforeUpdate: function() {
		if (this.value != this.loadedValue) {
			var store = this.store;
			store.baseParams.date = this.value.format('m/d/Y');
			store.load();
			return false;
		}
	},
	onDataLoad: function(store) {
		this.loadedValue = this.value;
		this.update();
	},

	filterData: function(o) {
		var toCompareTo = o.date.format("Ymd");
		var storeDateField = this.storeDateField;
		this.store.filterBy(function(record, id) {
			if (Date.parseDate(record.get(storeDateField), 'X').format("Ymd") == toCompareTo) {
				return true;
			}
			return false;
		});
	},

	formatDay: function(o) {
		var store = this.store;
		this.filterData(o);

		if (store.getCount() > 0) {
			o.css += " " + this.cssConfig.busyDay;
		}
	}
});

[malstroem]

Great - Thank You!!!
I´ll adapt this to my needs in the next days...

[tony_pe]

var da=new Date();
dy = da.getFullYear();
dm = da.getMonth() + 1;
dd = da.getDate();
if ( dy < 1970 ) dy = dy + 100;
ys = new String(dy);
ms = new String(dm);
ds = new String(dd);
if ( ms.length == 1 ) ms = "0" + ms;
if ( ds.length == 1 ) ds = "0" + ds;
ys = ys + ms + ds
var s="homeCalendar.dates = {'"+ys+"':'Today'}";
eval(s);

homeCalendar.update();

Know others format?

[malstroem]

Hi durlabh,

one more question...
I have some problems when using tooltips:

When using this piece of code, I get the following error in Firebug:

"createTooltip": function() {
        this.tooltip = new Ext.ToolTip({
            target: this.body, 
            showDelay: 20,
            trackMouse: true
        });
    }

this.targetXY is undefined
            return [this.targetXY[0]+m...], this.targetXY[1]+mouseOffset[1]]; ext-all-debug.js (Zeile 28784)

When using target: Ext.getBody() the tooltip is beeing dragged throughout the whole page...
How can I assign a valid target?

Thanks Thomas

[ExtJSNewUser]

How do we get the Data from the database and show the dates highlighted on this control. like if you have a holiday table in database , we need to show those dates as highlighted on the control