[CLOSED] Calendar with dates bolded

If your goal is to only have users to select only date where data exist I do suggest you to create a dropdown list with these dates in.
You can easily build a fex to extract dates where data exist and then use that date' list to feed a dropdown list.

WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007

Posts: 2409 | Location: Montreal Area, Qc, CA | Registered: September 25, 2013

Hallway

Master

posted

Hide Post

How about something like this?

  
-DEFAULTH &START_DATE='';
-DEFAULTH &DATE_ARRAY='';

TABLE FILE wf_retail
BY WF_RETAIL.WF_RETAIL_EMPLOYEE_MANAGER.START_DATE/MDYY
ON TABLE HOLD
END
-RUN
-READFILE HOLD

-SET &BEGIN_DATE = EDIT(&START_DATE, '99-99-9999');
-SET &CNTR_END = TRIM_(BOTH, ' ', &LINES.EVAL);

-SET &DATE_ARRAY = ''''|| &BEGIN_DATE||''',';

-REPEAT :GETARRAY FOR &CNTR FROM 2 TO &CNTR_END
-READFILE HOLD
-SET &DATE_ARRAY = &DATE_ARRAY || '''' || EDIT(&START_DATE, '99-99-9999')|| ''',';
-:GETARRAY

-HTMLFORM BEGIN NOEVAL
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
</head>

<body>
    <div class="div-dateInput" style="padding:10px;">
        <label for="dateInput"><strong>Select Date:</strong><br>
            <input type="text" id="dateInput" name="dateInput" style="width:90px; text-align:center;" />
        </label>
    </div>
    <script>
        $(document).ready(function () {
            initComponent();
        });

        availableDates = [ !IBI.AMP.DATE_ARRAY; ];

        function initComponent() {
            $("#dateInput").datepicker({
                showOn: 'button',
                buttonText: '<i id="myCalendar" class="far fa-calendar-alt"></i>',
                dateFormat: 'mm/dd/yy',
                minDate: new Date('!IBI.AMP.BEGIN_DATE;'),
                defaultDate: new Date('!IBI.AMP.BEGIN_DATE;'),
                beforeShowDay: function (d) {
                    var mdy = (d.getMonth() + 1);
                    if (d.getMonth() < 9)
                        mdy = "0" + mdy;
                    mdy += "-";

                    if (d.getDate() < 10) mdy += "0";
                    mdy += d.getDate() + "-" + d.getFullYear();

                    console.log(mdy + ' : ' + ($.inArray(mdy, availableDates)));

                    if ($.inArray(mdy, availableDates) != -1) {
                        return [true, "", "Available"];
                    } else {
                        return [false, "", "unAvailable"];
                    }
                }
            });
        }
    </script>
</body>

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