Home

Awesome

vue3-calendar

vue 3 calendar, datepicker component which supported lunar or date event

<p align="center"> <a href="http://blog.w3cub.com/vue3-calendar/?x-page=github"> Live Demo >> </a> <br> <br> <a href="https://github.com/icai/vue3-calendar"> <img src="https://img.shields.io/github/stars/icai/vue3-calendar.svg?style=social&label=Star" alt=""> </a> <a href="https://github.com/icai/vue3-calendar"> <img src="https://img.shields.io/github/forks/icai/vue3-calendar.svg?style=social&label=Fork" alt=""> </a> <a href="https://github.com/icai/vue3-calendar"> <img src="https://img.shields.io/github/watchers/icai/vue3-calendar.svg?style=social&label=Watch" alt=""> </a> <br> <br> <a href="https://github.com/icai/vue3-calendar/issues"> <img src="https://img.shields.io/github/issues/icai/vue3-calendar.svg?style=flat-square" alt=""> </a> <a href="https://github.com/icai/vue3-calendar/issues"> <img src="http://isitmaintained.com/badge/resolution/icai/vue3-calendar.svg?style=flat-square" alt=""> </a> <a href="https://github.com/icai/vue3-calendar/graphs/contributors"> <img src="https://img.shields.io/github/contributors/icai/vue3-calendar.svg?style=flat-square" alt=""> </a> <br> <a href="https://www.npmjs.com/package/vue2-slot-calendar"> <img src="https://img.shields.io/npm/l/vue2-slot-calendar.svg?style=flat-square" alt=""> </a> <a href="https://www.npmjs.com/package/vue2-slot-calendar"> <img src="https://img.shields.io/npm/v/vue2-slot-calendar.svg?style=flat-square" alt=""> </a> <a href="https://www.npmjs.com/package/vue2-slot-calendar"> <img src="https://img.shields.io/npm/dm/vue2-slot-calendar.svg?style=flat-square" alt=""> </a> <a href="https://www.npmjs.com/package/vue2-slot-calendar"> <img src="https://img.shields.io/npm/dt/vue2-slot-calendar.svg?style=flat-square" alt=""> </a> <br> <a href="https://www.npmjs.com/package/vue3-slot-calendar"> <img src="https://img.shields.io/npm/l/vue3-slot-calendar.svg?style=flat-square" alt=""> </a> <a href="https://www.npmjs.com/package/vue3-slot-calendar"> <img src="https://img.shields.io/npm/v/vue3-slot-calendar.svg?style=flat-square" alt=""> </a> <a href="https://www.npmjs.com/package/vue3-slot-calendar"> <img src="https://img.shields.io/npm/dm/vue3-slot-calendar.svg?style=flat-square" alt=""> </a> <a href="https://www.npmjs.com/package/vue3-slot-calendar"> <img src="https://img.shields.io/npm/dt/vue3-slot-calendar.svg?style=flat-square" alt=""> </a> <br> <br> </p>

vue 2.x version

vue2-slot-calendar

Install

vue 2.x

$ pnpm i vue2-slot-calendar@2.x.x --save

vue 3.x


$ pnpm i vue3-slot-calendar@3.x.x --save

Import using module



// js file
import 'vue3-slot-calendar/lib/calendar.min.css';
import calendar from 'vue3-slot-calendar/lib/calendar';

// vue file
import Calendar from 'vue3-slot-calendar';


Import using script tag


<link rel="stylesheet" href="../node_modules/vue3-slot-calendar/lib/calendar.min.css" >
<script src="../node_modules/vue3-slot-calendar/lib/calendar.min.js"></script>

Also see the demo file, example/demo.html

I18n support

currently, provide window.VueCalendarLang function hook to change your lang

  translations(lang) {
    lang = lang || "en";
    let text = {
      daysOfWeek: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      limit: "Limit reached ({{limit}} items max).",
      loading: "Loading...",
      minLength: "Min. Length",
      months: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],
      notSelected: "Nothing Selected",
      required: "Required",
      search: "Search"
    };
    return window.VueCalendarLang ? window.VueCalendarLang(lang) : text;
  },

locale files

import cn from 'vue3-slot-calendar/lib/locale/zh-CN'
import en from 'vue3-slot-calendar/lib/locale/en-US'
import tw from 'vue3-slot-calendar/lib/locale/zh-TW'

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:4000
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run all tests
npm test

Screenshot

Usage

<calendar
  v-model="value"
  :disabled-days-of-week="disabled"
  :format="format"
  :clear-button="clear"
  :placeholder="placeholder"
  :pane="2"
  :has-input="false"
  :on-day-click="onDayClick2"
  :special-days="_dateMap"
></calendar>

