Schedule prev/nextYear buttons have no Icons

[lms24]

Hello there,

I am using the Ultima theme for PF and I want to include a p:schedule in one of my sites. I need the prev/nextYear functionality and hence two buttons with which I can switch through the years. This should be possible by specifying the two buttons in the header templates. I have the following code:

Code: Select all

<p:schedule widgetVar="myschedule" 
            timeZone="GMT+2" 
            value="#{scheduleBean.scheduleModel}"
            timeFormat="H(:mm)"
            allDaySlot="false"
            rightHeaderTemplate="month,agendaWeek,agendaDay"
            leftHeaderTemplate="prev,next,today"
            enterHeaderTemplate="title,prevYear,nextYear"
            extender="initSchedule"
            style="max-width: 1600px">
                      
                <p:ajax event="dateSelect" 
                    listener="#{scheduleBean.onDateSelect}"/>    
</p:schedule>

The two buttons are visible and they work correctly, however, they have no Icons and hence are simply blank. I can't deliver my application with this, as my clients won't know what those buttons are supposed to do. I tried to set the icons manually in my extender JS method but this just gets ignored entirely. I can only get it to work if I also specify the

Code: Select all

this.cfg.themeSystem = 'bootstrap';

attribute. This however, removes the whole Ultima theme again which is not what I want either.

Can you provide me with solution to this problem? Thank you very much.

[lms24]

It has now been one week and I still haven't received an answer to my request. I really hope that you will provide me with an answer, especially when considering the fact that my company is a customer of the pro licence of Ultima.

Thank you.

[lms24]

Is anyone from PrimeTek actually still active on this forum? This is unacceptable.

[mert.sincan]

Hi,

Sorry for the delayed response. But, I couldn't replicate it. Could you please check it on our live demo? https://www.primefaces.org/ultima/

[lms24]

The live demo does not feature the prev/nextYear functionality. According to the PF7.0 documentation and to the fullCalendar documentation, two buttons to switch to the next/previous year (i.e. from December 2019 to Dec. 2018/Dec 2020) are supported. See my code example from my initial post. The problem is that these buttons do appear but without any text or icon. I could not yet find a way to display the icons, which is why I requested support on this issue far over a month(!!!) ago. I suspect that this has something to do with some ultima style classes or a bug in the PF schedule renderer. I hope you can provide me with a fix. Thank you.

[mert.sincan]

Fixed for next version. Please try the following css;

Code: Select all

body .fc .fc-prevYear-button .ui-icon, 
body .fc .fc-nextYear-button .ui-icon {
    margin-top: 3px;
}

.ui-icon-seek-next,
.ui-icon-seek-prev {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

.ui-icon-seek-next:before {
   content: "\e01f";
}
.ui-icon-seek-prev:before {
   content: "\e020";
}

Best Regards,