You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+152Lines changed: 152 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,6 +22,158 @@ Visit https://vcalendar.netlify.com for demos and API reference. This plug-in is
22
22
* Handles taps for date selection
23
23
* Handles swipes for month navigation
24
24
25
+
# Usage
26
+
27
+
## Calendar
28
+
29
+
All attributes for a calendar are supplied within an array.
30
+
31
+
A single attribute may consist of one of each of the following objects: higlights, dots, bars, content style, content hover style. Supply the attributes as an array for the `v-calendar` component.
32
+
33
+
Here is an example of a simple highlight with a content style.
34
+
35
+
```html
36
+
<v-calendar:attributes='attrs'>
37
+
</v-calendar>
38
+
```
39
+
40
+
```javascript
41
+
exportconst {
42
+
data() {
43
+
return {
44
+
attrs: [
45
+
{
46
+
highlight: {
47
+
backgroundColor:'red',
48
+
borderRadius:'5px'// Only applied on highlighted end caps
49
+
},
50
+
contentStyle: {
51
+
color:'white'// Contrasts well with the red background
52
+
},
53
+
dates: [
54
+
newDate(), // Use dates
55
+
{ // ...or date ranges
56
+
start:newDate('1/21/83'), // ...that start on my birthday :)
57
+
end:newDate()
58
+
}
59
+
]
60
+
customData: myData // Custom data to reference later
61
+
}
62
+
]
63
+
}
64
+
}
65
+
};
66
+
```
67
+
68
+
The `dates` array specifies dates for which all components of the attribute appear. As you can see, both date objects and date range objects are allowed, where the latter requires start and end dates when needed. For date ranges, null values are allowed for infinite start and end dates, in which case those properties can be ommitted entirely.
69
+
70
+
### Date Patterns
71
+
72
+
One really neat feature is that you can target specific dates from within a parent range. This allows for creating complex date patterns that would be difficult to achieve otherwise.
73
+
74
+
For a simple example, let's say we want to display an attribute on the weekends. To do that, we configure the date like this:
75
+
76
+
```javascript
77
+
...
78
+
attrs: [
79
+
{
80
+
highlight: {...},
81
+
contentStyle: {...},
82
+
dates: [
83
+
{
84
+
start:null, // From the beginning of time...
85
+
end:null, // ...to the end of time...
86
+
weekdays: [1, 7] // ...on Sundays and Saturdays
87
+
}
88
+
]
89
+
}
90
+
]
91
+
...
92
+
```
93
+
94
+
We can also target other specific day properties, like `days: [6, 15]` for the 6th and 15th of the month, `weeks: [-1]` for the last week of the month and even `ordinalWeekdays: { -1: [1] }` for the last Sunday of the month.
95
+
96
+
If supplying only a single numerical argument, like `weeks: [-1]`, we can nix the array and simplify to `weeks: -1`.
97
+
98
+
Additionally, if the date is applied over an infinite time scale (`start` and `end` dates are `null`) like the example before, we can remove `start` and `end` completely. And since our date object is the only one in the array, we can nix the array again like before.
99
+
100
+
```javascript
101
+
...
102
+
attrs: [
103
+
{
104
+
highlight: {...},
105
+
contentStyle: {...},
106
+
dates: { weekdays: [1, 7] } // Nice and tidy
107
+
}
108
+
],
109
+
```
110
+
111
+
Let's consider another simple example of displaying dot indicators on the last Friday of every other month, starting on January 1st of 2018. We could do so like this.
112
+
113
+
```javascript
114
+
...
115
+
attrs: [
116
+
{
117
+
dot: { backgroundColor:'red' },
118
+
dates: {
119
+
start:newDate('1/1/2018'),
120
+
monthlyInterval:2, // Every other month
121
+
ordinalWeekdays: { [-1]:6 } // ...on the last Friday
122
+
}
123
+
}
124
+
]
125
+
...
126
+
```
127
+
128
+
Now, for some reason, we also want to display them on the 15th of every other month, so our first attempt might be to modify the dates to this:
129
+
130
+
```javascript
131
+
...
132
+
dates: {
133
+
start:newDate('1/1/2018'),
134
+
monthlyInterval:2, // Every other month
135
+
ordinalWeekdays: { [-1]:6 }, // ...on the last Friday
136
+
days:15// ...and on the 15th? (WRONG!)
137
+
},
138
+
...
139
+
```
140
+
141
+
But this would be **wrong**, because all component specifiers are conditionally *anded* with each other.
142
+
143
+
To evaluate a set of conditions *or* another set, we can break the sets of conditions out into an array assigned to the `on` property.
144
+
145
+
```javascript
146
+
...
147
+
dates: {
148
+
start:newDate('1/1/2018'),
149
+
monthlyInterval:2, // Every other month
150
+
on: [ // ...on...
151
+
{ ordinalWeekdays: { [-1]:6 } }, // ...the last Friday
152
+
{ days:15 } // ...or the 15th of the month
153
+
]
154
+
}
155
+
...
156
+
```
157
+
158
+
Note how we kept the `monthlyInterval` condition outside of the others. Any conditions that should be **anded** with all the others can be extracted out of the array. This prevents unnecessary duplication of conditions within **or** subsets.
159
+
160
+
Here is a complete reference of date component specifiers available.
161
+
162
+
| Property | Type | Description | Range |
163
+
| --- | --- | --- | --- |
164
+
|`days`| Number, Array | Day number from the start or end of the month. | 1 to 31, -1 to -31 |
165
+
|`weekdays`| Number, Array | Day of the week. | 1: Sun to 7: Sat |
166
+
|`ordinalWeekdays`| Object (key: Number / value: Number, Array) | Weekday ordinal position from the start or end of the month. | key: 1 to 6, -1 to -6 / value: 1: Sun to 7: Sat |
167
+
|`weeks`| Number, Array | Week number from the start or end of the month. | 1 to 6, -1 to -6 |
168
+
|`months`| Number, Array | Months of the year. | 1 to 12 |
169
+
|`years`| Number, Array | Year numbers. | 4-digit integer |
170
+
|`dailyInterval`| Number | Interval number of days from the start date (or today when no start date provided). | n > 0 |
171
+
|`weeklyInterval`| Number | Interval number of weeks from the start date (or today). | n > 0 |
172
+
|`monthlyInterval`| Number | Interval number of months from the start date (or today). | n > 0 |
173
+
|`yearlyInterval`| Number | Interval number of years from the start date (or today). | n > 0 |
174
+
175
+
176
+
25
177
## Quick Start
26
178
27
179
[Vue.js](https://vuejs.org) version 2.4+ is required.
0 commit comments