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 >

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

982 Dec 29, 2022

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

114 Dec 13, 2022

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

76 Oct 5, 2022

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

40 Jun 8, 2022

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

90 Mar 23, 2021

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

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

12 Sep 9, 2022

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

434 Jan 3, 2023

a horizontal calendar component for Vue.js

37 Aug 10, 2022

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