Page Comparison

...

1. Specify the holidays in the form's listener JS file. For example, the following code snippet adds three holidays to the data component:

   Code Block
   language js
   canvas.form.HOLIDAYS = Class(canvas.Observable, { constructor: function (config) { this.fm = config.fm; }, registerHandlers: function () { this.fm.registerHandler(CFEC.POST_FORM_RENDERER, function(fm) { var bankholidays = [{ "dates": // The date should be in 'DD/MM/YYYY' format. [{ date : "15/08/2019", text : "Independence Day" // Mouse-over text }, { date : "06/09/2019", text : "Founders' Day" // Mouse-over text }, { date : "27/10/2019", text : "Diwali" // Mouse-over text }], "cssClass" : '<CSS_CLASS_NAME>holidaycolor' //Name 'holidaycolor' is the name of the CSS class, e.g. holidaycolor }]; fm.setHolidayDates(bankholidays,"<ITEM_ID_OF_DATE_FIELD>");"BANK_CALENDAR"); // "BANK_CALENDAR" is item ID of the Date field. }); } }); CFLR.registerListener("HOLIDAY", canvas.form.HOLIDAYS); // "HOLIDAY" is the form ID.

   
   

2. Create the CSS class for highlighting the holidays in the date tool. For example:

   Code Block
   language css
   .holidaycolor { background-color: blue; }