feat: calendar week number slots
parent
19f52ab2f8
commit
3cccacc236
|
@ -801,6 +801,30 @@ export interface CalendarSlots {
|
||||||
*/
|
*/
|
||||||
class: any;
|
class: any;
|
||||||
}): VNode[];
|
}): 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[];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -169,7 +169,11 @@
|
||||||
<thead v-bind="ptm('tableHeader')">
|
<thead v-bind="ptm('tableHeader')">
|
||||||
<tr v-bind="ptm('tableHeaderRow')">
|
<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">
|
<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">
|
||||||
<span v-bind="ptm('weekLabel')" data-pc-group-section="tableheadercelllabel">{{ weekHeaderLabel }}</span>
|
<slot name="showWeekHeader">
|
||||||
|
<span v-bind="ptm('weekLabel')" data-pc-group-section="tableheadercelllabel">
|
||||||
|
{{ weekHeaderLabel }}
|
||||||
|
</span>
|
||||||
|
</slot>
|
||||||
</th>
|
</th>
|
||||||
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell">
|
<th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell">
|
||||||
<span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel">{{ weekDay }}</span>
|
<span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel">{{ weekDay }}</span>
|
||||||
|
@ -180,8 +184,10 @@
|
||||||
<tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
|
<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">
|
<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">
|
<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]">
|
||||||
<span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
|
<span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
|
||||||
{{ month.weekNumbers[i] }}
|
{{ month.weekNumbers[i] }}
|
||||||
|
</slot>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
|
|
Loading…
Reference in New Issue