:: Forum >> Version 2 >>
ActiveWidgets custom-Calendar ... Experiment-3......
This sample demostrates that a grid can be used for anything your imagination invent. Sometimes takes more time, but...that's the AW real Magic.
It is not even in Alpha version, and is just a simple Date-picker, but is ready for developing a popup/Validation/movable/closable and even date-conversion authentic Calendar.
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<script>
//************************************************//
////// CUSTOM --grid.subclass-- CALENDAR
//************************************************//
var AWCalendar=AW.UI.Grid.subclass();AWCalendar.create=function(){var obj=this.prototype;var monthArray=new Array(7);for (var f=0;f<7;f++){monthArray[f]=new Array();}monthArray[0]=["Su","M","Tu","W","Th","F","Sa"];var datemarker=false;var rowDay=0;var columnDay=0;var callastCol=-1;var callastRow=-1;obj.defineModel("_");obj.define_Property("typedDate",'');obj.define_Property("dateseparator",'');obj.define_Property("format",'');obj.define_Property("separator",'');obj.setStyle('background', '#f5f5e5');obj.define_Property("selectedDate",'');obj.define_Property("selectedvalueDate",'');obj.define_Property("dateorder",'');obj.define_Property("datemarker", false );obj.on_DatemarkerChanged=function(val){datemarker=val;};obj.on_FormatChanged=function(val){obj.set_Dateorder(val);};obj.on_SeparatorChanged=function(val){obj.set_Dateseparator(val)};var monthnames=new Array("January","February","March","April","May","June","July","August","September","October","November","December");var monthdays=[[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]];var givenDate=new Array(4);;var displayDate=null;var todayDate=new Date() ;displayDate=todayDate;givenDate[0]=todayDate.getFullYear();givenDate[1]=todayDate.getDate();givenDate[2]=todayDate.getMonth();givenDate[3]='';var monthlastday;obj.makeMonth=function(TheDate, ArrName){var weekDay=TheDate.getDay();var monthNum=TheDate.getMonth();var monthDay=TheDate.getDate();var YearNum=TheDate.getFullYear();ArrName[0]=["Su","M","Tu","W","Th","F","Sa"];for (var f=1;f<7;f++){ArrName[f]=new Array();}var mydays=new Array();monthlastday=parseInt(monthdays[parseInt(monthNum)]);if ( monthNum == '1' && ((YearNum % 4 == 0) && !(YearNum % 100 == 0)) || monthNum == '1' && ((YearNum % 4 == 0) && (YearNum % 400 == 0)) ){monthlastday++;}var spaces=monthDay;while (spaces > 7) spaces-=7;spaces=weekDay - spaces + 1;if (spaces < 0) spaces+=7;var weekNum=1;for (var s=0;s<spaces;s++){ArrName[weekNum].push("");}var count=1;while (count <= monthlastday){for (var b=spaces;b<7;b++){if (count==monthDay ){rowDay=weekNum;columnDay=ArrName[weekNum].length;}if (count <= monthlastday){ArrName[weekNum].push(count)}if (count > monthlastday){ArrName[weekNum].push("")}if(ArrName[weekNum].length > 6){weekNum++}count++;}spaces=0;}if(ArrName[6].length == 0){ArrName[6]=["","","","","","",""]}return ArrName};
obj.makeDate=function(MyDate){MyDate[3]=' 01:00PM';MD_Time=MyDate[3];MD_M=parseInt(MyDate[2]);MD_D=parseInt(MyDate[1]);MD_Y=parseInt(MyDate[0]);MD_i4=MD_Time.indexOf(':');MD_H=parseInt(MD_Time.substring(0,MD_i4));MD_N=parseInt(MD_Time.substring(MD_i4+1));MD_S=0;if (MD_Time.toLowerCase().indexOf('pm') > -1) {if (MD_H != 12) {MD_H=MD_H*1+12;}}else {if (MD_H==12) {MD_H=0;}}DObj=new Date(MD_Y, MD_M, MD_D, MD_H, MD_N, MD_S);displayDate=DObj;this.makeMonth(DObj, monthArray)};function DateSeachMonth(Cmonth){for(var k=0;k<12;k++){if (monthnames[k]==Cmonth){return k;}}}; obj.on_TypedDateChanged=function(DateText) { var sep= DateText.split( this.get_Dateseparator() );if( this.get_Dateorder().substr(0, 1)=='y' || this.get_Dateorder().substr(0, 1)=='Y'){givenDate[0]=parseInt(sep[0]);};if( this.get_Dateorder().substr(2, 1)=='y' || this.get_Dateorder().substr(2, 1)=='Y' ){givenDate[0]=parseInt(sep[2]);};if( this.get_Dateorder().substr(0, 1)=='d' ){givenDate[1]=parseInt(sep[0]);};if( this.get_Dateorder().substr(1, 1)=='d' ){givenDate[1]=parseInt(sep[1]);};if( this.get_Dateorder().substr(2, 1)=='d' ){givenDate[1]=parseInt(sep[2]);};if( this.get_Dateorder().substr(0, 1)=='m' ){givenDate[2]=parseInt(sep[0]);};if( this.get_Dateorder().substr(1, 1) == 'm' ){ givenDate[2] = parseInt(sep[1]);};if( this.get_Dateorder().substr(2, 1) == 'm' ){ givenDate[2] = parseInt(sep[2]);};if( this.get_Dateorder().substr(0, 1) == 'M' ){ givenDate[2] = DateSeachMonth(sep[0]) };if( this.get_Dateorder().substr(1, 1) == 'M' ){ givenDate[2] = DateSeachMonth(sep[1]) };if( this.get_Dateorder().substr(2, 1) == 'M' ){ givenDate[2] = DateSeachMonth(sep[2]) }; this.makeDate(givenDate);DateLabel.setControlText( ' ' + displayDate.getFullYear() + ' ' + monthnames[displayDate.getMonth()] );this.getLayoutTemplate().refresh();if( datemarker == true ){ this.setSelectedRows([rowDay]);this.setSelectedColumns([columnDay] );} else{ this.setSelectedColumns([-1]);this.setSelectedRows([-1]);} };obj.isCurrentMonth = function(){ if(givenDate[0] == todayDate.getFullYear() && givenDate[2] == todayDate.getMonth() ){ this.setSelectedRows([rowDay]);this.setSelectedColumns([columnDay] );} else{ callastCol = -1;callastRow = -1;this.setSelectedColumns([callastCol]);this.setSelectedRows([callastRow]);} };obj.makeDate(givenDate);
obj.onCellClicked=function(event,col,row){if(col+row>-1&&!isNaN(this.getCellText(col,row))&&this.getCellText(col,row)!=''){callastCol=col;callastRow=row;var datesepa=obj.get_Dateseparator();var realmonth=(parseInt(givenDate[2])+1)<13 ? parseInt(givenDate[2])+1:'1';if(obj.get_Dateorder().substr(0,2)=='dm'){obj.set_SelectedDate(this.getCellText(col,row)+datesepa+realmonth+datesepa+givenDate[0]);}if(obj.get_Dateorder().substr(1,2)=='dm'){obj.set_SelectedDate(givenDate[0]+datesepa+this.getCellText(col,row)+datesepa+realmonth);}if(obj.get_Dateorder().substr(0,2)=='dM'){obj.set_SelectedDate(this.getCellText(col,row)+datesepa+monthnames[parseInt(givenDate[2])]+datesepa+givenDate[0]);}if(obj.get_Dateorder().substr(1,2)=='dM'){obj.set_SelectedDate(givenDate[0]+datesepa+this.getCellText(col,row)+datesepa+monthnames[parseInt(givenDate[2])])};if(obj.get_Dateorder().substr(0,2)=='md'){ obj.set_SelectedDate(realmonth+datesepa+this.getCellText(col,row)+datesepa+givenDate[0])};if(obj.get_Dateorder().substr(1,2)=='md'){obj.set_SelectedDate(givenDate[0]+datesepa+realmonth+datesepa+this.getCellText(col,row))};if(obj.get_Dateorder().substr(0,2)=='Md'){obj.set_SelectedDate(monthnames[parseInt(givenDate[2])]+datesepa+this.getCellText(col,row)+datesepa+givenDate[0])};if(obj.get_Dateorder().substr(1,2)=='Md'){obj.set_SelectedDate(givenDate[0]+datesepa+monthnames[parseInt(givenDate[2])]+datesepa+this.getCellText(col,row))};vardia0='0',mes0='0';if(realmonth<10){mes0+=''+(parseInt(givenDate[2])+1)}else{mes0=''+(parseInt(givenDate[2])+1)};if(this.getCellText(col,row)<'10'){dia0+=''+this.getCellText(col,row)}else{dia0=this.getCellText(col,row)};obj.set_SelectedvalueDate(givenDate[0]+datesepa+mes0+datesepa+dia0);}else{if(row<1||this.getCellText(col,row)==''){this.setSelectedRows([callastRow]);this.setSelectedColumns([callastCol]);}}};
obj.onControlClicked=function(){var col=this.getSelectedColumns();var row=this.getSelectedRows();if(col+row>-1&&!isNaN(this.getCellText(col,row))&&this.getCellText(col,row)!=''){}};
obj.setCellText(monthArray);obj.setHeaderText(["-Y","Y+"," ","-M","M+"," ","TD"]);obj.setColumnCount(monthArray[0].length);obj.setRowCount(7);obj.setSelectorVisible(false);obj.setControlSize(152,180);obj.setScrollBars("none");obj.onScrollBarsChanging=function(){return 1};obj.onScrollLeftChanging=function(){return 1};obj.onScrollTopChanging=function(){return 1};for(var co=0;co<obj.getColumnCount();co++){obj.getCellTemplate(co).setStyle('text-align','right');obj.getCellTemplate(co).setStyle('width',21);obj.getCellTemplate(co).setStyle('border-right','1pxsolid#ccc');obj.getHeaderTemplate(co).setStyle('width',21);obj.getSeparatorTemplate(co).setStyle('visibility','hidden');}
obj.getRowTemplate(0).setStyle('color','brown');for(var ro=0;ro<obj.getRowCount();ro++){obj.getRowTemplate(ro).setStyle('border-bottom','1pxsolid#ccc');};obj.setSelectedRows([-1]);obj.setSelectedRows([rowDay]);obj.setSelectedColumns([columnDay]);var DateLabel=new AW.UI.Label;DateLabel.setStyle('width',obj.getStyle('width'));DateLabel.setStyle('height',16);DateLabel.setStyle('font-weight','bold');DateLabel.setStyle('font-size','10pt');DateLabel.setControlText(' '+displayDate.getFullYear()+' '+monthnames[parseInt(displayDate.getMonth())]);var TopDiv=new AW.HTML.DIV;TopDiv.setStyle('width',obj.getStyle('width'));TopDiv.setStyle('height',obj.getStyle('height'));TopDiv.setStyle('background','lightyellow');TopDiv.setContent('html',DateLabel.toString());obj.defineTemplate("bottomLine",function(){return TopDiv.toString()});obj.setLayoutTemplate(new AW.Panels.Horizontal);obj.setPanelTemplate(function(i){switch(i){case 0:return this.getBottomLineTemplate();case 1:return this.getScrollTemplate();}});obj.setPanelHeight(17,0);var HeaderTtip=["PrevYear","NextYear"," ","PrevMonth","NextMonth"," ","ToDay"];obj.setHeaderTooltip(HeaderTtip);
obj.onHeaderClicked=function(event,index){if(index==0){if(givenDate[0]<'1901'){alert('previousyearsnotallowed')}else{givenDate[0]--;}}if(index==1){givenDate[0]++;}if(index==3){if(givenDate[2]=='0'){if(givenDate[0]<'1901'){alert('previousyearsnotallowed')}else{givenDate[2]='11';givenDate[0]--;}}else{givenDate[2]--;}}if(index==4){givenDate[2]++;if(givenDate[2]=='12'){givenDate[2]='0';givenDate[0]++;}}if(index==6){displayDate=todayDate;givenDate[0]=todayDate.getFullYear();givenDate[1]=todayDate.getDate();givenDate[2]=todayDate.getMonth();}this.makeDate(givenDate);DateLabel.setControlText(' '+displayDate.getFullYear()+' '+monthnames[displayDate.getMonth()]);this.getScrollTemplate().refresh();this.isCurrentMonth();return true;};obj.setScrollTop(0);};
var objCal = new AWCalendar;
objCal.setId("myGridCal");
objCal.set_Datemarker(true); //needed in alpha ver. (for future validation use)
/*
set_Format('par') usage:
please note 'y' or 'Y' can be used either, but for now both are a [4 digits] year.(number)
'd' is the daay in 1 or 2 digits (number)
'm' is the month in 1 or 2 digits (number)
`M' is the month in text format (beguining with Capital)
valid parameters combination are:
ymd -- 2007 - 11 - 30
ydm -- 2007 - 30 - 11
yMd -- 2007 - November - 30
ydM -- 2007 - 30 - November
mdy -- 11 - 30 - 2007
dmy -- 30 - 11 - 2007
Mdy -- November - 30 - 2007
dMy -- 30 - November - 2007
*/
objCal.set_Format('dmy');
objCal.set_Separator('/'); // any char()
objCal.onRowClicked = function(){
Inp.setControlText( this.get_SelectedDate() );
}
document.write(objCal);
document.write('<br/>');
var Inp = new AW.UI.Input;
Inp.setId('Inp_01');
Inp.setStyle('width', 120);
document.write(Inp);
</script>
</body>
</html>
Carlos
Friday, September 7, 2007
Very cool :-)
Alex (ActiveWidgets)
Tuesday, September 11, 2007
Carlos:
The only thing I see are two panels. One that has two strings saying "undefined" and anoter empty panel. Something like this:
________________
undefined |
undefined |
|
|
________________|
________________|
I am using
Any ideas?
Isaac (BMS)
Wednesday, February 13, 2008
Hi Carlos,
I see like Isaac. Why?
________________
undefined |
undefined |
|
|
________________|
________________|
tonle
Wednesday, February 13, 2008
That's because for now this alpha-demo only works on version 2.02.
I'm working on it for 2.5 and adding new features like yearly calendar with scheduler and to-do lists.
Carlos
Thursday, February 14, 2008
Post a reply:
Back to support forum
Forum search
