calendar range component for VueJs
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
test/unit
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
LICENSE
README.md
index.js
package-lock.json
package.json

README.md

vue-calendar-range

This is a calendar range which is based on VueJs 2.5+ and requires modern browsers. Live Demo.

Installation

Install npm package npm install vue-calendar-range --save

Declare dependency in main.js

import VueCalendarRange from 'vue-calendar-range';
Vue.use(VueCalendarRange);

Usage

When user picks date, calendar will dispatch input event. Event will contain start and end dates.

<template>
  <div id="app">
    <calendar-range
      v-model="calendarValues"
      class="calendar-range"
      :range-start="from"
      :range-end="to"
      :monday-first="mondayFirst"
    ></calendar-range>
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
      // calendarValues will consist of start and end dates
      // @param {Date} start
      // @param {Date} end
      calendarValues: undefined,

      // if value is undefined, calendar will use date 6 months before current
      from: new Date(2018, 0, 1),

      // if value is undefined, calendar will use date 6 months after current
      to: new Date(2019, 0, 1),

      // if value is undefined, calendar will use false
      // if value equals true, calendar will place monday as a first week day
      mondayFirst: true,
    };
  },
};
</script>

<style scoped>
.calendar-range {
  /* override base border color */
  --day-base-color: green;

  /* it will override background and border colors if cursor hovers date */
  --day-hover-color: green;

  /* override background and border colors of selected start and end dates */
  --day-select-color: green;

  /* override background and border colors of a range between start and end dates */
  --day-between-color: green;

  /* override background and border colors of current date */
  --day-current-color: green;

  /* override text and border colors of disabled date */
  --day-disable-color: green;
}
</style>

If you need to search a specified date in DOM tree, you can use data-time attribute, which represents date.getTime() call.