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

  • 3
  • Question
  • Updated 3 years ago
  • Answered
Who can remember what day it is? Would like to highlight the current day in a month view on calendar component. Any ideas?
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb

Posted 3 years ago

  • 3
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
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?
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
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>
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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....)

 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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.
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
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 :)
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
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.
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Looks like you snuck it in! Thanks so much!
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
oh yeah, I forgot that I did that :). Glad it's working for you.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
So exciting! Someone just asked me about this yesterday.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
For posterity's sake, this class is  ui-datepicker-today  and you can modify it, for example with this css:

.ui-datepicker-today {
background:orange
}