Vue calendar easy

Overview

vue-calendar-easy

install

npm install vue-calendar-easy --save

Usage

">
<template>
  <vue-calendar v-model="value" />
</template>

<script>
import VueCalendar from 'vue-calendar-easy'

export default {
  components: {
    VueCalendar
  },
  data () {
    return {
      value: null // Default selected date
    }
  }
}
</script>

Options

Props

Props Type Default Description
value Date null Default selected date
daterange Boolean null Optional date range
begin_date.sync Date null When :daterange="true" is true, default start date
end_date.sync Date null When :daterange="true" is true, default end date
lazy Boolean true When :daterange="true" is true, allow lazy loading
one_calendar Boolean false When :daterange="true" is true, display a single calendar
separator String ~ Separator symbol
defaultNextMonth Boolean true In multi-calendar mode, true shows the current month and next month, false shows last month and current month
picker String date Calendar type, "date" / "month" / "year"
years Number 20 Year range
year_start Number 2000 Start year
rules Array< String > [] Built-in filtering method, optional value please see below.
custom_filter Function - Please see below.
mark_today Boolean true Mark today
calendar_width String '300px' Calendar width
calendar_height String '250px' Calenfar height
header_height String '40px' Header height
no_border Boolean false Display border
format String yyyy-MM-dd Get formatted value
/*
 * @param date  日期
 * @param type  日历类型 [date, month, year]
 * @param index 索引 (默认为0,当 daterange 时为 0 或 1)
 */
function custom_filter (date, type, index) {
  // 返回 true 则禁用
  return Boolean
}

const rules = [
  'fromToday', // 从今天起(包含今天)
  'fromTomorrow', // 从明天起(不包含今天)
  'untilToday', // 直至今天(包含今天)
  'untilTomorrow', // 直至明天(不包含今天)
  'unableSun', // 禁用周日
  'unableMon', // 禁用周一
  'unableTues', // 禁用周二
  'unableWed', // 禁用周三
  'unableThur', // 禁用周四
  'unableFri', // 禁用周五
  'unableSat' // 禁用周六
]

event

event Description Callback Arguments
complete Callback when the date changes date(type: object) / date_range(type: object), format_date(type: string)

slot

slot Description Slot variables
default Custom Calendar in_range< Boolean >, year < Number >, month < Number >, day < Number >
month Custom Month Calendar year < Number >, month < Number >
year Custom Year Calendar year < Number >
You might also like...
A Vue JS full calendar, no dependency, no BS. :metal:

vue-cal A Vue JS full calendar, no dependency, no BS. 🤘 Installation npm i vue-cal Vue 3 npm i vue-cal@next Demo & Documentation antoniandre.github

A full 12-Month view calendar made by vue.js.
A full 12-Month view calendar made by vue.js.

English | 繁體中文 There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem. 🔥 12

Simple and clean calendar written in Vue.js
Simple and clean calendar written in Vue.js

Vuelendar Simple and clean calendar written in Vue.js. Check out full Vuelendar's documentation here. Features Select single date Select range of date

Full Calendar based on Vue.js

Vue Spring Calendar It's a Vue based component which provides the functionality of a full-calendar that shows daily events. Installation npm install v

A full 12-Month view calendar made by vue.js.
A full 12-Month view calendar made by vue.js.

A full 12-Month view calendar made by vue.js.

Vue Mobile Calendar - 基于 Vue2的移动端日历插件
Vue Mobile Calendar - 基于 Vue2的移动端日历插件

Vue Mobile Calendar - 基于 Vue2的移动端日历插件,仿钉钉签到日历,vue 钉钉日历, 自适应,周月切换

📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+
📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+

📅 A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...

a horizontal calendar component for Vue.js

a horizontal calendar component for Vue.js

A simple and sweet vue.js calendar
A simple and sweet vue.js calendar

vue-sweet-calendar A simple and sweet vue.js calendar Features Showing Multiple-Events Fully customizable How to install npm install vue-sweet-calenda

Owner
Allen
Allen
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

Sunny Wang 1.5k Dec 18, 2022
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 762 Jan 3, 2023
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Nathan Reyes 3.7k Dec 31, 2022
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 485 Dec 18, 2022
Vue.js wrapper for TOAST UI Calendar

Vue TOAST UI Calendar A Vue.js wrapper for TOAST UI Calendar Installation npm install --save tui-calendar @lkmadushan/vue-tuicalendar Usage Example Tr

Kalpa Madushan Perera 129 Aug 13, 2022
Toast UI Calendar for Vue

TOAST UI Calendar for Vue This is Vue component wrapping TOAST UI Calendar. ?? Table of Contents Collect statistics on the use of open source Install

NHN 195 Dec 6, 2022
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

Manuk 425 Dec 27, 2022