Skip to content

Commit 73d5e9d

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

File tree

16 files changed

+669
-30
lines changed

16 files changed

+669
-30
lines changed

‎docs/src/assets/menu.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,10 @@ const menu = [
394394
name: 'Month - Navigation',
395395
path: 'month-navigation'
396396
},
397+
{
398+
name: 'Month - Disabled days',
399+
path: 'month-disabled-days'
400+
},
397401
{
398402
name: 'Month - Selected dates',
399403
path: 'month-selected-dates'
@@ -562,6 +566,10 @@ const menu = [
562566
name: 'Agenda - Now',
563567
path: 'agenda-now'
564568
},
569+
{
570+
name: 'Agenda - Disabled days',
571+
path: 'agenda-disabled-days'
572+
},
565573
{
566574
name: 'Agenda - Cell width',
567575
path: 'agenda-cell-width'
@@ -679,6 +687,10 @@ const menu = [
679687
name: 'Scheduler - Now',
680688
path: 'scheduler-now'
681689
},
690+
{
691+
name: 'Scheduler - Disabled days',
692+
path: 'scheduler-disabled-days'
693+
},
682694
{
683695
name: 'Scheduler - Focusable/hoverable',
684696
path: 'scheduler-focusable-hoverable'

‎docs/src/components/page-parts/LandingPageContent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
<q-timeline-entry heading>
3232
<div style="font-size: 32px; font-weight: 600;">QCalendar</div>
33-
<div style="font-size: 22px; font-weight: 600;" class="text-grey">It's a Family of Calendars</div>
33+
<div style="font-size: 22px; font-weight: 600;" class="text-grey">A Vue Calendar that has everything you need</div>
3434
<!-- <div style="font-size: 16px;">Build Beautiful,Responsive Calendars</div> -->
3535
</q-timeline-entry>
3636

‎docs/src/examples/AgendaDisabledDays.vue‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<template>
2+
<div class="subcontent">
3+
<div class="line">
4+
The next 4 days after the current day have been disabled with the <code class="example-token">disabled-days</code> property.<br>
5+
The first example uses an array of dates to disable each specific date.<br>
6+
The second example uses a range, which is an array within an array of start and end dates.<br>
7+
</div>
8+
9+
<navigation-bar
10+
@today="onToday"
11+
@prev="onPrev"
12+
@next="onNext"
13+
/>
14+
15+
<div class="row justify-center">
16+
<div class="q-gutter-md" style="display: flex; flex-direction: column; max-width: 800px; width: 90%;">
17+
<q-calendar-agenda
18+
ref="calendar"
19+
v-model="selectedDate"
20+
view="week"
21+
:disabled-days="disabledDays"
22+
:left-column-options="leftColumnOptions"
23+
:right-column-options="rightColumnOptions"
24+
column-options-id="id"
25+
column-options-label="label"
26+
:day-min-height="200"
27+
animated
28+
bordered
29+
@change="onChange"
30+
@moved="onMoved"
31+
@click-date="onClickDate"
32+
@click-time="onClickTime"
33+
@click-interval="onClickInterval"
34+
@click-head-intervals="onClickHeadIntervals"
35+
@click-head-day="onClickHeadDay"
36+
style="max-height: 200px;"
37+
/>
38+
<q-calendar-agenda
39+
ref="calendar2"
40+
v-model="selectedDate"
41+
view="week"
42+
:disabled-days="disabledDaysRange"
43+
:left-column-options="leftColumnOptions"
44+
:right-column-options="rightColumnOptions"
45+
column-options-id="id"
46+
column-options-label="label"
47+
:day-min-height="200"
48+
animated
49+
bordered
50+
@change="onChange"
51+
@moved="onMoved"
52+
@click-date="onClickDate"
53+
@click-time="onClickTime"
54+
@click-interval="onClickInterval"
55+
@click-head-intervals="onClickHeadIntervals"
56+
@click-head-day="onClickHeadDay"
57+
style="max-height: 200px;"
58+
/>
59+
</div>
60+
</div>
61+
</div>
62+
</template>
63+
64+
<script>
65+
import {
66+
QCalendarAgenda,
67+
addToDate,
68+
parseTimestamp,
69+
today
70+
} from '@quasar/quasar-ui-qcalendar'
71+
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass'
72+
import '@quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass'
73+
import '@quasar/quasar-ui-qcalendar/src/QCalendarAgenda.sass'
74+
75+
import { defineComponent } from 'vue'
76+
import NavigationBar from '../components/NavigationBar.vue'
77+
78+
export default defineComponent({
79+
name: 'AgendaDisabledDays',
80+
components: {
81+
NavigationBar,
82+
QCalendarAgenda
83+
},
84+
data () {
85+
return {
86+
selectedDate: today(),
87+
leftColumnOptions: [
88+
{
89+
id: 'overdue',
90+
label: 'Overdue'
91+
}
92+
],
93+
rightColumnOptions: [
94+
{
95+
id: 'summary',
96+
label: 'Summary'
97+
}
98+
]
99+
}
100+
},
101+
computed: {
102+
disabledDays () {
103+
const days = []
104+
const ts = parseTimestamp(today())
105+
// make next 4 days, after today, disabled
106+
Array.from(Array(4)).forEach((_, i) => {
107+
days.push(addToDate(ts, { day: i + 1 }).date)
108+
})
109+
return days
110+
},
111+
112+
disabledDaysRange () {
113+
// create the range for example 2
114+
// Note: this is an array, within an array
115+
return [[ this.disabledDays[ 0 ], this.disabledDays[ this.disabledDays.length - 1 ] ]]
116+
}
117+
},
118+
methods: {
119+
onToday () {
120+
this.$refs.calendar.moveToToday()
121+
},
122+
onPrev () {
123+
this.$refs.calendar.prev()
124+
},
125+
onNext () {
126+
this.$refs.calendar.next()
127+
},
128+
129+
onMoved (data) {
130+
console.log('onMoved', data)
131+
},
132+
onChange (data) {
133+
console.log('onChange', data)
134+
},
135+
onClickDate (data) {
136+
console.log('onClickDate', data)
137+
},
138+
onClickTime (data) {
139+
console.log('onClickTime', data)
140+
},
141+
onClickInterval (data) {
142+
console.log('onClickInterval', data)
143+
},
144+
onClickHeadIntervals (data) {
145+
console.log('onClickHeadIntervals', data)
146+
},
147+
onClickHeadDay (data) {
148+
console.log('onClickHeadDay', data)
149+
}
150+
}
151+
})
152+
</script>

‎docs/src/examples/DayDisabledDays.vue‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<template>
22
<div class="subcontent">
3-
<div class="line">The next 4 days after the current day have been disabled with the <code class="example-token">disabled-days</code> property.</div>
3+
<div class="line">
4+
The next 4 days after the current day have been disabled with the <code class="example-token">disabled-days</code> property.<br>
5+
The first example uses an array of dates to disable each specific date.<br>
6+
The second example uses a range, which is an array within an array of start and end dates.<br>
7+
</div>
48

59
<navigation-bar
610
@today="onToday"
@@ -9,7 +13,7 @@
913
/>
1014

1115
<div class="row justify-center">
12-
<div style="display: flex; max-width: 800px; width: 100%; height: 400px;">
16+
<div class="q-gutter-md" style="display: flex; flex-direction: column; max-width: 800px; width: 90%; height: 500px;">
1317
<q-calendar-day
1418
ref="calendar"
1519
v-model="selectedDate"
@@ -27,6 +31,23 @@
2731
@click-head-intervals="onClickHeadIntervals"
2832
@click-head-day="onClickHeadDay"
2933
/>
34+
<q-calendar-day
35+
ref="calendar2"
36+
v-model="selectedDate"
37+
:disabled-days="disabledDaysRange"
38+
no-active-date
39+
animated
40+
bordered
41+
transition-next="slide-left"
42+
transition-prev="slide-right"
43+
@change="onChange"
44+
@moved="onMoved"
45+
@click-date="onClickDate"
46+
@click-time="onClickTime"
47+
@click-interval="onClickInterval"
48+
@click-head-intervals="onClickHeadIntervals"
49+
@click-head-day="onClickHeadDay"
50+
/>
3051
</div>
3152
</div>
3253
</div>
@@ -66,6 +87,12 @@ export default defineComponent({
6687
days.push(addToDate(ts, { day: i + 1 }).date)
6788
})
6889
return days
90+
},
91+
92+
disabledDaysRange () {
93+
// create the range for example 2
94+
// Note: this is an array, within an array
95+
return [[ this.disabledDays[ 0 ], this.disabledDays[ this.disabledDays.length - 1 ] ]]
6996
}
7097
},
7198
methods: {

‎docs/src/examples/MiniModeDisabledDays.vue‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="subcontent">
33
<div class="line">
4-
The first example uses an array of dates to disable the next 4 days after today.<br>
5-
The second example uses a range (which is an array within an array) to disable the next 4 days after today.<br>
6-
Don't be confused with disabled "outside" days which are not part of the current month.
4+
The next 4 days after the current day have been disabled with the <code class="example-token">disabled-days</code> property.<br>
5+
The first example uses an array of dates to disable each specific date.<br>
6+
The second example uses a range, which is an array within an array of start and end dates.<br>
77
</div>
88

99
<navigation-bar
@@ -12,13 +12,14 @@
1212
@next="onNext"
1313
/>
1414

15-
<div style="display: flex; justify-content: center; width: 100%;">
16-
<div style="display: flex; flex-direction: column; max-width: 280px; width: 100%;">
15+
<div class="row justify-center">
16+
<div class="q-gutter-md" style="display: flex; flex-direction: column; max-width: 280px; width: 100%;">
1717
<q-calendar-month
1818
ref="calendar"
1919
v-model="selectedDate"
2020
mini-mode
2121
:disabled-days="disabledDays"
22+
no-outside-days
2223
animated
2324
bordered
2425
@change="onChange"
@@ -34,6 +35,7 @@
3435
v-model="selectedDate"
3536
mini-mode
3637
:disabled-days="disabledDaysRange"
38+
no-outside-days
3739
animated
3840
bordered
3941
style="max-width: 280px; width: 100%;"
@@ -72,29 +74,25 @@ export default defineComponent({
7274
},
7375
data () {
7476
return {
75-
selectedDate: today(),
76-
disabledDays: [],
77-
disabledDaysRange: []
77+
selectedDate: today()
7878
}
7979
},
80-
beforeMount () {
81-
// calculate the disabled days - next 4 days from today
82-
let firstDisabledDate, lastDisabledDate, tm = parseTimestamp(this.selectedDate)
83-
for (let index = 0; index < 4; ++index) {
84-
tm = addToDate(tm, { day: 1 })
85-
// push into disabledDays
86-
this.disabledDays.push(tm.date)
87-
// is this first disabled date?
88-
if (index === 0) {
89-
firstDisabledDate = tm.date
90-
}
91-
// is this last disabled date?
92-
else if (index === 3) {
93-
lastDisabledDate = tm.date
94-
}
80+
computed: {
81+
disabledDays () {
82+
const days = []
83+
const ts = parseTimestamp(today())
84+
// make next 4 days, after today, disabled
85+
Array.from(Array(4)).forEach((_, i) => {
86+
days.push(addToDate(ts, { day: i + 1 }).date)
87+
})
88+
return days
89+
},
90+
91+
disabledDaysRange () {
92+
// create the range for example 2
93+
// Note: this is an array, within an array
94+
return [[ this.disabledDays[ 0 ], this.disabledDays[ this.disabledDays.length - 1 ] ]]
9595
}
96-
// add the range
97-
this.disabledDaysRange.push([ firstDisabledDate, lastDisabledDate ])
9896
},
9997
methods: {
10098
onToday () {

0 commit comments

Comments
 (0)