How to remove hour labels from Calendar component?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Feel a little guilty posting this here - as I know it is just a simple CSS question... but I'd like to remove the hour labels from the left side of my week view calendar. 

We aren't using the calendar to show actual times things are happening - just to show that things are happening for some portion of the day. 

What do I need to do with the CSS to just remove the hour labels? 

Thank you Skuiders!
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
  • happy!

Posted 4 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Kaede.  Here are two CSS statements you can add to your page: 

/* hide the hour label */
td.nx-cal-week-hour-label {
display: none;
}
/* set the row to 0 pixels wide */
th.nx-cal-week-corner {
width: 0;
}
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
Thanks, Rob!!
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
Things get kind of funky when I do that. I can't put events in the Friday slot and the drag and drop gets generally confused. 
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
what about just changing the text to white so it doesn't show up?
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
I did it!! yesss!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Good for you... 
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
:)

What about removing the hour picker dropdown?

Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I think you should be able to find those divs and overwrite thier css with "Display:none;"   But as we saw before,  that isn't always reliable...