Hello bsakkers,
Here is how to achieve this functionality:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = ""; $("#jqxWidget").jqxCalendar({ width: 220, height: 220, theme: theme, readOnly: true, rowHeaderWidth: 25, showWeekNumbers: true }); var weekNumbers = $("#jqxWidget .jqx-calendar-row-header tr div"); weekNumbers.mouseenter(function () { weekNumbers.css("cursor", "pointer"); }); weekNumbers.mouseleave(function () { weekNumbers.css("cursor", "default"); }); weekNumbers.click(function (event) { var weekNumber = $(event.target).text(); alert("Clicked week number " + weekNumber + " ."); }); }); </script> <div id='jqxWidget'> </div> </div></body></html>
Best Regards,
Dimitar
jQWidgets team
http://www.jqwidgets.com/
