How to highlight dates in JQM-DateBox calendar using javascript code

Question

how to highlight cells in calendar with two different colors, i.e. some cells in RED and the others in GREEN .. using JavaScript

some code

javascr

Answer 1

As shown on this site: http://jquerymobile.com/demos/1.0rc4/docs/api/events.html there is an event called 'vmouseover' which stands a 'Normalized event for handling touch or mouseover events'.

That is what you need, a possibility to change something on an event, which is in fact the mouseover (formerly known as hover).

in Jquery 1.7 you could use

$("#yourElement").on("vmouseover", function(event){
    $(this).css('color', 'green')
    $(this).css('background-color', 'red')
});

Apply this for your different elements in the calender and it should work.

On(): http://api.jquery.com/on/

Css(): http://api.jquery.com/css/

and next time: provide some example code of what you already tried!!

zY

Answer 2

For highlighting cells in a calendar (eg. making some Red and others Green) I have found the calFormatter callback to be much more flexible than using highDates or highDatesAlt. Part of the reason it's better is because the callback works for all visible dates, even ones just outside the current month. It also can override the highlighting of the current or selected dates if you want.

Details about how to use the callback can be found here: https://jtsage.dev/DateBox/api/calFormatter/

Answer 3

Ok, for a 2 part question, a 2 part answer:

Part 1: yes, the link you found: jQuery mobile calendar with 3-state day colours works very nice, assuming one of the two sets of dates will never be selectable. If you need 2 sets of selectable dates, use the highDates and highDatesAlt options, you can see them here: http://jsfiddle.net/Qve5Z/1/

In order to make them RED/GREEN, you will need to make your own theme swatches, and include them in your site. Themes can be easily produced here: http://jquerymobile.com/themeroller/

Then, set the pickPageOHighButtonTheme and pickPageOAHighButtonTheme options accordingly.

Part 2: Your code sample is actually mostly correct, although maybe more than you really want to do. For this example, I am going to assume you simply want to set the "current picked" date of the calendar. This example will set the date to 2011-11-13. http://jsfiddle.net/Qve5Z/2/

Fwiw, I do believe your code sample would work, if instead of being wrapped in:

$(document).ready( function() {  } );

it was wrapped in:

$('html').live('pageinit', function() { });

Keep in mind that that sample does a bit more - namely, it limits the amount of days that actually can be picked - at a glance, from whatever date you preset, to whatever the current date is. If you want that behavior, let me know, I can work up an example that includes that too.