Skip to content

Commit 2eef630

Browse files
hawkeye64hawkeye64
committed
feat(docs): new and updated examples
1 parent fddf413 commit 2eef630

File tree

6 files changed

+191
-2
lines changed

6 files changed

+191
-2
lines changed

‎packages/docs/src/components/ThemeBuilder/MonthThemeBuilder.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
view="month"
1919
locale="en-US"
2020
bordered
21+
focusable
22+
hoverable
23+
:focusType="['day']"
2124
:no-active-date="noActiveDate"
2225
:selected-start-end-dates="startEndDates"
2326
:selected-dates="selectedDates"

‎packages/docs/src/examples/Faq/MonthDate.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div class="subcontent">
3+
<navigation-bar @today="onToday" @prev="onPrev" @next="onNext" />
4+
5+
<div style="display: flex; justify-content: center; align-items: center; flex-wrap: nowrap">
6+
<div class="q-ma-md" style="font-size: 2em">{{ formattedMonth }}</div>
7+
</div>
8+
9+
<div class="row justify-center">
10+
<div style="display: flex; max-width: 800px; width: 100%">
11+
<q-calendar-month
12+
ref="calendar"
13+
v-model="selectedDate"
14+
animated
15+
bordered
16+
focusable
17+
hoverable
18+
:day-min-height="60"
19+
:day-height="0"
20+
@change="onChange"
21+
@moved="onMoved"
22+
@click-date="onClickDate"
23+
@click-day="onClickDay"
24+
@click-workweek="onClickWorkweek"
25+
@click-head-workweek="onClickHeadWorkweek"
26+
@click-head-day="onClickHeadDay"
27+
/>
28+
</div>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<script setup lang="ts">
34+
import { ref, reactive, computed } from 'vue'
35+
import NavigationBar from 'components/NavigationBar.vue'
36+
import { QCalendarMonth, today, Timestamp } from '@quasar/quasar-ui-qcalendar'
37+
import '@quasar/quasar-ui-qcalendar/index.css'
38+
39+
const calendar = ref<QCalendarMonth>(),
40+
selectedDate = ref(today()),
41+
year = ref(new Date().getFullYear()),
42+
selectedMonth = reactive<Timestamp[]>([])
43+
44+
const formattedMonth = computed(() => {
45+
const date = new Date(selectedDate.value)
46+
const formatter = monthFormatter()
47+
return formatter ? formatter.format(date) + ' ' + date.getFullYear() : ''
48+
})
49+
50+
function monthFormatter() {
51+
try {
52+
return new Intl.DateTimeFormat('en-US', {
53+
month: 'long',
54+
timeZone: 'UTC',
55+
})
56+
} catch {
57+
//
58+
}
59+
}
60+
61+
function onToday() {
62+
if (calendar.value) {
63+
calendar.value.moveToToday()
64+
}
65+
}
66+
function onPrev() {
67+
if (calendar.value) {
68+
calendar.value.prev()
69+
}
70+
}
71+
function onNext() {
72+
if (calendar.value) {
73+
calendar.value.next()
74+
}
75+
}
76+
function onMoved(data: Timestamp) {
77+
console.log('onMoved', data)
78+
}
79+
function onChange(data: { start: Timestamp; end: Timestamp; days: Timestamp[] }) {
80+
console.log('onChange', data)
81+
selectedMonth.splice(0, selectedMonth.length, ...data.days)
82+
// get year of 1st of the month
83+
for (let index = 0; index < selectedMonth.length; ++index) {
84+
if (selectedMonth[index]!.day === 1) {
85+
year.value = selectedMonth[index]!.year
86+
break
87+
}
88+
}
89+
}
90+
function onClickDate(data: Timestamp) {
91+
console.log('onClickDate', data)
92+
}
93+
function onClickDay(data: Timestamp) {
94+
console.log('onClickDay', data)
95+
}
96+
function onClickWorkweek(data: Timestamp) {
97+
console.log('onClickWorkweek', data)
98+
}
99+
function onClickHeadDay(data: Timestamp) {
100+
console.log('onClickHeadDay', data)
101+
}
102+
function onClickHeadWorkweek(data: Timestamp) {
103+
console.log('onClickHeadWorkweek', data)
104+
}
105+
</script>