Use slot to render async data

<calendar
  class="event-calendar"
  v-model="value"
  :disabled-days-of-week="disabled"
  :format="format"
  :clear-button="clear"
  :placeholder="placeholder"
  :pane="2"
  :has-input="false"
  :on-day-click="onDayClick3"
  :change-pane="changePane"
>
  <div v-for="evt in events" :slot="evt.date">
    ${{evt.content}} <i :class="{low : evt.low}" v-if="evt.low">ā†“</i>
  </div>
</calendar>

Range Hover Status

<calendar
  v-model="value"
  :disabled-days-of-week="disabled"
  :format="format"
  :clear-button="clear"
  :placeholder="placeholder"
  :pane="2"
  :range-bus="getBus"
  :range-status="1"
></calendar>

<calendar
  v-model="value"
  :disabled-days-of-week="disabled"
  :format="format"
  :clear-button="clear"
  :placeholder="placeholder"
  :pane="2"
  :range-bus="getBus"
  :range-status="2"
></calendar>

Input Slot

    <calendar v-model="value" showDateOnly @drawDate="onDrawDate" :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder">
      <template #input="scope">
        <div class="mb-1">
          <label for="exampleFormControlInput1" class="form-label">Input slot focus to trigger</label>
          <input type="text" class="form-control form-control-lg" id="exampleFormControlInput1"  @focus="scope.inputClick" v-model="scope.inputValue" placeholder="focus to trigger">
        </div>
      </template>
    </calendar>

Props

Options/Props

NameTypeDefaultDescription
v-modelString''Value of the input DOM
widthString'200px'Width of the input DOM
formatStringMMMM/dd/yyyyThe date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
disabled-days-of-weekArrayDays of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated.
clear-buttonBolleanfalseIf true shows an Ɨ shaped button to clear the selected date. Usefull in forms where date entry is optional.
placeholderStringPlaceholder to put on the input field when no date (null or empty) is set
hasInputBooleantrueDefault is has-input style, if don't have input will show pane directly
paneNumber1pane count
borderWidthNumber2This value is for calculating the pane width
onDayClickFunctionOnly for hasInput set false
specialDaysObjectTo repalce the day text
changePaneFunctionFor pane change parameter (year, month, pane) month[0,11], demo /src/modules/Docs.vue
rangeBusFunctionshould return new Vue() as sibling component communication events bus
rangeStatusNumber0Default is disabled range hover effect, currently only support [0,1,2] 1 will communicate with 2
onDrawDateFunctionDrawDate Function allowSelect to update date cell style
showDateOnlyBooleanfalseshow date pane only
transferBooleanfalsetransfer popup to document.body
elementIdStringelementId for label tag for attribute
firstDayOfWeekNumber0first day of the week, default sunday, [0,6]

Events

NameDescription
drawDatedrawDate Event
  props: {
    modelValue: {
      type: [String, Date]
    },
    format: {
      default: 'MM/dd/yyyy'
    },
    firstDayOfWeek: {
      // sunday
      default: 0
    },
    disabledDaysOfWeek: {
      type: Array,
      default () {
        return []
      }
    },
    width: {
      type: String,
      default: '200px'
    },
    clearButton: {
      type: Boolean,
      default: false
    },
    inputClasses: {
      type: String,
      default: ''
    },
    lang: {
      type: String,
      default: navigator.language
    },
    placeholder: {
      type: String
    },
    hasInput: {
      type: Boolean,
      default: true
    },
    pane: {
      type: Number,
      default: 1
    },
    borderWidth: {
      type: Number,
      default: 2
    },
    onDayClick: {
      type: Function,
      default () {}
    },
    changePane: {
      type: Function,
      default () {}
    },
    specialDays: {
      type: Object,
      default () {
        return {}
      }
    },
    rangeBus: {
      type: Function,
      default () {
        // return new Vue()
      }
    },
    rangeStatus: {
      type: Number,
      default: 0
    },
    // onDrawDate: {
    //   type: Function,
    //   default () {}
    // },
    maxDate: {
      type: String
    },
    minDate: {
      type: String
    },
    showDateOnly: {
      type: Boolean,
      default: false
    },
    transfer: {
      type: Boolean,
      default: false
    },
    elementId: [String]
  }

Methods

eventbus

import { eventbus } from 'vue3-slot-calendar/lib/utils/event'

eventbus.$on('drawDate', (date) => {
  console.log(date)
})

transfer directive

transfer directive like <Teleport>

import transfer from 'vue3-slot-calendar/lib/directives/transfer'

directives: {
  transfer
}

Credits

Inspired by vue-strap datepicker component.

For detailed explanation on how things work, checkout the guide and docs for vue-loader.