Skip to content

Commit ff6b3e5

Browse files
hawkeye64hawkeye64
committed
chore(docs): new and updated examples; updated related
1 parent 73d5e9d commit ff6b3e5

28 files changed

+837
-43
lines changed

‎docs/src/assets/menu.js‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -98,14 +98,14 @@ const menu = [
9898
name: 'Day - No scroll',
9999
path: 'day-no-scroll'
100100
},
101-
{
102-
name: 'Day - Disabled before/after',
103-
path: 'day-disabled-before-after'
104-
},
105101
{
106102
name: 'Day - Disabled days',
107103
path: 'day-disabled-days'
108104
},
105+
{
106+
name: 'Day - Disabled before/after',
107+
path: 'day-disabled-before-after'
108+
},
109109
{
110110
name: 'Day - Disabled weekdays',
111111
path: 'day-disabled-weekdays'
@@ -232,14 +232,14 @@ const menu = [
232232
name: 'Week - No scroll',
233233
path: 'week-no-scroll'
234234
},
235-
{
236-
name: 'Week - Disabled before/after',
237-
path: 'week-disabled-before-after'
238-
},
239235
{
240236
name: 'Week - Disabled days',
241237
path: 'week-disabled-days'
242238
},
239+
{
240+
name: 'Week - Disabled before/after',
241+
path: 'week-disabled-before-after'
242+
},
243243
{
244244
name: 'Week - Disabled weekdays',
245245
path: 'week-disabled-weekdays'
@@ -398,6 +398,14 @@ const menu = [
398398
name: 'Month - Disabled days',
399399
path: 'month-disabled-days'
400400
},
401+
{
402+
name: 'Month - Disabled before/after',
403+
path: 'month-disabled-before-after'
404+
},
405+
{
406+
name: 'Month - Disabled weekdays',
407+
path: 'month-disabled-weekdays'
408+
},
401409
{
402410
name: 'Month - Selected dates',
403411
path: 'month-selected-dates'
@@ -488,6 +496,10 @@ const menu = [
488496
name: 'Mini-mode - Disabled days',
489497
path: 'minimode-disabled-days'
490498
},
499+
{
500+
name: 'Mini-mode - Disabled before/after',
501+
path: 'minimode-disabled-before-after'
502+
},
491503
{
492504
name: 'Mini-mode - Disabled weekdays',
493505
path: 'minimode-disabled-weekdays'
@@ -570,6 +582,14 @@ const menu = [
570582
name: 'Agenda - Disabled days',
571583
path: 'agenda-disabled-days'
572584
},
585+
{
586+
name: 'Agenda - Disabled before/after',
587+
path: 'Agenda-disabled-before-after'
588+
},
589+
{
590+
name: 'Agenda - Disabled weekdays',
591+
path: 'agenda-disabled-weekdays'
592+
},
573593
{
574594
name: 'Agenda - Cell width',
575595
path: 'agenda-cell-width'
@@ -691,6 +711,14 @@ const menu = [
691711
name: 'Scheduler - Disabled days',
692712
path: 'scheduler-disabled-days'
693713
},
714+
{
715+
name: 'Scheduler - Disabled before/after',
716+
path: 'scheduler-disabled-before-after'
717+
},
718+
{
719+
name: 'Scheduler - Disabled weekdays',
720+
path: 'scheduler-disabled-weekdays'
721+
},
694722
{
695723
name: 'Scheduler - Focusable/hoverable',
696724
path: 'scheduler-focusable-hoverable'

‎docs/src/examples/AgendaDisabledBeforeAfter.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div class="subcontent">
3+
<navigation-bar
4+
@today="onToday"
5+
@prev="onPrev"
6+
@next="onNext"
7+
/>
8+
9+
<div class="row justify-center">
10+
<div style="display: flex; max-width: 800px; width: 100%; height: 200px;">
11+
<q-calendar-agenda
12+
ref="calendar"
13+
v-model="selectedDate"
14+
view="day"
15+
dark
16+
:left-column-options="leftColumnOptions"
17+
:right-column-options="rightColumnOptions"
18+
column-options-id="id"
19+
column-options-label="label"
20+
:day-min-height="200"
21+
animated
22+
bordered
23+
@change="onChange"
24+
@moved="onMoved"
25+
@click-date="onClickDate"
26+
@click-time="onClickTime"
27+
@click-interval="onClickInterval"
28+
@click-head-intervals="onClickHeadIntervals"
29+
@click-head-day="onClickHeadDay"
30+
/>
31+
</div>
32+
</div>
33+
</div>
34+
</template>
35+
36+
<script>
37+
import { QCalendarAgenda, today } from '@quasar/quasar-ui-qcalendar'
38+
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass'
39+
import '@quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass'
40+
import '@quasar/quasar-ui-qcalendar/src/QCalendarAgenda.sass'
41+
42+
import { defineComponent } from 'vue'
43+
import NavigationBar from '../components/NavigationBar.vue'
44+
45+
export default defineComponent({
46+
name: 'AgendaDisabledBeforeAfter',
47+
components: {
48+
NavigationBar,
49+
QCalendarAgenda
50+
},
51+
data () {
52+
return {
53+
selectedDate: today(),
54+
leftColumnOptions: [
55+
{
56+
id: 'overdue',
57+
label: 'Overdue'
58+
}
59+
],
60+
rightColumnOptions: [
61+
{
62+
id: 'summary',
63+
label: 'Summary'
64+
}
65+
]
66+
}
67+
},
68+
methods: {
69+
onToday () {
70+
this.$refs.calendar.moveToToday()
71+
},
72+
onPrev () {
73+
this.$refs.calendar.prev()
74+
},
75+
onNext () {
76+
this.$refs.calendar.next()
77+
},
78+
79+
onMoved (data) {
80+
console.log('onMoved', data)
81+
},
82+
onChange (data) {
83+
console.log('onChange', data)
84+
},
85+
onClickDate (data) {
86+
console.log('onClickDate', data)
87+
},
88+
onClickTime (data) {
89+
console.log('onClickTime', data)
90+
},
91+
onClickInterval (data) {
92+
console.log('onClickInterval', data)
93+
},
94+
onClickHeadIntervals (data) {
95+
console.log('onClickHeadIntervals', data)
96+
},
97+
onClickHeadDay (data) {
98+
console.log('onClickHeadDay', data)
99+
}
100+
}
101+
})
102+
</script>

‎docs/src/examples/AgendaDisabledWeekdays.vue‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<template>
2+
<div class="subcontent">
3+
<div class="line">The weekends have been disabled with the <code class="example-token">disabled-weekdays</code> property.</div>
4+
5+
<navigation-bar
6+
@today="onToday"
7+
@prev="onPrev"
8+
@next="onNext"
9+
/>
10+
11+
<div class="row justify-center">
12+
<div style="display: flex; max-width: 800px; width: 100%; height: 200px;">
13+
<q-calendar-agenda
14+
ref="calendar"
15+
v-model="selectedDate"
16+
view="week"
17+
:disabled-weekdays="[0,6]"
18+
:left-column-options="leftColumnOptions"
19+
:right-column-options="rightColumnOptions"
20+
column-options-id="id"
21+
column-options-label="label"
22+
:day-min-height="200"
23+
animated
24+
bordered
25+
@change="onChange"
26+
@moved="onMoved"
27+
@click-date="onClickDate"
28+
@click-time="onClickTime"
29+
@click-interval="onClickInterval"
30+
@click-head-intervals="onClickHeadIntervals"
31+
@click-head-day="onClickHeadDay"
32+
/>
33+
</div>
34+
</div>
35+
</div>
36+
</template>
37+
38+
<script>
39+
import { QCalendarAgenda, today } from '@quasar/quasar-ui-qcalendar'
40+
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass'
41+
import '@quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass'
42+
import '@quasar/quasar-ui-qcalendar/src/QCalendarAgenda.sass'
43+
44+
import { defineComponent } from 'vue'
45+
import NavigationBar from '../components/NavigationBar.vue'
46+
47+
export default defineComponent({
48+
name: 'AgendaDisabledWeekdays',
49+
components: {
50+
NavigationBar,
51+
QCalendarAgenda
52+
},
53+
data () {
54+
return {
55+
selectedDate: today(),
56+
leftColumnOptions: [
57+
{
58+
id: 'overdue',
59+
label: 'Overdue'
60+
}
61+
],
62+
rightColumnOptions: [
63+
{
64+
id: 'summary',
65+
label: 'Summary'
66+
}
67+
]
68+
}
69+
},
70+
methods: {
71+
onToday () {
72+
this.$refs.calendar.moveToToday()
73+
},
74+
onPrev () {
75+
this.$refs.calendar.prev()
76+
},
77+
onNext () {
78+
this.$refs.calendar.next()
79+
},
80+
81+
onMoved (data) {
82+
console.log('onMoved', data)
83+
},
84+
onChange (data) {
85+
console.log('onChange', data)
86+
},
87+
onClickDate (data) {
88+
console.log('onClickDate', data)
89+
},
90+
onClickTime (data) {
91+
console.log('onClickTime', data)
92+
},
93+
onClickInterval (data) {
94+
console.log('onClickInterval', data)
95+
},
96+
onClickHeadIntervals (data) {
97+
console.log('onClickHeadIntervals', data)
98+
},
99+
onClickHeadDay (data) {
100+
console.log('onClickHeadDay', data)
101+
}
102+
}
103+
})
104+
</script>

‎docs/src/examples/DayDisabledBeforeAfter.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="subcontent">
3-
<div class="line">All days before and after the current day have been disabled with the properties <code class="example-token">disable-before</code> and <code class="example-token">disabled-after</code>.</div>
3+
<div class="line">All days before and after the current day have been disabled with the properties <code class="example-token">disabled-before</code> and <code class="example-token">disabled-after</code>.</div>
44

55
<navigation-bar
66
@today="onToday"

‎docs/src/examples/MiniModeDisabledBeforeAfter.vue‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="subcontent">
3-
<div class="line">The example below uses the properties <span class="example-token">disable-before</span> and <span class="example-token">disable-after</span> to disable all days except the current month.</div>
3+
<div class="line">All days before and after the current day have been disabled with the properties <code class="example-token">disabled-before</code> and <code class="example-token">disabled-after</code>.</div>
44

55
<navigation-bar
66
@today="onToday"
@@ -16,6 +16,7 @@
1616
mini-mode
1717
:disabled-before="disabledBefore"
1818
:disabled-after="disabledAfter"
19+
no-outside-days
1920
animated
2021
bordered
2122
@change="onChange"
@@ -35,7 +36,6 @@
3536
import {
3637
QCalendarMonth,
3738
addToDate,
38-
daysInMonth,
3939
parseTimestamp,
4040
today
4141
} from '@quasar/quasar-ui-qcalendar'
@@ -58,25 +58,15 @@ export default defineComponent({
5858
today2 = ref(today())
5959
6060
const disabledBefore = computed(() => {
61-
// find the last day of the previous month
62-
if (today2.value) {
63-
let ts = parseTimestamp(today2.value)
64-
ts = addToDate(ts, { day: -ts.day })
65-
return ts.date
66-
}
67-
return undefined
61+
let ts = parseTimestamp(today())
62+
ts = addToDate(ts, { day: -1 })
63+
return ts.date
6864
})
6965
7066
const disabledAfter = computed(() => {
71-
// find the 1st day of the next month
72-
if (today2.value) {
73-
let ts = parseTimestamp(today2.value)
74-
// get days in month
75-
const days = daysInMonth(ts.year, ts.month)
76-
ts = addToDate(ts, { day: (days - ts.day + 1) })
77-
return ts.date
78-
}
79-
return undefined
67+
let ts = parseTimestamp(today())
68+
ts = addToDate(ts, { day: 1 })
69+
return ts.date
8070
})
8171
8272
function onToday () {

‎docs/src/examples/MiniModeDisabledWeekdays.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="subcontent">
3-
<div class="line">This example uses the <span class="example-token">disabled-weekdays</span> property to disable the weekends.</div>
3+
<div class="line">The weekends have been disabled with the <code class="example-token">disabled-weekdays</code> property.</div>
44

55
<navigation-bar
66
@today="onToday"

0 commit comments

Comments
 (0)