‎packages/docs/src/examples/Faq/MonthMinWeeks.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="subcontent">
3+
<navigation-bar @today="onToday" @prev="onPrev" @next="onNext" />
4+
5+
<div class="row justify-center">
6+
<div style="display: flex; max-width: 800px; width: 100%">
7+
<q-calendar-month
8+
ref="calendar"
9+
v-model="selectedDate"
10+
animated
11+
bordered
12+
focusable
13+
hoverable
14+
:day-min-height="60"
15+
:day-height="0"
16+
:min-weeks="6"
17+
@change="onChange"
18+
@moved="onMoved"
19+
@click-date="onClickDate"
20+
@click-day="onClickDay"
21+
@click-workweek="onClickWorkweek"
22+
@click-head-workweek="onClickHeadWorkweek"
23+
@click-head-day="onClickHeadDay"
24+
/>
25+
</div>
26+
</div>
27+
</div>
28+
</template>
29+
30+
<script setup lang="ts">
31+
import { ref } from 'vue'
32+
import NavigationBar from 'components/NavigationBar.vue'
33+
import { QCalendarMonth, today, Timestamp } from '@quasar/quasar-ui-qcalendar'
34+
import '@quasar/quasar-ui-qcalendar/index.css'
35+
36+
const calendar = ref<QCalendarMonth>(),
37+
selectedDate = ref(today())
38+
39+
function onToday() {
40+
if (calendar.value) {
41+
calendar.value.moveToToday()
42+
}
43+
}
44+
function onPrev() {
45+
if (calendar.value) {
46+
calendar.value.prev()
47+
}
48+
}
49+
function onNext() {
50+
if (calendar.value) {
51+
calendar.value.next()
52+
}
53+
}
54+
function onMoved(data: Timestamp) {
55+
console.log('onMoved', data)
56+
}
57+
function onChange(data: { start: Timestamp; end: Timestamp; days: Timestamp[] }) {
58+
console.log('onChange', data)
59+
}
60+
function onClickDate(data: Timestamp) {
61+
console.log('onClickDate', data)
62+
}
63+
function onClickDay(data: Timestamp) {
64+
console.log('onClickDay', data)
65+
}
66+
function onClickWorkweek(data: Timestamp) {
67+
console.log('onClickWorkweek', data)
68+
}
69+
function onClickHeadDay(data: Timestamp) {
70+
console.log('onClickHeadDay', data)
71+
}
72+
function onClickHeadWorkweek(data: Timestamp) {
73+
console.log('onClickHeadWorkweek', data)
74+
}
75+
</script>

‎packages/docs/src/examples/Faq/MonthSticky.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,10 @@ function onNext() {
113113
// does not affect all your calendars
114114
.my-sticky {
115115
.q-calendar {
116+
overflow: unset !important;
117+
116118
.q-calendar-month {
117-
position: relative;
119+
//position: relative;
118120
119121
.q-calendar-month__head {
120122
position: sticky !important;

‎packages/docs/src/examples/Month/MonthSlotDayHolidays.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</div>
1919

2020
<div style="display: flex; justify-content: center; align-items: center; flex-wrap: nowrap">
21-
<div style="font-size: 2em">{{ formattedMonth }}</div>
21+
<div class="q-ma-md" style="font-size: 2em">{{ formattedMonth }}</div>
2222
</div>
2323

2424
<div class="row justify-center">

‎packages/docs/src/markdown/developing/faq.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@ examples: Faq
77
Here you will find useful bespoke information on how to use the calendars. These mainly come as a result from question in the issues.
88

99
<MarkdownExample title="Month (Sticky Header)" file="MonthSticky" no-github no-edit/>
10+
11+
<MarkdownExample title="Month (Show Month)" file="MonthDate" no-github no-edit/>
12+
13+
<MarkdownExample title="Month (Min. Weeks)" file="MonthMinWeeks" no-github no-edit/>

0 commit comments

Comments
 (0)