# Ethiopian Calendar Vue Component
*Amharic language version*
*English language version*
A Vue 2 component for displaying and selecting dates in the Ethiopian calendar. Supports both Amharic and English languages with customizable styling.
## Installation
```bash
npm install vue-ethiopian-calendar
# or
yarn add vue-ethiopian-calendar
```
## Basic Usage
### 🌍 Global Registration (Recommended for app-wide usage)
Register the component globally in your main application file:
```javascript
// main.js
import Vue from 'vue';
import EthiopianCalendar from 'vue-ethiopian-calendar';
import 'vue-ethiopian-calendar/dist/EthiopianCalendar.css';
// Register globally - available in all components
Vue.component('EthiopianCalendar', EthiopianCalendar);
new Vue({
render: h => h(App),
}).$mount('#app');
```
Now you can use it anywhere in your app without importing:
```vue
```
### 🎯 Specific Component Usage
Import directly in your Vue component:
```vue
Select Ethiopian Date
import EthiopianCalendar from 'vue-ethiopian-calendar';
import 'vue-ethiopian-calendar/dist/EthiopianCalendar.css';
export default {
name: 'MyDatePicker',
components: {
EthiopianCalendar
},
data() {
return {
selectedDate: {year: 2014, month: 7,day: 1}
}},
methods: {
logDate({ ethiopianDate, gregorianDate,formatted }) {
console.log('Ethiopian:', ethiopian);
console.log('Gregorian:', gregorian);
console.log('formatted:', formatted);
}
}
};
.date-picker {
max-width: 400px;
margin: 0 auto;
}
```
## Available Props
| Prop | Type | Default | Description |
|---------------|--------|------------|-------------|
| `language` | String | "am" | Calendar language (`"am"` for Amharic or `"en"` for English) |
| `scope` | String | `"yyyy-mm-dd"` | Selection scope ("yyyy", "yyyy-mm", or "yyyy-mm-dd") |
| `value` | String/Object | `null` | Initial date value (e.g. "2014-07-05" or {year: 2014, month: 7, day: 5}) |
| `primaryColor` | String | `"#ffffff"` …