Skip to content

Commit f656d63

Browse files
author
Nathan Reyes
committed
Add bar indicator support
1 parent 58ad66a commit f656d63

26 files changed

+399
-126
lines changed

_todos.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
- Add day-height back as a prop
2+
- Add 'Star on Github' button
3+
24

35
CALENDAR
46

config/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ module.exports = {
2323
},
2424
lib: {
2525
env: require('./prod.env'),
26-
assetsRoot: path.resolve(__dirname, '../dist'),
27-
assetsSubDirectory: 'lib',
26+
assetsRoot: path.resolve(__dirname, '../lib'),
27+
assetsSubDirectory: '',
2828
assetsPublicPath: '/',
2929
productionSourceMap: true,
3030
productionGzip: false,
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<b-table
3+
:data='props'>
4+
<template scope='props'>
5+
<b-table-column label='Property'>
6+
<span v-html='props.row.propertyName'></span>
7+
</b-table-column>
8+
<b-table-column label='Description'>
9+
<span v-html='props.row.description'></span>
10+
</b-table-column>
11+
<b-table-column label='Default'>
12+
<span v-html='props.row.default'></span>
13+
</b-table-column>
14+
</template>
15+
</b-table>
16+
</template>
17+
18+
<script>
19+
export default {
20+
data() {
21+
const props = [
22+
{
23+
propertyName: '<code>height: String</code>',
24+
description: 'Height of bar.',
25+
default: '<code>"5px"</code>',
26+
},
27+
{
28+
propertyName: '<code>backgroundColor: String</code>',
29+
description: 'Background color of bar.',
30+
default: '<code>"rgba(0, 0, 0, 0.5)"</code>',
31+
},
32+
{
33+
propertyName: '<code>borderColor: String</code>',
34+
description: 'Border color of bar.',
35+
default: '<code>undefined</code>',
36+
},
37+
{
38+
propertyName: '<code>borderWidth: String</code>',
39+
description: 'Border width of bar.',
40+
default: '<code>"0"</code>',
41+
},
42+
{
43+
propertyName: '<code>borderStyle: String</code>',
44+
description: 'Border style of bar.',
45+
default: '<code>"solid"</code>',
46+
},
47+
];
48+
return {
49+
props,
50+
};
51+
},
52+
};
53+
</script>

docs/components/api/CalendarApiIndicator.vue renamed to docs/components/api/CalendarApiDot.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,32 +21,32 @@ export default {
2121
const props = [
2222
{
2323
propertyName: '<code>diameter: String</code>',
24-
description: 'Diameter of indicator.',
24+
description: 'Diameter of dot.',
2525
default: '<code>"5px"</code>',
2626
},
2727
{
2828
propertyName: '<code>backgroundColor: String</code>',
29-
description: 'Background color of indicator.',
29+
description: 'Background color of dot.',
3030
default: '<code>"rgba(0, 0, 0, 0.5)"</code>',
3131
},
3232
{
3333
propertyName: '<code>borderColor: String</code>',
34-
description: 'Border color of indicator.',
34+
description: 'Border color of dot.',
3535
default: '<code>undefined</code>',
3636
},
3737
{
3838
propertyName: '<code>borderWidth: String</code>',
39-
description: 'Border width of indicator.',
39+
description: 'Border width of dot.',
4040
default: '<code>"0"</code>',
4141
},
4242
{
4343
propertyName: '<code>borderStyle: String</code>',
44-
description: 'Border style of indicator.',
44+
description: 'Border style of dot.',
4545
default: '<code>"solid"</code>',
4646
},
4747
{
4848
propertyName: '<code>borderRadius: String</code>',
49-
description: 'Border radius of indicator.',
49+
description: 'Border radius of dot.',
5050
default: '<code>"50%"<code>',
5151
},
5252
];

docs/components/api/CalendarApiProps.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,13 @@ export default {
6868
default: '<code>[]</code>',
6969
},
7070
{
71-
name: '<code>indicators-offset: String',
72-
description: 'Offset margin of indicators from bottom of day cell.',
71+
name: '<code>dots-offset: String',
72+
description: 'Offset margin of dots from bottom of day cell.',
73+
default: '<code>"0"</code>',
74+
},
75+
{
76+
name: '<code>bars-offset: String',
77+
description: 'Offset margin of bars from bottom of day cell.',
7378
default: '<code>"0"</code>',
7479
},
7580
{

docs/components/examples/ExIndicators.vue renamed to docs/components/examples/ExBars.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ export default {
1414
return {
1515
attributes: [
1616
{
17-
indicator: {
18-
backgroundColor: '#ff3333', // Red
17+
bar: {
18+
backgroundColor: '#ff4d4d', // Red
1919
},
2020
dates: [
2121
new Date(thisMonthYear, thisMonth, 1),
@@ -26,8 +26,8 @@ export default {
2626
],
2727
},
2828
{
29-
indicator: {
30-
backgroundColor: '#0040ff', // Blue
29+
bar: {
30+
backgroundColor: '#398fac', // Turqoise
3131
},
3232
dates: [
3333
new Date(thisMonthYear, thisMonth, 4),
@@ -42,8 +42,8 @@ export default {
4242
],
4343
},
4444
{
45-
indicator: {
46-
backgroundColor: '#ff8000', // Orange
45+
bar: {
46+
backgroundColor: '#794dff', // Purple
4747
},
4848
dates: [
4949
new Date(thisMonthYear, thisMonth, 12),

docs/components/examples/ExContentStyles.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default {
1919
attributes: [
2020
{
2121
contentStyle: {
22-
color: '#ff3333', // Red
22+
color: '#ff4d4d', // Red
2323
fontWeight: 600,
2424
fontSize: '1em',
2525
},
@@ -34,7 +34,7 @@ export default {
3434
},
3535
{
3636
contentStyle: {
37-
color: '#0040ff', // Blue
37+
color: '#398fac', // Blue
3838
fontWeight: 600,
3939
fontStyle: 'italic',
4040
},
@@ -50,7 +50,7 @@ export default {
5050
},
5151
{
5252
contentStyle: {
53-
color: '#ff8000', // Orange
53+
color: '#794dff', // Turqoise
5454
fontWeight: 600,
5555
},
5656
dates: [
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<v-calendar
3+
:attributes='attributes'
4+
is-double-paned>
5+
</v-calendar>
6+
</template>
7+
8+
<script>
9+
import { getExampleMonthComps } from '../utils';
10+
11+
export default {
12+
data() {
13+
const { thisMonth, thisMonthYear, nextMonth, nextMonthYear } = getExampleMonthComps();
14+
return {
15+
attributes: [
16+
{
17+
dot: {
18+
backgroundColor: '#ff4d4d', // Red
19+
},
20+
dates: [
21+
new Date(thisMonthYear, thisMonth, 1),
22+
new Date(thisMonthYear, thisMonth, 10),
23+
new Date(thisMonthYear, thisMonth, 22),
24+
new Date(nextMonthYear, nextMonth, 6),
25+
new Date(nextMonthYear, nextMonth, 16),
26+
],
27+
},
28+
{
29+
dot: {
30+
backgroundColor: '#398fac', // Turqoise
31+
},
32+
dates: [
33+
new Date(thisMonthYear, thisMonth, 4),
34+
new Date(thisMonthYear, thisMonth, 10),
35+
new Date(thisMonthYear, thisMonth, 15),
36+
new Date(nextMonthYear, nextMonth, 1),
37+
new Date(nextMonthYear, nextMonth, 12),
38+
{
39+
start: new Date(nextMonthYear, nextMonth, 20),
40+
end: new Date(nextMonthYear, nextMonth, 25),
41+
},
42+
],
43+
},
44+
{
45+
dot: {
46+
backgroundColor: '#794dff', // Purple
47+
},
48+
dates: [
49+
new Date(thisMonthYear, thisMonth, 12),
50+
new Date(thisMonthYear, thisMonth, 26),
51+
new Date(thisMonthYear, thisMonth, 15),
52+
new Date(nextMonthYear, nextMonth, 9),
53+
new Date(nextMonthYear, nextMonth, 5),
54+
new Date(nextMonthYear, nextMonth, 6),
55+
new Date(nextMonthYear, nextMonth, 20),
56+
new Date(nextMonthYear, nextMonth, 25),
57+
],
58+
},
59+
],
60+
};
61+
},
62+
};
63+
</script>

docs/components/examples/ExHighlights.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default {
5959
},
6060
{
6161
highlight: {
62-
backgroundColor: '#66b3cc', // Orange
62+
backgroundColor: '#66b3cc', // Turqoise
6363
borderColor: '#53a9c6',
6464
borderWidth: '2px',
6565
borderRadius: '5px',

docs/components/examples/ExStyling-1.vue

100644100755
File mode changed.

0 commit comments

Comments
 (0)