I've searched the forum and tech site to look for any case where someone had a need to populate calendar control with a specific list of dates using a focexec but almost all of them were about a dynamic range. Is it possible to control the dates in the calendar widget to show only ones from the fex and make the other dates disabled? We could use a dropdown list for dates but my customer insists to use the calendar widget with their own preset dates. Any thoughts or ideas please share.

Thanks in advance.

This message has been edited. Last edited by: <Emily McAllister>,

Your request is an interesting one. After poking around in the Firefox browser's Console mode, I've found what happens when a calender appears on screen...

HTML code is injected into the browser to build and populate the calendar control. The code looks something like this:

<div id="ui-datepicker-div" ...>
  <tr>
    <td data-year="2016" data-month="0" ...>
      <a class="ui-state-default" ...>
        26
      </a>

The calendar is an HTML DIV element, tr's are the rows of days in the calendar, td's are the individual days with year and month attributes, and a's are hyperlinks that activate when the user clicks the day. The day number itself is within the "a" tag.

So, to do what you want, you would need to retrieve the dates you want to enable from a WebFOCUS FEX file (In XML format to the web browser as destination for FEX file output), then use JQuery to inspect the td elements for year and month, then inspect "a" for the actual day. Using that information you can then know what day you are looking at in the calendar and compare it to your list of dates.

If the day/date does not match, you need to disable that day/date. This is how I thought I could disable all days using JQuery:

$("#ui-datepicker-div tr td a.ui-state-default").each(function(index) { $(this).switchClass("ui-state-default","ui-state-disabled") });

The JQuery code changes the "a" elements so their class is "ui-state-disabled", which grays out the calendar days. But I was still able to select a day even though it was grayed out. Attempts to make "a" not clickable did not work for me.

That's the best I've got for you so far... I hope it helps.

This message has been edited. Last edited by: Squatch,

There is a much simpler way if you use the JQuery date picker.

Look at this example from stack overflow

Block out dates using JQuery

Thanks guys,
I like Eric's link but is it possible to use in AppStudio by choosing it as WF calendar control?

Please help!

Yes, if you want to use an alternative approach you can do that. I was investigating it from the default WebFOCUS point of view.

You should have JQuery/JQuery UI enabled in your version of WebFOCUS already, you just need to call on it.

As a test, create a new HTML document, and then create a Panel component called "panel1". Then make sure this is in your "Embedded JavaScript/CSS tab:

//Begin function window_onload
function window_onload() {


UpdateData();

// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
  $( "#panel1" ).datepicker();
}
//End function window_onload

You should see a JQuery calendar control.

vaayu,

I've never seen that in the WebFOCUS Calendar control. But since JQuery is bundled as part of 8105, you don't need to add any calls to bring it in, just the JQuery code. Just as simple and a lot more customizable.

You will have to create a fex, that will return the dates to load in the date picker though. You can do that using JQuery also.