vue-ethiopian-calendar
Version:
A Vue 2 component for Ethiopian (Amete Alem) calendar with Gregorian date conversion
175 lines (136 loc) • 4.82 kB
Markdown
# 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
<template>
<EthiopianCalendar @date-selected="handleDateChange" language="am"/>
</template>
```
### 🎯 Specific Component Usage
Import directly in your Vue component:
```vue
<template>
<div class="date-picker">
<h3>Select Ethiopian Date</h3>
<EthiopianCalendar
language="am"
@date-selected="logDate"
scope="yyyy-mm-dd"
v-model="selectedDate"
/>
</div>
</template>
<script>
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);
}
}
};
</script>
<style>
.date-picker {
max-width: 400px;
margin: 0 auto;
}
</style>
```
## 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"` | Primary theme color |
| `hoverColor` | String | `"#ffe08a"` | Hover color |
| `todayColor` | String | `"#1fe08a"` | Today indicator color |
| `selectedColor` | String | `"#ccdefe"` | Selected date color |
| `textColor` | String | `"#2d3748"` | Text color |
| `backgroundColor`| String | `"#ffffff"` | Background color |
| `borderColor` | String | `"#ffffff"` | Border color |
| `headerBg` | String | `"#f7fafc"` | Header background color |
| `weekdayColor` | String | `"#718096"` | Weekday text color |
| `fontStack` | String | System fonts | Custom font stack |
## Events
| Event | Description | Payload |
|-------|-------------|---------|
| `date-selected` | Emitted when date is selected | `{ ethiopianDate: {year, month, day}, gregorianDate: {year, month, day}, formatted: string }` |
| `input` | Emitted for v-model support | Current selected date |
| `month-changed` | Emitted when month changes | `{ year: number, month: number }` |
| `year-changed` | Emitted when year changes | `number` (year) |
## Example with All Props
```vue
<EthiopianCalendar
@date-selected="handleDateSelection"
language="am"
scope="yyyy-mm"
v-model="selectedDate"
primaryColor="#4a86e8"
hoverColor="#356dca"
todayColor="#ffe08a"
selectedColor="#4a86e8"
textColor="#2d3748"
backgroundColor="#ffffff"
borderColor="#e2e8f0"
headerBg="#f7fafc"
weekdayColor="#718096"
fontStack="'Custom Font', sans-serif"
/>
```
## Navigation Methods
- **Month navigation** (`◀ ▶` buttons)
- **Year navigation** (`« »` buttons)
- **Date selection** (clicking a day)
## Styling Notes
- All colors can be customized via props.
- Responsive design for mobile devices.
## TypeScript Support
The component includes TypeScript definitions for all props and emitted events.
## Browser Support
✅ Chrome
✅ Firefox
✅ Safari
✅ Edge
✅ IE11 (with polyfills)
---
### Author
**Dagem Getachew Asefa**
### License
[MIT](LICENSE)