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

Related tags

Calendar Vue-MobCal
Overview

     

vue-mobcal

vue GitHub stars npm GitHub issues license

NPM

Example

image.png


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

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 [email protected] 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.

📅 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
Hoyt
Hoyt
Contra - Combines GitHub and GitLab contributions calendar to create a single calendar

Welcome to Contra ?? Combines GitHub and GitLab contributions calendar to create

Ahmet Korkmaz 10 Dec 29, 2022
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