Simple Calendar Panel

[jay@moduscreate.com]

how about a config option for animations.

[durlabh]

I've not played that much with transition but as far as I understand, we would need to replace the table element to actually use the transition. Right now, I just update the table cells when month changes. So, if somebody wants to go ahead and try that out, your are more than welcome! Source is all yours to modify.. and that's why I put it out in the community.

[canakaltun]

i think that if you change html an js it will work
html:
create a div and import js
in calander js
also rendering should be done to created div
ex: renderTo: 'panel'


creating an onready function and setiing clander in it wiill solve that problem
like
Ext.onReady(function() {.........

iam not experd but after this problem i searched and evertbody did like that... also in samples

if you can do that it will be wonderfull

[canakaltun]

also can you read data from json?

[durlabh]

Of course you can use JSON. There is a dates property in sample that can be overridden. If you click on the hyperlink in the example, it resets the JSON data changing the date being highlighted!

[canakaltun]

will u do other things?

[durlabh]

I'm unsure what other things you are talking about. If you are talking about moving the code in html to onReady event, you can do it yourself. Also, if you want, you can create div and use renderTo config instead of calling render method at the end!

[moegal]

durlabh,

Great calendar. It would be nice to add a month year picker like the one in the last post of this thread. Maybe a button for today somewhere as well.

http://extjs.com/forum/showthread.ph...nthMenu&page=2

Thanks, Marty

[ctoestreich]

This works great in Mozilla, but fails to render in IE. I have dug deep into the ExtJS code and it might be something with the framework. Although when rendering the cal to an Ext.window it works, just not when you try and render it in an Ext.panel.

/* calendar */
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: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    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 == 0 || 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, -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);

 <span id="one">Hello World</span>
    <P/>
    <span id="calSpan"></span>
    <p/>
    <span id="three"><a href="javascript:emulateAJAX()">Ajax calendar data</a></span>
    
    <script type="text/javascript">
        Ext.onReady(function () {

            emulateAJAX = function() {
                // Sample data that could have been from AJAX request
                homeCalendar.approvedDates = {
                    '20100126': 'Status: Approved<BR>Name: Christian<BR>Details: I like cheese.',
                    '20100127': 'Status: Approved<BR>Name: Christian<BR>Details: I like cheese.',
                    '20100128': 'Status: Approved<BR>Name: Christian<BR>Details: I like cheese.',
                    '20100129': 'Status: Approved<BR>Name: Christian<BR>Details: I like cheese.'
                }
                homeCalendar.declinedDates = {
                    '20100116': 'Status: Declined<BR>Name: Christian<BR>Details: I hate cheese.'
                }
                homeCalendar.pendedDates = {
                    '20100114': 'Status: Pended<BR>Name: Christian<BR>Details: I maybe cheese.'
                }
                if(homeCalendar.rendered) {
                    homeCalendar.update();
                }
            };

            var homeCalendar = new Ext.ux.Calendar({
                width: 250,
                height: 250,
                // Sample data
                approvedDates: {
                },
                declinedDates: {
                },
                pendedDates: {
                },
                getData: function(o) {
                    var approved = this.getApprovedData(o);
                    var declined = this.getDeclinedData(o);
                    var pended = this.getPendedData(o);
                    if(approved) {
                        return this.approvedDates[o.date.format("Ymd")];
                    }
                    if(declined) {
                        return this.declinedDates[o.date.format("Ymd")];
                    }
                    if(pended) {
                        return this.pendedDates[o.date.format("Ymd")];
                    }
                },
                getApprovedData: function(o) {
                    return this.approvedDates[o.date.format("Ymd")];
                },
                getDeclinedData: function(o) {
                    return this.declinedDates[o.date.format("Ymd")];
                },
                getPendedData: function(o) {
                    return this.pendedDates[o.date.format("Ymd")];
                },
                // Custom formatting based on date
                formatDay: function(o) {
                    var approved = this.getApprovedData(o);
                    var declined = this.getDeclinedData(o);
                    var pended = this.getPendedData(o);
                    if(approved) {
                        o.css += " ux-cal-highlight-approved";
                        //o.caption += "*";
                    }
                    if(declined) {
                        o.css += " ux-cal-highlight-declined";
                        //o.caption += "*";
                    }
                    if(pended) {
                        o.css += " ux-cal-highlight-pended";
                        //o.caption += "*";
                    }
                },
                listeners: {
                    // Sample for click handling
                    click: function(o) {
                        if(o.date) {
                            var approved = this.getApprovedData(o);
                            var declined = this.getDeclinedData(o);
                            var pended = this.getPendedData(o);
                            var data;
                            if(approved) data = approved;
                            if(declined) data = declined;
                            if(pended) data = pended;
                            if(data) {
                                Ext.Msg.alert('Details', data);
                                //                        } else {
                                //                            Ext.Msg.alert('Details', 'No event scheduled on ' + o.date.toString());
                            }
                        }
                    },

                    // Sample for mouse over handling to show tool-tip
                    mouseover: function(o) {
                        if(!o.date) {
                            this.tooltip.hide();
                        } else {
                            var text = this.getData(o);
                            if(text) {
                                if(this.tooltip.rendered) {
                                    this.tooltip.body.dom.innerHTML = text;
                                } else {
                                    this.tooltip.html = text;
                                }
                                this.tooltip.show();
                            } else {
                                this.tooltip.hide();
                            }
                        }
                    },

                    // Adding tool-tip to the calendar
                    render: function() {
                        this.tooltip = new Ext.ToolTip({
                            target: this.body,
                            showDelay: 20,
                            trackMouse: true
                        })
                    },

                    destroy: function() {
                        this.tooltip.destroy();
                    }
                }
            });

             panel = new Ext.Panel({
                height: 300,
                width: 300,
                items: homeCalendar,
                renderTo: "calSpan",
                layout: 'fit'
            });

            Ext.QuickTips.init();
        });
            
        
    </script>

IE seems to error on line 3138 in the ext-all-debug.js

if(loadScripts !== true){
this.dom.innerHTML = html;
if(Ext.isFunction(callback)){
callback();
}
return this;
}

[daniel_82]

Thanks for develop this simple calendar.

I just wondering how to set date by variable?

                var x = new Date();
                var y = x.getYear();
                var m = x.getMonth() + 1; // added +1 because javascript counts month from 0
                var d = x.getDate();
                var today = y + '-' + m + '-' + d;

                var fDate = (y * 100 + m) * 100 + d;
                homeCalendar.dates = {
                    fDate: 'Today'
                }
                homeCalendar.value = fDate;
                if (homeCalendar.rendered) {
                    homeCalendar.update();
                }

it is not working if set dates with variable unless I set dates = {'20100329':'Today'}.
Anyone know how can i set date by default today's date?