vue2-week-calendar

A Week (years, days) Component For Vue2

Example

Install

$ npm install vue2-week-calendar --save

Usage

<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>

Props

Css vars

<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;
  }

Slots

<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>

Dev

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Compiles and minifies for production library

yarn build-lib

Run your unit tests

yarn test:unit

Lints and fixes files

yarn lint