Year calendar with clickable days

Year calendar with clickable days


I'm trying to build an application that enables a company's employees to set their vacations for the entire year.
For this purpose I tried to build a web screen with a calendar that shows the entire year (see attachment).

I want to be able to click on a day and mark/unmark it, as a vacation day.

I'm having difficulty determining the most efficient way to do this on the platform. I tried a client side table, a tableRecord, a listRecord, but they all have their desadvantages and imply a lot of copy pasting of widgets, making a very inefficient page and code.

Does somebody have any idea on the best way to do this??

thanks in advance


You may find the Yearly Calendar Widget that is published on the Extranet suitable to your purposes. It displays a full year calendar and allows a date to be selected by clicking on the corresponding day.

The default behaviour is to set the value of an input box with the selected date, but you may configure it to call your own javascript function.

Url to the Yearly Calendar:

I have attached a screenshot of the sample.

Best regards,


We're using this widget with a nextfunc pointing to a valid javascript function. When we click on a day, a javascript error occurs stating that the function is not defined. However, the function is in fact executed. We are at a loss here, has anyone experienced this behaviour before? Any ideas on it?

Best regards

I'm using this widget, however everytime i show the calendar the months are not aligned, this happens because march has 5 weeks and april has only 4 weeks.

Any idea?

Best regards
Hi Hugo - and welcome to the OutSystem forums.

I'm wondering if you could post at least one of these - or both: a screenshot of the problem (March, and then april, apparently), and/or a small eSpace that replicates the undesired behavior.

That way it might be easier for us to track down the bug from scratch, since there hasn't been much activity in this widget's forum lately :)


Paulo Tavares
Hi Hugo,

the months are not aligned in fact. I'm using the yearly calendar too and i've already changed that.
The yearly calendar is drawn using javascript and you have to change the script.

In each line of the table that draws the header of the month you must set another attribute: valign="top".

And that's all, all months will be correctly aligned!

Try it... Let me know if it works.


Pedro Gonçalves

Can't you do it using CSS only?

.ContainingClass td{


Hi Pedro,

I changed this js line and added vertical-align:'top' like this,

this.wwrite("<TABLE WIDTH='100%' BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD BGCOLOR='#e0e0e0' align='center' vertical-align='top'><FONT SIZE='"+fontsize+"' FACE='" + fontface + "'><B>");
this.wwrite(this.gMonthName + " / " + this.gYear);

however it didn't work.


best regards


Hi Hugo,

André Ramos is correct and we can assign a class to the correct place and use CSS. But i solved the problem this way: (this is my code)

Find for: // Get the complete calendar code for each month..

and you'll find the code:

var j;

this.wwrite("<TABLE BORDER='0' CELLSPACING='2' CELLPADDING='0'>");

for (i=0; i<=11; i++) {

if ((i%4) == 0) this.wwrite("<TR>");

this.wwrite("<TD VALIGN='TOP'>");

You just need to add VALIGN='TOP' like that in bold and it should work!

Best Regards,


Hi João,

in fact i'm experiencing that behaviour! The page shows an error when function is executed. 
I've got no idea how to solve this. Did you find a way to solve it?

Thanks in advance,

Pedro Gonçalves
Hi João (another time!!),

i solved the problem... After send the previous post i've opened YearlyCalendar widget's Javascript and checked what could be causing the problem!
The problem is that the widget builds the javascript appending "()" to the function name you give him.

Like this: if you say that Web Block Widget Property NextFunc is "Change()" the javascript say that the function to be called is"Change()()" and this is causing the error in page.

So you must say that function is "Change" and javascript will say that the function is "Change()" and this way there will be no longer the error in page.

Try it and let me know if it works...

(You may ask how can we call functions with parameters without the error!!! At this moment i've got no idea!!!)

Best Regards,

Pedro Gonçalves
Hi Pedro,

Thanks for the tip, it worked.

best regards,
Hi there. I´m using service studio, in other words, the latest version, and i´m building a vacancie management application. I tried to use this widget but unfortunatly it´s not compatible whith this version, only 4.2. Is there a way to make it work ?

Thank you.
Hi Mauro, and welcome to the forums.

I'm not really sure about the problem you're facing.

What do you mean with "it's not compatible with this version, only 4.2"? That does not make much sense at first sight - exactly what problem are you running into, what are you facing?

Furthermore, where did you get the widget from? You should try the calendar widget in our current Style Guide or Enterprise Manager, and see if that one works best for your purpose.

Let us know how that goes, so that we can help you.


Paulo Tavares

Do you know about the Absences manager:
That might save you some work.
You would need to convert the OML to version 5 though.