In one of our Oracle JET projects we had to come up with a new interesting feature for the JET date picker component. The customer requested to display an indicator for each day, which referred to the completion of the tasks on the specific date. For example, if all the tasks were completed, a green indicator will be shown; otherwise, a red one appears. A default inline Oracle JET calendar looks like the following example:

Oracle JET Calendar

But our customer was expecting something like this:

Oracle JET Calendar - With marker

By default, Oracle JET is not supporting this type of behavior, so we had to be “inventive”. With a bit of research, we identified that the date time picker is generating for each day a TD node with an ID that starts with “oj-dp-0-”. With a bit of JQuery magic, we came up with the following code, which depicts our solution for implementing the previously mentioned feature:

$.each( $('[id^="oj-dp-0-"]'), function () {
   var text = $(this).text();
   if( text != undefined && text.trim() != '' ) {
        if(parseInt(text) < 15) {
            $(this).html('<div style="width: 10px;height: 10px;background-color: red;float: left;position: absolute;border-radius: 10px;">&nbsp;</div>'+$(this).html());
       } else {
            $(this).html('<div style="width: 10px;height: 10px;background-color: green;float: left;position: absolute;border-radius: 10px;">&nbsp;</div>'+$(this).html());

Now, all that remains is to hook up a REST service that returns the status information for each day of the selected month.