PDA

View Full Version : Simple Calendar By Daniel Zhang



daniel_82
2 May 2010, 8:10 PM
**//**
* @author Liang Zhang
* Calendar with tip v1.0
*
* Usage test
*
* var dm = new My.Calendar();
* dm.setMarkup([{date:'2010-03-29',tip:'Today'}]);
* dm.on("markupselected", function(calendar, cfg) {
* alert(cfg.date+":"+cfg.tip);
* });
*/
Ext.namespace("My");
My.Calendar = Ext.extend(Ext.DatePicker, {
todayText: "Today",
minText: "Min",
maxText: "Max",
disabledDaysText: "",
disabledDatesText: "",
monthNames: Date.monthNames,
dayNames: Date.dayNames,
nextText: 'Next Month (Control+Right)',
prevText: 'Last Month (Control+Left)',
monthYearText: 'Choose Month (Control+Up/Down)',
todayTip: "{0} (Space Bar)",
format: "d/m/y",
okText: "OK",
cancelText: "Cancel",
constrainToViewport: false,
style: { marginLeft: '10px', marginTop: '30px' },
initComponent: function() {
My.Calendar.superclass.initComponent.call(this);
this.addEvents(
/**//**
* @event markupselected
* Fires when the markup cell is selected
* @param {Calendar} this
* @param {Cfg} the current markup setting which user seeted
*/
'markupselected',
/**//**
* @event beforechange
* Fires before the select date is changed
* @param {Calendar} this
* @param {date} the new date
* @param {date} the old date
*/
'beforechange'
);
},
// private
update: function(date) {
if (!date) {
date = new Date();
}
var oldDate = (this.activeDate || this.value);
if (date.getTime() != oldDate.getTime()) {
this.fireEvent("beforechange", this, date, oldDate);
}
My.Calendar.superclass.update.call(this, date);
if (this.markups) {
this.onMarkup();
var cfg = this.getMarkupDateConfig(date);
if (cfg) {
this.fireEvent("markupselected", this, cfg);
}
}
},
markupTPL: new Ext.Template(
'<span style="color:blue" title="{tip}">{day}</span>'
),
/**//**
* @param {markups} the array of object{date,tip}
* @param {handler} the function on the markup cell clicked, the callback param is (cell_date)
*/
setMarkup: function(markups, handler) {
this.markups = markups;
this.markupHandler = handler;
this.onMarkup();
},
onMarkup: function() {
var textNodes = this.textNodes;
for (var i = 0; i < this.markups.length; i++) {
var m = this.markups[i];
var span = this.getDateCellSpan(m.date);
if (span) {
var day = span.innerHTML;
span.innerHTML = '';
this.markupTPL.append(Ext.get(span), { tip: m.tip, day: day });
}
}
},

/**//**
* @param date String:'yyyy-mm-dd' or Date object
*/
// private
getDateCellSpan: function(date) {
if (this.textNodes != undefined) {
var d;
if (typeof date == 'string') {
d = this.getMyDateFormat(date).getTime();
} else {
d = date.getTime();
}
for (var i = 0; i < this.textNodes.length; i++) {
var cd = this.getCellDateTime(this.textNodes[i]);
if (cd == d) {
return this.textNodes[i];
}
}
return null;
}
},
// private
getCellDateTime: function(span) {
var dd = (this.activeDate || this.value).clearTime(true);
var tdEL = Ext.get(span).parent("td");
if (tdEL.hasClass('x-date-prevday')) {
dd = dd.add("mo", -1);
} else if (tdEL.hasClass('x-date-active')) {
} else if (tdEL.hasClass('x-date-nextday')) {
dd = dd.add("mo", 1);
}
dd.setDate(span.innerHTML);
return dd.getTime();
},
/**//**
* @param date String:'yyyy-mm-dd'
* @return Date
*/
// private
getMyDateFormat: function(date) {
return Date.parseDate(date, "Y-m-d")
},
/**//**
* return custermized date
*/
getMarkupDateConfig: function(date) {
var dd = (date || (this.activeDate || this.value)).getTime();
for (var i = 0; i < this.markups.length; i++) {
var m = this.markups[i];
var mdt = this.getMyDateFormat(m.date).getTime();
if (mdt == dd) {
return m;
}
}
return null;
}
});


usage:


var dm = new My.Calendar();
/*
dm.setMarkup([{date:'2010-03-29',tip:'Today'}]);
dm.on("markupselected", function(calendar, cfg) {
alert(cfg.date+":"+cfg.tip);
});
*/
dm.on("select", function(calendar, d) {
var y = d.getYear();
var m = d.getMonth()+1; // added +1 because javascript counts month from 0
var d = d.getDate();
var fDate = y + '-' + m + '-' + d;
alert(fDate);
});

wm003
3 May 2010, 11:13 PM
it seems to be the same functionality like the "onDateClick"-event (at least when using DatePickerPlus (http://extjs.com/forum/showthread.php?p=148587)?)
if its somehow different, please provide a running demopage. Thanks :)