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
+40-2Lines changed: 40 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,7 +38,6 @@ The first thing to understand about attributes is what they are capable of displ
38
38
* Bar Indicators
39
39
* Popovers
40
40
* Content Styles
41
-
* Content Hover Styles (applied on hover state)
42
41
43
42
For now, let's just start by displaying a simple highlight on today's date.
44
43
@@ -371,6 +370,16 @@ Use the following tokens to configure your custom formats:
371
370
372
371
---
373
372
373
+
## I19n
374
+
375
+
VCalendar utilizes the [well supported](https://caniuse.com/#feat=internationalization) Internationalization API to derive month and weekday names and formatting. This helps keep the package size down, as well as supporting multiple locales in the most performant and isomorphic way.
376
+
377
+
At the moment, this API still cannot provide all recommended default settings per locale (such as 'first day of the week'), so those settings are provided out of the box for a reasonable number of locales, with a decent fallback for those locales that aren't included.
378
+
379
+
With all of this in mind, it is probably best that you rely on the the plugin's built-in methods for detecting the user's locale. However, if you would like to force a specific locale for all users, you may supply your own [default locale](#custom-defaults) using the [*language-region*](https://lingohub.com/documentation/developers/supported-locales/language-designators-with-regions/) format.
380
+
381
+
---
382
+
374
383
# Installation
375
384
376
385
[Vue.js](https://vuejs.org) version 2.5+ is required.
@@ -382,13 +391,41 @@ npm install v-calendar
382
391
```
383
392
384
393
### 2 Import and use VCalendar
394
+
395
+
#### 2A. Plugin Method (**Recommended**)
396
+
397
+
This is the most common use case.
398
+
385
399
```javascript
386
400
importVuefrom'vue';
387
401
importVCalendarfrom'v-calendar';
388
402
import'v-calendar/lib/v-calendar.min.css';
389
403
390
404
// Use v-calendar, v-date-picker & v-popover components
391
-
Vue.use(VCalendar);
405
+
Vue.use(VCalendar, {
406
+
firstDayOfWeek:2, // Monday
407
+
..., // ...other defaults
408
+
});
409
+
410
+
```
411
+
412
+
#### 2B. Components Method
413
+
414
+
Or, you can just import and use the calendar if you don't need the `v-date-picker` or `v-popover` components. Keep in mind that `setupCalendar` still needs to be called (passing optional defaults) using this method.
// Remember to setup calendar (passing in defaults if needed)
422
+
setupCalendar({
423
+
firstDayOfWeek:2, // Monday,
424
+
..., // ...other defaults
425
+
});
426
+
427
+
// Register component(s)
428
+
Vue.component('v-calendar', Calendar);
392
429
```
393
430
394
431
### 3 Reference in your component templates
@@ -474,6 +511,7 @@ Vue.use(VCalendar, {
474
511
475
512
| Property Name | Type | Description | Default |
476
513
| ------------- | ---- | ----------- | ------- |
514
+
|`locale`| String | Locale identification in [*language-region*](https://lingohub.com/documentation/developers/supported-locales/language-designators-with-regions/) format. Not all regions supported. |`undefined`|
477
515
|`componentPrefix`| String | Custom prefix to use for plugin components. Replace if `v-calendar` and `v-date-picker` interfere with other component libraries. |`"v"`|
478
516
|`firstDayOfWeek`| Number | Day number for the first day of the week (1: Sun - 7: Sat) |`1`|
479
517
|`formats`| Object | Formats to use when display and parsing dates for various calendar sections | Reference code |
0 commit comments