Skip to content
No description, website, or topics provided.
CSS Vue HTML JavaScript
Branch: master
Clone or download
Latest commit a17596f Oct 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css gh-pages Oct 3, 2019
js 👌 IMPROVE: UX css Oct 5, 2019
public init Sep 17, 2019
src Added shadow without hover too Oct 5, 2019
.gitignore init Sep 17, 2019
CONTRIBUTING.md TEST: Added Contributing.md Oct 4, 2019
LICENSE 📄 License Added Oct 4, 2019
README.md 👌 IMPROVE: npm package link Oct 8, 2019
babel.config.js init Sep 17, 2019
demo.png Readme updated Oct 3, 2019
favicon.ico gh-pages Oct 3, 2019
index.html 📦 NEW: Demo UX Oct 5, 2019
package-lock.json 1.6.1 Oct 9, 2019
package.json 1.6.1 Oct 9, 2019
vue.config.js Css Extract false Oct 3, 2019

README.md

Vue Baremetrics Calendar

A Vue.js wrapper for the beautiful date-range picker made by the Baremetrics team.


The Vue-Baremetrics date range picker is a simplified solution for selecting both date ranges and single dates all from a single calender view. With a revamped minimalistic redesign.

Redesigned and Wrapped for Vue.js by Divyansh Tripathi

View a demo

NPM Package

Installation

npm i --save vue2-baremetrics-calendar

Usage

Global Usage

Global Registeration via Vue.use() method.

// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// import the plugin
import Calendar from "vue2-baremetrics-calendar";

Vue.config.productionTip = false;

// use the plugin
Vue.use(Calendar);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

Once registered you can use the component in its default settings with as follows:-

<Calendar
  type="double"
  @rangeEdit="processDateRange()"
  elementName="doubleRangePicker"
/>

<Calendar
  type="single"
  @dateEdit="processDate()"
  elementName="singleRangePicker"
/>

REMEMBER elementName is the only required prop and it should be different for each datepicker in your component

<template>
  <div id="app">
    <Calendar
      @rangeEdit="processOutput"
      type="double"
      elementName="otherRangePicker"
    />

    <Calendar
      @dateEdit="processOutput"
      type="single"
      elementName="primaryRangePicker"
    />
  </div>
</template>

<script>
  import Calendar from "./components/Calendar";
  export default {
    components: {
      Calendar
    },
    methods: {
      processOutput(output) {
        console.log(output);
      }
    }
  };
</script>

Events Emitted -

Name Type Output Description
dateEdit double [Timestamp(begin), Timestamp(end)] Array of start date and end date
dateEdit single Timestamp Selected date Timestamp

Base Calendar Props

  • elementName *required [string]
    • DOM object of the calendar div you're working on
  • earliest_date [date YYYY-MM-DD]
    • The earliest date to show in the calendar
  • latest_date [date YYYY-MM-DD]
    • The latest date to show in the calendar
  • format [object]
    • Object containing formatting strings for.. you guessed it.. formatting your dates
      format: {
        input: 'MMMM D, YYYY', // Format for the input fields
        jump_month: 'MMMM', // Format for the month switcher
        jump_year: 'YYYY' // Format for the year switcher
      }
  • days_array [array]
    • Array of the 7 strings you'd like to represent your days in the calendar
    days_array: ["S", "M", "T", "W", "T", "F", "S"];

Single Calendar Props

  • current_date [date YYYY-MM-DD]
    • The date to start the calendar on
  • required [boolean]
    • Toggle if this field must have always have a valid selected date
  • placeholder [string]
    • Set placeholder text (note this will only apply if the required key is set to false). The default will be whatever moment date format you're using. (i.e. 'M/D/YYYY')

Double Calendar Props

  • start_date [date YYYY-MM-DD]
    • The date to start the selection on for the calendar
  • end_date [date YYYY-MM-DD]
    • The date to end the selection on for the calendar
  • same_day_range [boolean]
    • Allow a range selection of a single day
  • format [preset key in format object] // see above
    • The double calendar adds the preset key to the format object for formatting the preset dates in the preset dropdown
  • presets [boolean] or [object]
    • If you don't want to show the preset link just set this to false otherwise the default is true which will just give you a basic preset of.. yep.. presets. BOOM!
    • Otherwise, if you want to customize it up you can include an array of preset objects. Something like:
    presets: [
      {
        label: "Last month",
        start: moment()
          .subtract(1, "month")
          .startOf("month"),
        end: moment()
          .subtract(1, "month")
          .endOf("month")
      },
      {
        label: "Last year",
        start: moment()
          .subtract(1, "year")
          .startOf("year"),
        end: moment()
          .subtract(1, "year")
          .endOf("year")
      }
    ];
You can’t perform that action at this time.