Wijmo UI for the Web
Show Week Numbers
Wijmo User Guide > Widgets > Calendar > Calendar How To > Show Week Numbers

Building on the Quick Start example, you can enable the showWeekNumbers option so that week numbers appear along the left edge of the calendar, one for each week of the year. In the calendar year there are a total of 52 weeks, so the week numbers range from 1 to 52. Enable the week number selector in the selectionMode option to select week numbers in the calendar at run time. By default, only the day selector is enabled for the selectionMode option.

  1. In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets the showWeekNumbers and selectionMode options.

    Drop down and copy code

    Week Numbers Script
    Copy Code
    <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#calendar1").wijcalendar({
            showWeekNumbers: true,
            selectionMode: {weekNumber: true}
        });
    });
    </script>
    
  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the calendar.
  3. Save your HTML file and open it in a browser. Move your cursor over a week number to select a specific week.
See Also

Reference

Widgets