Reusable JavaScript Function to Highlight Holidays on APEX Date Picker Item

Date pickers are an essential part of web applications, especially when users need to select dates for bookings, reports, or scheduling tasks. However, in many business scenarios, certain dates like holidays, weekends, or special events need to be visually distinguished to prevent users from selecting them by mistake.

In this blog, we will create a reusable JavaScript function that highlights holiday dates in an Oracle APEX date picker. This approach allows developers to call the function anywhere in their application, ensuring consistency and reducing redundant code. By the end, you’ll have a flexible solution to visually mark holidays on any date picker item in your APEX applications.

Step 1: Create a Static Content region and set it to Blank with Content under the region attributes.

Step 2: Inside that region, enclose a <script> tag and paste the following JavaScript function.

function applyHolidayFormatterToDateItems(itemNames) {

  const holidayList = [

    "2025-01-01",

    "2025-01-26",

    "2025-08-15",

    "2025-10-02"

  ];

  itemNames.forEach(function(itemName) {

    const dateItem = apex.item(itemName);

    if (!dateItem) {

      console.warn("Item " + itemName + " not found");

      return;

    }

    dateItem.dayFormatter = function(pIsoDate) {

      const isHoliday = holidayList.includes(pIsoDate);

      return {

        disabled: false,

        class: isHoliday ? "apx-holiday" : null,

        tooltip: isHoliday ? "Holiday" : null

      };

    };

    dateItem.refresh();

  });

}

Step 3: Similarly, enclose a <style> tag and paste the following CSS code.

<style>

    .apx-holiday {

  background-color: #ffe0e0 !important;

  color: #d8000c !important;

  font-weight: 600 !important;

  border-radius: 50%;

}

</style>

Step 4: Call this function wherever you need to highlight holidays.

applyHolidayFormatterToDateItems(["P7_DATE","HIRE"]);

Demo_Applicaiton