Fixed #4669 - Calendar: Week Number customization

components/lib/calendar/Calendar.d.ts

@@ -182,6 +182,10 @@ export interface CalendarPassThroughOptions {
      * Used to pass attributes to the week header's DOM element.
      */
     weekHeader?: CalendarPassThroughOptionType;
+    /**
+     * Used to pass attributes to the week header label's DOM element.
+     */
+    weekHeaderLabel?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the table header cell's DOM element.
      */
@@ -756,6 +760,20 @@ export interface CalendarSlots {
          */
         years: string[] | undefined;
     }): VNode[];
+    /**
+     * Custom week header label template.
+     */
+    weekheaderlabel(): VNode[];
+    /**
+     * Custom week label template.
+     * @param {Object} scope - weeklabel slot's params.
+     */
+    weeklabel(scope: {
+        /**
+         * Number of the week
+         */
+        weekNumber: number;
+    });
     /**
      * Custom dropdown icon template.
      * @param {Object} scope - dropdown icon slot's params.
@@ -806,30 +824,6 @@ export interface CalendarSlots {
          */
         class: any;
     }): VNode[];
-    /**
-     * Custom header for the showWeek
-     */
-    showWeekHeader(): VNode[];
-    /**
-     * Custom showWeek template
-     * @param {Object} scope - showWeek slot params
-     */
-    showWeek(scope: {
-        /**
-         * Date information corresponding to first day of week
-         */
-        date: {
-            day: number;
-            month: number;
-            year: number;
-            today: boolean;
-            selectable: boolean;
-        };
-        /**
-         * Internally calculated week number
-         */
-        weekNumber: number;
-    }): VNode[];
 }
 
 /**

components/lib/calendar/Calendar.vue

@@ -169,8 +169,8 @@
                                         <thead v-bind="ptm('tableHeader')">
                                             <tr v-bind="ptm('tableHeaderRow')">
                                                 <th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tableheadercell">
-                                                    <slot name="showWeekHeader">
+                                                    <slot name="weekheaderlabel">
-                                                        <span v-bind="ptm('weekLabel')" data-pc-group-section="tableheadercelllabel">
+                                                        <span v-bind="ptm('weekHeaderLabel', { context: { disabled: showWeek } })" data-pc-group-section="tableheadercelllabel">
                                                             {{ weekHeaderLabel }}
                                                         </span>
                                                     </slot>
@@ -184,7 +184,7 @@
                                             <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
                                                 <td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')" data-pc-group-section="tablebodycell">
                                                     <span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tablebodycelllabel">
-                                                        <slot name="showWeek" :date="week[i]" :weekNumber="month.weekNumbers[i]">
+                                                        <slot name="weeklabel" :weekNumber="month.weekNumbers[i]">
                                                             <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
                                                             {{ month.weekNumbers[i] }}
                                                         </slot>