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...