A Week (years, days) Component For Vue2
$ npm install vue2-week-calendar --save
<script>
import WeekCalendar from 'vue2-week-calendar';
export default {
components: { WeekCalendar },
data() {
return {
mydate: new Date(),
};
},
};
</script>
<template>
<div>
<WeekCalendar v-model="mydate"></WeekCalendar>
</div>
</template>
Name | Description |
---|---|
month-format | "string" type format (date-fns formats) |
years-format | "string" type format (date-fns formats) |
<WeekCalendar class="custom-week-calendar" v-model="mydate"></WeekCalendar>
.custom-week-calendar {
--week-calendar-accent-color: #599455;
--week-calendar-accent-text-color: #f5f5f5;
--week-calendar-border-color: whitesmoke;
--week-calendar-border-active-radius: 8px;
--week-calendar-icon-color: #888;
}
Name | Description |
---|---|
months | custom months template |
years | custom years template |
days | custom days template |
<WeekCalendar v-model="mydate">
<template v-slot:years="{ years, next, prev, isEqual, change }">
{{ years }}
{{ isEqual(mydate, years[0]) }}
<button @click="prev">Prev</button>
<button @click="next">Next</button>
<button @click="() => change(years[0])">Change 0 index</button>
</template>
<template v-slot:months="{ months, next, prev, isEqual, change }">
{{ months }}
{{ isEqual(mydate, months[0]) }}
<button @click="prev">Prev</button>
<button @click="next">Next</button>
<button @click="() => change(months[0])">Change 0 index</button>
</template>
<template v-slot:days="{ days, next, prev, isEqual, change }">
{{ days }}
{{ isEqual(mydate, days[0]) }}
<button @click="prev">Prev</button>
<button @click="next">Next</button>
<button @click="() => change(days[0])">Change 0 index</button>
</template>
</WeekCalendar>
yarn install
yarn serve
yarn build
yarn build-lib
yarn test:unit
yarn lint