How to Style Your Own jQuery UI Calendar
For the most part I like jQuery UI. The library gives you some common elements of interactivity that you find in modern browsers these days (accordions, drag-n-drop, pop-up-calendars, etc.). That being said, I’m not really a big fan of jQuery UI’s theming that comes out of their theme roller… not so much because it don’t look good, but because if you ever want to do any customization on it, it actually turns out to be a rather cumbersome affair. There are quite a few cascading selectors that you have to change values for to get the exact look and feel you want.
Fortunately there is a way to get the best of both worlds and it’s something I’ve found myself doing a lot more of recently… including jQuery UI in my projects but doing all the styling from scratch. It turns out that there’s not a lot off CSS that you have to write if you’re doing things from the ground up and I’ve found that this is often a much more pleasant experience than trying to undo the CSS that comes with a jQuery UI theme.
In this tutorial we will be doing some custom CSS with the jQuery UI datepicker (which is a calendar popup that appears when you want to select a date on a form), but you could easily apply the same ideas in this tutorial to other jQuery UI components as well.
CSS, jQuery, jQuery UI, web development
