When looking at the jQueryUI DatePicker component recently, we thought that sometimes we need to highlight certain dates, not just the current date and the selected date, but we need to set some dates to highlight when the calendar component is initialized to indicate that these dates are different from other dates. For example, you can say that these dates have meeting or task. This requirement can be achieved by using the component's Beforeshowday (date) function, which can be used to perform custom functions when the DatePicker component is initialized, calling this function once every day, so that the desired requirements are met.
Let's see how to achieve
First download the jquery-ui-1.11.1 package and unzip it.
Then create a calenar.html file in the jquery-ui-1.11.1 directory to test.
The contents of calenar.html are as follows:
<!doctype html>
Where the Beforeshowday function defines three dates that need to be highlighted, and when the initialization date equals one of the dates, set the date to be highlighted, otherwise the default value is returned.