[TIP] Add a HTML calendar to your form!

Classic Servoy
1

Adding a HTML calendar to your form (or controller) difficult? No way!
It’s possible with just 1 global method! No kidding? No kidding!
Here we go:

var date = new Date();
         {
         //If no parameter is passed use the current date.
         if(date == null)
            date = new Date();
        
         day = date.getDate();
         month = date.getMonth();
         year = date.getFullYear();        
         months = new Array('january',
                            'february',
                            'march',
                            'april',
                            'may',
                            'june',
                            'july',
                            'august',
                            'september',
                            'october',
                            'november',
                            'december');
        
         this_month = new Date(year, month, 1);
         next_month = new Date(year, month + 1, 1);
        
         //Find out when this month starts and ends.        
         first_week_day = this_month.getDay();
         days_in_this_month = Math.floor((next_month.getTime() - this_month.getTime()) / (1000 * 60 * 60 * 24));
        
         calendar_html = '<html>' +
'<style type="text/css"></style>' +
                        '<body>' +
                        '<table border="0" cellspacing="1" cellpadding="0">' +
                        '<tr>' +
                        '<td bgcolor="ffffff">' +
                            '<table style="background-color:666699; color:ffffff;">';
        
         calendar_html += '<tr><td colspan="7" align="center" style="background-color:bfc7db; color:000000;">' +
                        '<font size="3" color="083767" face="Verdana"> <b>' +
                          months[month] + ' ' + year + '</b></td></tr>';
        
         calendar_html += '<tr>';
         
         //Fill the first week of the month with the appropriate number of blanks.      
         for(week_day = 0; week_day < first_week_day; week_day++)
            {
            calendar_html += '<td style="background-color:bfc7db; color:000000;">' +
            '<font size="1" face="Verdana"> </td>';  
            }
           
         week_day = first_week_day;
         for(day_counter = 1; day_counter <= days_in_this_month; day_counter++)
            {
            week_day %= 7;
           
            if(week_day == 0)
               calendar_html += '</tr><tr>';
           
            //Do something different for the current day.
            if(day == day_counter)  
               calendar_html += '<td align="center" valign="middle" style="background-color:083767"><b>' + day_counter + '</b></td>';
            else
               calendar_html += '<td align="center" valign="middle" style="background-color:bfc7db; color:000000;"> ' +
                                day_counter + ' </td>';
           
            week_day++;
            }
           
         calendar_html += '</tr>';
         calendar_html += '</table></td></tr></table></body></html>';
        
         //Display the calendar.    
globals.gCalender = calendar_html;                 
         }

Ofcourse you can use i18n to internationalize monthnames and change the colours by using the colour editor in the Method Editor!

See? Life’s sometimes easier that it looks like! :wink:

2

GOOD work and nice tip. Thanks Karel.

BTW you can check the last date of a month with the tools plugin:

days_in_this_month = plugins.it2be_tools.getMaxDay(month, year);

Cheers