Time for action – using Calendar's advanced customization options

Let us see how we can customize the Calendar component to disable Saturday and Sunday dates and apply a custom style.

1. Create the JavaScript function disableSatSundays() using the following code:

   function disableSatSunDays(date) 
   {
     var day = date.getDay();
     return [(day != 0 && day != 6), 'myCalendar'];
   }
   Create a new custom style myCalendar.
   <style type="text/css">
     .myCalendar
     {
       font-size: 15px;
       background-color: #D3D3D3;
     }
   </style>

2. Create a Calendar component and configure the beforeShowDay attribute to invoke the disableSatSundays() callback function:

   <p:calendar value="#{userController.registeredUser.dob}" beforeShowDay="disableSatSunDays"/>

What just happened?

We have customized the Calendar to disable all Saturday and Sunday dates using the beforeShowDay attribute and applying the myCalendar CSS style. Even though we restricted selecting Saturdays and Sundays, it is always advisable...