Databases
StackOverflow2013
Postsdbo
PO<p:calendar>'s button icon disappeared after applying custom css
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO<p:calendar>'s button icon disappeared after applying custom css
    text
    copied!<p>In my application I am using <code>&lt;p:calendar showOn="button".......&gt;</code> and I apply custom css on this calendar with the help of this link: <a href="http://bluefoot.info/howtos/primefaces-calendar-highlight-dates" rel="nofollow noreferrer">Bluefoot-CustomCss-Primefaces-Calendar</a>. After applying this custom css, all is working fine, except the calendar icon turned into <code>...</code>. But I want to show that <code>calendar</code> icon. How is it possible ? I have attached the picture for better understanding my problem . </p> <p>One more thing for my case html DOM tree looks like <code>&lt;button class="ui-datepicker-trigger" type="button"&gt;...&lt;/button&gt;</code> where by default this should be </p> <pre><code>&lt;button class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="button" role="button" aria-disabled="false"&gt; &lt;span class="ui-icon ui-icon-calendar"&gt;&lt;/span&gt; &lt;span class="ui-button-text"&gt;ui-button&lt;/span&gt; &lt;/button&gt; </code></pre> <p>I don't know how to solve this. Any suggestion is greatly appreciated. Thanks, !<img src="https://i.stack.imgur.com/e7Fsc.png" alt="enter image description here"> .</p> <p>EDIT:1 I am calling this js method before each date show:</p> <pre><code>function applyCustomCssOnCalendar(isAccessable, isAdmin, publicHolidaysAsString, paidLeavesAsString, rttLeavesAsString, specialLeavesAsString, pendingLeavesAsString, pendingLabel, paidLeave) { $(".hasDatepicker").datepicker("option", "beforeShowDay", function(date) { return highlightCalendar(isAccessable, isAdmin, publicHolidaysAsString, paidLeavesAsString, rttLeavesAsString, specialLeavesAsString, pendingLeavesAsString, pendingLabel, paidLeave, date); }) }; </code></pre> <p>applyCustomCssOnCalendar(isAccessable, isAdmin, publicHolidaysAsString, paidLeavesAsString, rttLeavesAsString, specialLeavesAsString, pendingLeavesAsString, pendingLabel, paidLeave) method is defined as :</p> <pre><code>function highlightCalendar(isAccessable, isAdmin, publicHolidaysAsString, paidLeavesAsString, rttLeavesAsString, specialLeavesAsString, pendingLeavesAsString, pendingLabel, paidLeave, datee) { var date = new Date(datee); date.setHours(0, 0, 0, 0); var d = date.getDate(); var m = date.getMonth() + 1; var y = date.getFullYear(); var day = date.getDay(); var currentDate = new Date(); currentDate.setHours(0, 0, 0, 0); console.log(publicHolidaysAsString); if (day == 6 || day == 0) { return [true,'ui-datepicker-unselectable','']; } for ( var i = 0; i &lt; publicHolidaysAsString.length; i = i + 2) { if ((y + '-' + m + '-' + d) == publicHolidaysAsString[i]) { return [true,'highlight-calendar-publicHoliday ui-datepicker-unselectable',publicHolidaysAsString[i + 1]]; } } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload