Skip to content

Commit ab2e579

Browse files
hawkeye64hawkeye64
committed
(feat): new props column-header-before and column-header-after
1 parent 9475950 commit ab2e579

File tree

12 files changed

+277
-7
lines changed

12 files changed

+277
-7
lines changed

‎demo/src/components/ExampleCard.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export default {
2121
DayView3Day: () => import('./examples/dayview/Day3view'),
2222
WeekViewDefault: () => import('./examples/weekview/Default'),
2323
MonthViewDefault: () => import('./examples/monthview/Default'),
24+
DayViewColumnHeader: () => import('./examples/dayview/ColumnHeader'),
25+
WeekViewColumnHeader: () => import('./examples/weekview/ColumnHeader'),
2426
WeekViewFirstDayMonday: () => import('./examples/weekview/MondayFirstDay'),
2527
MonthViewFirstDayMonday: () => import('./examples/monthview/MondayFirstDay'),
2628
WeekViewFiveDayWorkWeek: () => import('./examples/weekview/FiveDayWorkWeek'),

‎demo/src/components/examples/dayview/ColumnHeader.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div>
3+
<q-expansion-item
4+
group="someGroup"
5+
caption="Code"
6+
>
7+
<q-card>
8+
<q-tabs
9+
v-model="tab"
10+
dense
11+
class="text-grey"
12+
active-color="primary"
13+
indicator-color="primary"
14+
align="left"
15+
narrow-indicator
16+
>
17+
<q-tab name="template" label="Template" />
18+
<q-tab name="script" label="Script" />
19+
</q-tabs>
20+
21+
<q-separator />
22+
23+
<q-tab-panels v-model="tab" animated>
24+
<q-tab-panel name="template">
25+
<q-markdown :src="template" />
26+
</q-tab-panel>
27+
28+
<q-tab-panel name="script">
29+
<q-markdown :src="script" />
30+
</q-tab-panel>
31+
32+
</q-tab-panels>
33+
</q-card>
34+
</q-expansion-item>
35+
<q-separator />
36+
<q-calendar
37+
v-model="selectedDate"
38+
:column-header-before="true"
39+
:column-header-after="true"
40+
view="day"
41+
locale="en-us"
42+
style="height: 400px;"
43+
>
44+
<template #columnHeaderBefore="days">
45+
<div class="q-ma-xs">
46+
columnHeaderBefore slot
47+
</div>
48+
</template>
49+
<template #columnHeaderAfter="days">
50+
<div class="q-ma-xs">
51+
columnHeaderAfter slot
52+
</div>
53+
</template>
54+
</q-calendar>
55+
</div>
56+
</template>
57+
58+
<script>
59+
import template from '../../../markdown/examples/template/dayview/column-header.md'
60+
import script from '../../../markdown/examples/script/dayview/column-header.md'
61+
62+
export default {
63+
data () {
64+
return {
65+
tab: 'template',
66+
selectedDate: '2019-04-01',
67+
template: template,
68+
script: script
69+
}
70+
}
71+
}
72+
</script>

‎demo/src/components/examples/weekview/ColumnHeader.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div>
3+
<q-expansion-item
4+
group="someGroup"
5+
caption="Code"
6+
>
7+
<q-card>
8+
<q-tabs
9+
v-model="tab"
10+
dense
11+
class="text-grey"
12+
active-color="primary"
13+
indicator-color="primary"
14+
align="left"
15+
narrow-indicator
16+
>
17+
<q-tab name="template" label="Template" />
18+
<q-tab name="script" label="Script" />
19+
</q-tabs>
20+
21+
<q-separator />
22+
23+
<q-tab-panels v-model="tab" animated>
24+
<q-tab-panel name="template">
25+
<q-markdown :src="template" />
26+
</q-tab-panel>
27+
28+
<q-tab-panel name="script">
29+
<q-markdown :src="script" />
30+
</q-tab-panel>
31+
32+
</q-tab-panels>
33+
</q-card>
34+
</q-expansion-item>
35+
<q-separator />
36+
<q-calendar
37+
v-model="selectedDate"
38+
:column-header-before="true"
39+
:column-header-after="true"
40+
view="week"
41+
locale="en-us"
42+
style="height: 400px;"
43+
>
44+
<template #columnHeaderBefore="days">
45+
<div class="q-ma-xs">
46+
Before
47+
</div>
48+
</template>
49+
<template #columnHeaderAfter="days">
50+
<div class="q-ma-xs">
51+
After
52+
</div>
53+
</template>
54+
</q-calendar>
55+
</div>
56+
</template>
57+
58+
<script>
59+
import template from '../../../markdown/examples/template/weekview/column-header.md'
60+
import script from '../../../markdown/examples/script/weekview/column-header.md'
61+
62+
export default {
63+
data () {
64+
return {
65+
tab: 'template',
66+
selectedDate: '2019-04-01',
67+
template: template,
68+
script: script
69+
}
70+
}
71+
}
72+
</script>

‎demo/src/markdown/calendar.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,8 @@ TODO
319319
| theme | Object | All | Overrides the calendar's color properties |
320320
| weekdays | Array | All | The days of the week to be displayed<br>Default: [0, 1, 2, 3, 4, 5, 6]<br>0=Sunday, 1=Monday, 2=Tuesday, etc |
321321
| hide-header | Boolean| All | Hide the calendar header<br>Default: false |
322+
| column-header-before | Boolean| All | Provide a column before scoped slot<br>Default: false |
323+
| column-header-after | Boolean| All | Provide a column after scoped slot<br>Default: false |
322324
| short-weekday-label | Boolean | All | Makes the days of the week short<br>Default: false<br>Sunday=Sun, Monday=Mon, Tuesday=Tue, etc |
323325
| locale | String | All | Changes the calendar's locale<br>Default: en-us |
324326
| animated | Boolean | All | Makes the calendar's prev/next animated<br>Default: false |

‎demo/src/markdown/examples/script/dayview/column-header.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```
2+
<script>
3+
export default {
4+
data () {
5+
return {
6+
selectedDate: '2019-04-01'
7+
}
8+
}
9+
</script>
10+
```

‎demo/src/markdown/examples/script/weekview/column-header.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```
2+
<script>
3+
export default {
4+
data () {
5+
return {
6+
selectedDate: '2019-04-01'
7+
}
8+
}
9+
</script>
10+
```

‎demo/src/markdown/examples/template/dayview/column-header.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```
2+
<template>
3+
<q-calendar
4+
v-model="selectedDate"
5+
:column-header-before="true"
6+
:column-header-after="true"
7+
view="day"
8+
locale="en-us"
9+
style="height: 400px;"
10+
>
11+
<template #columnHeaderBefore="days">
12+
<div class="q-ma-xs">
13+
columnHeaderBefore slot
14+
</div>
15+
</template>
16+
<template #columnHeaderAfter="days">
17+
<div class="q-ma-xs">
18+
columnHeaderAfter slot
19+
</div>
20+
</template>
21+
</q-calendar>
22+
</template>
23+
```

‎demo/src/markdown/examples/template/weekview/column-header.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```
2+
<template>
3+
<q-calendar
4+
v-model="selectedDate"
5+
:column-header-before="true"
6+
:column-header-after="true"
7+
view="week"
8+
locale="en-us"
9+
style="height: 400px;"
10+
>
11+
<template #columnHeaderBefore="days">
12+
<div class="q-ma-xs">
13+
Before
14+
</div>
15+
</template>
16+
<template #columnHeaderAfter="days">
17+
<div class="q-ma-xs">
18+
After
19+
</div>
20+
</template>
21+
</q-calendar>
22+
</template>
23+
```

‎demo/src/pages/Examples.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@
77
<example-card title="Week View - Basic" name="WeekViewDefault" />
88
<example-card title="Month View - Basic" name="MonthViewDefault" />
99

10+
<example-title title="Column Header" />
11+
<p>Column Headers are scoped slots only. They are turned on with the <code class="q-markdown--token">column-header-before</code> and <code class="q-markdown--token">column-header-after</code> properties. Once each property is set to <code class="q-markdown--token">true</code> the respective slot is availale.</p>
12+
<p>Column Headers are only available for the <code class="q-markdown--token">day</code> (includes 2day, 3day, etc) and <code class="q-markdown--token">week</code> views.</p>
13+
<p>The <code class="q-markdown--token">day</code> information is passed to the scoped slot</p>
14+
<example-card title="Day View - Column Header" name="DayViewColumnHeader" />
15+
<example-card title="Week View - Column Header" name="WeekViewColumnHeader" />
16+
1017
<example-title title="Hide Header" />
1118
<example-card title="Day View - Hide Header" name="DayViewHideHeader" />
1219
<example-card title="Month View - Hide Header" name="MonthViewHideHeader" />
@@ -100,6 +107,10 @@ export default {
100107
this.addToToc('Week View - Basic', 2)
101108
this.addToToc('Month View - Basic', 2)
102109
110+
this.addToToc('Column Header')
111+
this.addToToc('Day View - Column Header', 2)
112+
this.addToToc('Week View - Column Header', 2)
113+
103114
this.addToToc('Hide Header')
104115
this.addToToc('Day View - Hide Header', 2)
105116
this.addToToc('Month View - Hide Header', 2)

‎src/component/QCalendarDaily.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default CalendarIntervals.extend({
7676
slot ? slot(this.days) : ''
7777
])
7878
},
79+
7980
__renderHeadDays (h) {
8081
return this.days.map((day) => this.__renderHeadDay(h, day))
8182
},
@@ -123,8 +124,10 @@ export default CalendarIntervals.extend({
123124
return this.getScopeForSlot(day)
124125
})
125126
}), [
127+
this.columnHeaderBefore === true ? this.__renderColumnHeaderBefore(h, day) : '',
126128
this.__renderHeadWeekday(h, day),
127129
this.__renderHeadDayBtn(h, day),
130+
this.columnHeaderAfter === true ? this.__renderColumnHeaderAfter(h, day) : '',
128131
slot ? slot(day) : ''
129132
])
130133
},
@@ -199,6 +202,25 @@ export default CalendarIntervals.extend({
199202
}, _event => day)
200203
}), this.dayFormatter(day, false))
201204
},
205+
206+
__renderColumnHeaderBefore (h, day) {
207+
const slot = this.$scopedSlots.columnHeaderBefore
208+
return h('div', {
209+
staticClass: 'q-calendar-daily__column-header--before'
210+
}, [
211+
slot ? slot(day) : ''
212+
])
213+
},
214+
215+
__renderColumnHeaderAfter (h, day) {
216+
const slot = this.$scopedSlots.columnHeaderAfter
217+
return h('div', {
218+
staticClass: 'q-calendar-daily__column-header--after'
219+
}, [
220+
slot ? slot(day) : ''
221+
])
222+
},
223+
202224
__renderBody (h) {
203225
return h('div', {
204226
staticClass: 'q-calendar-daily__body'

0 commit comments

Comments
 (0)