Search code examples
javascriptpikaday

How to change the CSS of some days in Pikaday?

I want to change the color of some day's objects in Pikaday, without any disabling. or specify them by a badge.

Solution

  • Override the specific colors by declaring it in a style-sheet, after loading pikaday. E.g.

    .is-today .pika-button {
   color: mediumpurple !important; /* default is #33aaff */
}

    You can play around with the styling by opening Chrome's dev tools and remove the is-hidden

    <div class="pika-single is-bound left-aligned bottom-aligned is-hidden">

    You could also use JavaScript to apply some styling to a specific day, e.g. the 11th.

    document.querySelector('button[data-pika-day="11"]').style.background = 'green';

    And if you want to use a JS approach to apply styling to a specific day of the week, e.g. Monday, given your calendar week statrs with Monday and not Sunday:

    document.querySelectorAll('tr[class="pika-row"]').forEach(tr => { if(!tr.children[0].classList.contains('is-empty')) {
   tr.children[0].firstElementChild.style.background = 'green';
} })

    Chrome dev