Highlight Specific Dates in Angular UI DatePicker

Question

I am using the angular-ui datepicker directive and need to render some of the dates with colored text. I have found examples of this for the bootstrap datepicker using the beforeShowDay event but can find nothing for the angular-ui datepicker. I am fairly new to angular and angular-ui and would appreciate any suggestions.

Answer 1

If you're still onto this, I'm onto that problem as well now and here's an outline of a possible solution I thought of:

1. Get the current year and month using a handler for ng-change event
2. Format the year and month so that it is at 12 AM at the start of the month
3. Select the days for that month with events from the database (for MySQL something like: SELECT DAYOFMONTH(eventDate) FROM eventTable WHERE eventDate >= date AND eventDate <= date + INTERVAL 1 MONTH
4. Pass this array to a javascript function and create an inverse array such that day[x] is true when x belongs to a number (the date) returned from step 3, and day[y] is false when y is a number not in the array.
5. Pass the array from step 4 to the datepicker directive (assume stored as eventfulDays)
6. Use ng-class="{'highlight':eventfulDays[x]==true}" to highlight it.

Haven't tried it but will probably be implementing it soon!