« [tip] the magic of -1 | Main | [News] Servoy beats up playground bullies »
March 29, 2006
[TIP] Add a HTML Calendar with only 1 method
By Karel Broer
www.freecolours.com
Is adding an HTML calendar to your form (or controller) difficult? No way! It's possible with just one global method! No kidding? No kidding!
Only thing you need to do is create a text global with the name gCalender (set the field to html_area type). Then use the following method to fill the global field:
/***
HTML TIP:
'\n' will format the HTML nicely,
so you can copy paste the code in a HTML editor.
You can also place the gCalender field in a -develop- form as text_area field, and see the HTML code right there.
***/
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
//put names of months in an array. You can also use i18n names for internationalization!
var months = new Array('january',
'february',
'march',
'april',
'may',
'june',
'july',
'august',
'september',
'october',
'november',
'december');
var this_month = new Date(year, month, 1);
var next_month = new Date(year, month + 1, 1);
//Find out when this month starts and ends.
var first_week_day = this_month.getDay();
var days_in_this_month = plugins.it2be_tools.getMaxDay(month, year);
//start creating the HTML
globals.gCalender = '<html>\n' +
//setup CSS
'<style type="text/css"><!--\n' +
// here we say that all active links don't have that UGLY blue line
'a { color: black; text-decoration: none }\n'+
// bodyfont
' body { font-size: 10px; font-family: sans-serif; }\n' +
//month and year header
' .header { font-size: 12px; font-weight: bold; }\n' +
'--></style>\n' +
'<body>\n' +
//setup main HTML table
'<table border="0" cellspacing="1" cellpadding="0">\n' +
'<tr><td bgcolor="ffffff">\n' +
'<table style="background-color:666699; color:ffffff;">\n';
globals.gCalender += '<tr><td colspan="7" align="center" style="background-color:bfc7db; color:000000;">\n' +
'<span class="header">' +
months[month] + ' ' + year + '</span></td></tr>\n';
globals.gCalender += '<tr>\n';
//Fill the first week of the month with the appropriate number of blanks.
for(var week_day = 0; week_day < first_week_day; week_day++)
{
globals.gCalender += '<td style="background-color:bfc7db; color:000000;">\n' +
'<font size="1" face="Verdana"> </td>';
}
week_day = first_week_day;
for(var day_counter = 1; day_counter <= days_in_this_month; day_counter++)
{
week_day %= 7;
if(week_day == 0)
globals.gCalender += '</tr><tr>\n';
//Do something different for the current day.
if(day == day_counter)
globals.gCalender += '<td align="center" valign="middle" style="background-color:083767"><b>' + day_counter + '</b></td>\n';
else
globals.gCalender += '<td align="center" valign="middle" style="background-color:bfc7db; color:000000;">' + day_counter + '</td>\n';
week_day++;
}
//finish the HTML
globals.gCalender += '</tr>\n</table>\n</td></tr>\n</table>\n</body>\n</html>';
Cheers and hopefully see you at SW2006 Boston,
Karel
| Posted by David Workman on March 29, 2006 at 11:58 AM in Tips | Permalink
