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

Hoyt

Last update: Sep 9, 2022

Related tags

Calendar Vue-MobCal

Overview

vue-mobcal

Example

CDN example

Install

npm install vue-mobcal --save

# or
yarn add vue-mobcal

Global Registration

import Vue from 'vue'
import VueMobCal from 'vue-mobcal'
import 'vue-mobcal/dist/vue-mobcal.css'

Vue.use(VueMobCal)

Local Registration

import { VueMobCal } from 'vue-mobcal'
import 'vue-mobcal/dist/vue-mobcal.css'

export default {
  components: {
    VueMobCal
  }
}

CDN

<link rel="stylesheet" href="https://unpkg.com/vue-mobcal/dist/vue-mobcal.css"/>
<script type="text/javascript" src="path/to/vue.min.js">script>
<script type="text/javascript" src="https://unpkg.com/vue-mobcal/dist/vue-mobcal.umd.min.js">script>

<div id="app">
    <vue-mob-cal v-model="currentDate" :mode.sync="mode">
    vue-mob-cal>
div>
<script type="text/javascript">
  new Vue({
      el: '#app',
      data: {
          mode: 'month',
          currentDate: new Date()
      }
  })
script>

Usage

Basic Usage

<vue-mob-cal v-model="currentDate" :mode.sync="mode" color="#007873" />

export default {
  data() {
    return {
      currentDate: new Date(),
      mode: 'month'
    }
  }
}

Custom Slot

<vue-mob-cal v-model="currentDate" :mode.sync="mode">
  <template #left>
    <span>LeftBtnspan>
  template>
  <template #right>
    <span>RightBtnspan>
  template>
  <template #title>
    <span>Titlespan>
  template>
  <template #week="props">
    <span>周{{ props.day | week }}span>
  template>
  <template #day="props">
    <span v-if="props.util.isToday(props.date)">今span>
    <span v-else>{{ props.date.getDate() }}span>
    
    <span v-if="props.date.getDay() === 1" class="mindot" style="background-color: red;">span>
    <span v-if="props.date.getDay() === 6" class="mindot">span>
    
    <span class="dot">span> 
  template>
vue-mob-cal>

export default {
  data() {
    return {
      currentDate: new Date(),
      mode: 'month'
    }
  },
  filters: {
    week (day) {
      const days = ['一', '二', '三', '四', '五', '六', '日']
      day = day || 7
      return days[day - 1]
    }
  }
}

API

Props

Attribute	Description	Type	Default
value	Current calendar date	Date	new Date()
mode	Display mode, support monthly or weekly display, params monthweek	String	month
color	Theme color	String	#007ad3

Slot

Name	Description	SlotProps
title	Custom title	{ util: object }
week	Custom Week Title	{ day: number } 0-6
left	Custom left icon	-
right	Custom right icon	-
day	Custom Calendar Item	{ date: date, util: object }
- util	Common method	{ isToday: function, isWorkDay: function, isOtherMonth: function, isActiveDay: function, onPrev: function, onNext: function, onChangeMode: function }

Event

Event	Description	Arguments
onPrev	Change to last month/week	-
onNext	Change to next month/week	-
onChangeMode	Toggles display mode or set display mode	mode:!string

Changelog

Detailed changes for each release are documented in the release notes.

License

MIT

You might also like...

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

425 Dec 27, 2022

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

📅 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