ICEfaces
  1. ICEfaces
  2. ICE-11482

Calendar Year: With ice:selectInputDate, we want to highlight cell of day in the calendar displayed.

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Invalid
    • Affects Version/s: EE-3.3.0.GA_P07
    • Fix Version/s: EE-3.3.0.GA_P08
    • Component/s: None
    • Labels:
      None
    • Environment:
      Unknown.
    • Support Case References:
      00014572

      Description

      With ice:selectInputDate, we want to highlight cell of day in the calendar displayed.

      valueChangeListener="#{historics.dateChangeListener}"
      value="#{historics.schedule.dateSelected}" renderAsPopup="false"
      required="false" highlightClass="calendarAffectation: calendarService"
      highlightUnit="DAY_OF_YEAR: DAY_OF_YEAR"
      highlightValue="#{historics.schedule.affectionsAsStringInterval}: #{historics.schedule.servicesAsStringInterval}"
      styleClass="schedule">

      The pb is that he does not take in account the year, it only use the day position of the YEAR (DAY_OF_YEAR). No Unit are allowed to takein account year.
      So if we change the year in the calendar the cell are not updated cause there is not event associate to year change too.

      How to update cell according to year change in calendar ?

        Activity

        Hide
        Arturo Zambrano added a comment - - edited

        The way I understand the problem is that they want to highlight a specific date (year, month, day) and not a specific day in a month in all years. Currently, using the DAY_OF_YEAR highlight unit will highlight all such days in all years displayed, as the user navigates from year to year. While there's no special highlight unit to specify a year-month-day combination, there's an easy way to accomplish this. By the way, the DATE highlight unit is actually just the same as DAY_OF_MONTH.

        In order to accomplish this, it's enough to specify a DAY_OF_YEAR highlight unit and also a YEAR highlight unit, as well as properly defining the CSS rules used for highlighting.

        Here's a specific example that will highlight two specific days only in the year 2020 and not in previous or future years.

        First, we declare the two days of the calendar in the same way the customer has been doing, and we also add the YEAR highlight unit, specifying '2020' as the value and applying the 'selectedYear' CSS class, like this:

        <ice:selectInputDate value="#{calendarHighlight.date}" renderAsPopup="false"
            highlightClass="highlightOne : highlightTwo : selectedYear"
            highlightUnit="DAY_OF_YEAR : DAY_OF_YEAR : YEAR"
            highlightValue="50 : 100 : 2020">
            <f:convertDateTime pattern="#{calendarHighlight.pattern}"/>
        </ice:selectInputDate>
        

        Then, we simply define the CSS rules by combining both the 'selectedYear' class and the highlight classes, as follows:

        .selectedYear.highlightOne {
        background-color: red;
        }
        
        .selectedYear.highlightTwo {
        background-color: blue;
        }
        

        When the YEAR highlight unit is specified, the corresponding highlight class is applied to all days of that year. So, by specifying CSS rules that apply to elements that have this 'selectedYear' class AND one of the other highlight classes, we make sure that only specific days of a specific year are highlighted and nothing else.

        Show
        Arturo Zambrano added a comment - - edited The way I understand the problem is that they want to highlight a specific date (year, month, day) and not a specific day in a month in all years. Currently, using the DAY_OF_YEAR highlight unit will highlight all such days in all years displayed, as the user navigates from year to year. While there's no special highlight unit to specify a year-month-day combination, there's an easy way to accomplish this. By the way, the DATE highlight unit is actually just the same as DAY_OF_MONTH. In order to accomplish this, it's enough to specify a DAY_OF_YEAR highlight unit and also a YEAR highlight unit, as well as properly defining the CSS rules used for highlighting. Here's a specific example that will highlight two specific days only in the year 2020 and not in previous or future years. First, we declare the two days of the calendar in the same way the customer has been doing, and we also add the YEAR highlight unit, specifying '2020' as the value and applying the 'selectedYear' CSS class, like this: <ice:selectInputDate value= "#{calendarHighlight.date}" renderAsPopup= "false" highlightClass= "highlightOne : highlightTwo : selectedYear" highlightUnit= "DAY_OF_YEAR : DAY_OF_YEAR : YEAR" highlightValue= "50 : 100 : 2020" > <f:convertDateTime pattern= "#{calendarHighlight.pattern}" /> </ice:selectInputDate> Then, we simply define the CSS rules by combining both the 'selectedYear' class and the highlight classes, as follows: .selectedYear.highlightOne { background-color: red; } .selectedYear.highlightTwo { background-color: blue; } When the YEAR highlight unit is specified, the corresponding highlight class is applied to all days of that year. So, by specifying CSS rules that apply to elements that have this 'selectedYear' class AND one of the other highlight classes, we make sure that only specific days of a specific year are highlighted and nothing else.
        Hide
        Arturo Zambrano added a comment -

        Resolving as invalid, since there was already a way to highlight specific days, as explained above.

        Show
        Arturo Zambrano added a comment - Resolving as invalid, since there was already a way to highlight specific days, as explained above.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Sierra Mckinney
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: