The jQuery UI beforeShowDay is an option in Datepicker. By using this option we can call any function by using each day. This is executed before showing the calendar.
We don’t want some days to be selected by users (say all tickets for that day is sold-out) then we can apply this option and disable the days for selection by the user. The beforeShowDay runs a function by passing each day as a parameter. We will use the CDN link in code to add different libraries and styles. To display this function like any other jQuery UI widget, we have to link to jQuery and jQuery UI. Copy this code inside your HTML file to link our file to jquery and jquery UI through CDN(Content Delivery Network). Here we have used google’s CDN but you can also use jquery or Microsoft’s CDN
Blocking a particular day: We can choose to block a particular weekday in the calendar. Which will disable the weekday permanently and make it unavailable for selection for any week. Throughout the calendar. In the below example we have chosen to disable Sunday.
More complex filtrations: Now we will try to filter out all second Saturdays also along with all Sundays. We can do this by using the code below.
Identifying Second Saturdays Here is the logic behind identifying a second Saturday in any given month. Firstly, we identify the first day of the month and its weekday(Sunday is 0, Monday is 1 and so on..) 14-(The weekday number of the first day of the month) gives us the date of the 2nd Saturday of the month. Similar logic has been used in the below code.
Similarly, we can disable the 2nd and 4th Saturdays also. Here is the code to disable Sunday, 2nd Saturday and 4th Saturday.
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.fx.off Property
- jQuery | jQuery.support Property
- jQuery | jquery Property
- JQuery | Multiple ID selectors
- jQuery | :input Selector
- jQuery | prepend() with Examples
- jQuery | dblclick() with Examples
- jQuery | offset() with Examples
- How to find the parent class name with known class in jQuery ?
- jQuery | Introduction
- jQuery | :nth-of-type() Selector
- How to Design Color Picker using jQuery UI ?
- jQuery | children() with Examples
- jQuery UI | position() Method
- jQuery | Hide/Show, Toggle and Fading methods with Examples
- JQuery | parseHTML() method
- jQuery | focusin() with Examples
- jQuery | Animation, Slide methods with Examples
- jQuery | Selectors and Event Methods
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.