Is there a way for the Calendar in month view to highlight the current day?

Jack Sanford
Jack Sanford San Antonio, TX 💎💎
edited June 25, 2020 in Questions
Who can remember what day it is? Would like to highlight the current day in a month view on calendar component. Any ideas?


  • Pat Vachon
    Pat Vachon 💎💎💎
    edited June 25, 2020
    I like this idea.

    The td element has what is needed to make this on load. There is a property called data-date that has the date value. I'm sure javascript can be used to set the background.

    <td class="nx-cal-month" data-date="2015-07-01">

    I'm swamped right now. Can someone take this baton?
  • Jack Sanford
    Jack Sanford San Antonio, TX 💎💎
    edited January 12, 2018
    Awesome! The logic would be essentially IF data-date = date.Today(), set td class="nx-cal-month-TODAY"

    but I have no idea what the syntax would be for conditionally overriding the css on a single <td>
  • Rob Hatch
    Rob Hatch 🛠️ 
    edited September 1, 2016
    I think you could append a new class using jQuery rather than trying to replace the current one.  Or you could simply add a <style> element to the TD. 

    (But I"m not really a jQuery guy so....)

  • Matt Sones
    Matt Sones 💎💎💎
    edited February 10, 2017
    Yeah, it looks like the solution is in jQuery. 

    Getting the right <td> shouldn't be too hard, get all the children <td> of the calendar, and then loop through them until you find one where .attr("data-date") is today.

    Once your have the selector for the right <td>, .addClass('nx-cal-month-TODAY') sems like the way to go.
  • Jack Sanford
    Jack Sanford San Antonio, TX 💎💎
    edited January 12, 2018
    When I get the time to tinker and figure out the code to do this, I'll post it here, but if anyone beats me to it please post the code! Thanks :)
  • Ben Hubbard
    edited December 13, 2019
    We should put a class on that while the calendar is being generated. That way you won't need to do that stuff after the fact. I'll see if I can sneak this into the new release.
  • Jack Sanford
    Jack Sanford San Antonio, TX 💎💎
    edited May 25, 2016
    Looks like you snuck it in! Thanks so much!
  • Ben Hubbard
    edited August 28, 2015
    oh yeah, I forgot that I did that :). Glad it's working for you.
  • Anna Wiersema
    Anna Wiersema 🛠️ 
    edited November 23, 2015
    So exciting! Someone just asked me about this yesterday.
  • Anna Wiersema
    Anna Wiersema 🛠️ 
    edited December 13, 2019
    For posterity's sake, this class is  ui-datepicker-today  and you can modify it, for example with this css:
    .ui-datepicker-today {
  • Germany3
    Germany3 🛠️ 

    Hey @Jack Sanford !

    Skuid has implemented the calendar component in the Chicago release which is now available on the Skuid Releases page. Best practices for upgrading can be found in Upgrading Skuid on Salesforce.  As a reminder, Salesforce does NOT allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission-critical functionality before installing into a production environment.

    We also recommend that you update out-of-date themes and design systems after you upgrade. Please let us know if you continue to encounter any problems with this issue after upgrading.


Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!