Geek asks and answers

How to add background color to selected schedule date

How to add background color to selected date in schedule tag in interfaces?

I already used the style, but it will be for the background color of the schedule. I want to get Background -color for my selected date in the schedule. So if the guys have ideas, share it.

+3
source share
1 answer

The style class you are looking for

ui-state-highlight

The interface documentation explains how to change the style for a particular component:

In your face:

<p:schedule styleClass="custom">
...
</p:schedule>

And in your css:

.custom .ui-state-highlight {
    background: yellow !important;
}

UPDATE 1:

Here is a complete working example:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"     
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
        <style type="text/css">
            .custom .ui-state-highlight {
                background: yellow !important;
            }
        </style>
    </h:head>
    <h:body>
        <p:schedule styleClass="custom">
        </p:schedule>
    </h:body>
</html>

UPDATE 2:

Well, basically, the day of the board schedule is a tabular cell like this:

<td class="fc-fri ui-widget-content fc-day19">
  <div>
    <div class="fc-day-number">18</div>
    <div class="fc-day-content">
      <div style="position:relative">&nbsp;</div>
    </div>
  </div>
</td>

, 18 fc-day19.

jQuery :

$(".fc-day19").css("backgroundColor","green");

, . ( , css background-color backgroundColor, jQuery. , .

+3

More articles:


All Articles