Vue calendar card

Related tags

Calendar components
Overview

vue-calendar-card

Use

  • CDN

    calendar-panel
    ">
    >
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>calendar-paneltitle>
      <link rel="stylesheet" href="  https://cdn.jsdelivr.net/npm/vue-calendar-card@latest/css/main.css">
    head>
    <body>
      <div id="app">
        <vue-calendar-card  type="single" v-model="temp" />
      div>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
      <script src="https://cdn.jsdelivr.net/npm/vue-calendar-card@latest/index.js">script>
      <script>
        new Vue({
          el: '#app',
          data: function () {
            return {
              temp: null
            }
          }
        })
      script> body> html>
  • NPM

    yarn add vue-calendar-card -S
    import 'vue-calendar-card/css/main.css'
    import vueCalendarCard from 'vue-calendar-card'
    Vue.use(vueCalendarCard) / Vue.use(vueCalendarCard.DateTime)

修改主题

用法参考element-ui的使用方法

// 在sass文件中使用 
$--color-primary: #744DFE;
@import 'vue-calendar-card/theme/dateTime/index.scss'

属性

属性 说明 可选 默认 类型
type 日历的类型 'single' 'dateInterval' String
v-model/value 绑定的值 值为Date对象 new Date() Date/Date[]
hasPrev 是否显示上个月上一年的按钮 false true Boolean
hasNext 是否显示下一年的按钮 false true Boolean
showYear.sync 想要显示的年份 2021 new Date().getFullYear() Number
showMonth.sync 想要显示的月份 1/2/3... new Date().getMonth() Number

双月份的使用

使用

">
<div id="app">
    <vue-calendar-card-range  v-model="temp" />
div>

属性

属性 说明 可选 默认 类型
v-model/value 绑定的值 值为Date对象 [] Date[]

License

MIT

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
shuangyang
Do romantic things at a romantic age. 浪漫至死不渝!!!
shuangyang
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