Vue calendar card

shuangyang

Last update: Sep 8, 2021

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

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