zx-vue-calendar (Vue2.x.x and Vue3.x.x), zx-react-calendar

Overview

zx-calendar

zx-calendar, zx-vue-calendar (Vue2.x.x and Vue3.x.x), zx-react-calendar

Downloads Version License

https://capricorncd.github.io/calendar/dist/index.html

Vue docs and example

Vue 2.x.x

https://capricorncd.github.io/calendar/dist/vue.html

Vue 3.x.x

https://capricorncd.github.io/calendar/dist/vue3.html

React docs and example

https://capricorncd.github.io/calendar/dist/react.html

简体中文

Browser Support

IE10+ (When it is used in IE browser, Polyfill needs to be introduced)

Install

# npm
npm install zx-calendar -S

# yarn
yarn add zx-calendar

Setup and Dev

# setup
npm install

# start default demo
npm run dev
# start vue2.x.x demo
npm run vue
# start vue3.x.x demo
npm run vue3
# start react demo
npm run react

Usage

import ZxCalendar from 'zx-calendar'

const options = {}

// create an instance
const zxCalendar = new ZxCanlendar(options)

// on change
zxCalendar.on('change', data => {
  console.log(data)
})

// cancel button on click
zxCalendar.on('cancel', () => {
  // ...
})

// on error
zxCalendar.on('error', err => {
  console.error(err)
})

Options

// options
const options = {
  // element selector or element  
  el: '#app',
  // date/month/year
  type: 'date',
  // zh/jp/en that week and button text
  lang: 'zh',
  // 星期一(省略形式: 一)
  isFullWeek: false,
  // title formatter of header
  // type date: yyyy/MM
  // type month: yyyy
  // type year: yyyy-yyyy
  titleFormatter: 'yyyy/MM',
  // item suffix, 日/月/年
  itemSuffix: null,
  // default selected date
  // yyyy-MM-dd, yyyy/MM/dd, yyyy, timestamp, Array
  defaultDate: null,
  // selectable date range array
  // [startDate, endDate]
  dateRange: [],
  // show holiday info
  showHoliday: false,
  // function, custom item handler
  // return object {text: string, value: number, fullText: string, disabled: boolean, ...}
  itemFormatter: null,
  // Selection mode: single/multiple/range
  mode: 'single',
  // language package
  langPackage: {
    confirmButton: 'ok',
    cancelButton: 'cancel',
    clearButton: 'clear',
    weeks: ["日", "一", "二", "三", "四", "五", "六"]
  },
  // footer buttons
  // show clear, cancle and confirm button when mode=multiple/range
  footerButtons: ['clear', 'cancel', 'confirm'],
  // only show confirm button
  // footerButtons: ['confirm'],
  // change button display order
  // footerButtons: ['confirm', 'clear', 'cancel'],
  // ...
  // justify-content
  footerButtonAlign: 'flex-end',
  // hide buttons of footer when mode is multiple/range
  hideFooter: false,
}

Vue

https://capricorncd.github.io/calendar/dist/vue.html

">
<template>
  <zx-vue-calendar 
    v-model="value" 
    @change="handleChange"
    @cancel="handleCancel"
    @error="handleError" />
template>

<script>
/** Vue 2.x.x */
import { ZxVueCalendar } from 'zx-calendar/lib/vue-calendar'

export default {
  components: {
    ZxVueCalendar
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleChange(value, orignal) {
      console.log(value, orignal)
    },
    handleCancel() {
      console.log('button cancel on click!')
    },
    handleError(err) {
      console.error(err)
    }
  }
}
script>

Vue 3.x.x

` } Vue.createApp(App).mount('#app')">
/** Vue 3.x.x */
import { ZxVueCalendar } from 'zx-calendar/lib/vue3-calendar'

const App = {
  components: {
    ZxVueCalendar
  },
  data() {
    return {
      date: '1990/09/12'
    }
  },
  template: `
    
  

{{ date }}

` } Vue.createApp(App).mount('#app')
Props Type Default Description
v-model string, timestamp, array '' Date selected by default
* value string, timestamp, array '' (Only for Vue2.x.x), Date selected by default
* model-value string, timestamp, array '' (Only for Vue3.x.x), Date selected by default
date-range array [] Set selectable date range, [startDate, endDate]
footer-buttons array undefined
footer-button-align string flex-end Optional values: flex justify-content values
format string '' Example: yyyy/MM/dd
hide-footer boolean false hide footer button wrapper
is-full-week boolean false Monday: isFullName: Monday, default: Mon
item-formatter function undefined custom item handler, return an object {text: string, value: number, fullText: string, disabled: boolean, ...}
item-suffix string '' Example: date month: , year:
lang string en Optional values: en/zh/jp
lang-package object undefined
mode string single Optional values: single/multiple/range
show-holiday boolean false show holiday info
type string date Optional values: date/month/years
title-formatter string date yyyy/MM month: yyyy, year: yyyy-yyyy Set title display format

React

https://capricorncd.github.io/calendar/dist/react.html

import React, { Component } from 'react'
import { ZxReactCalendar } from 'zx-calendar/lib/react-calendar'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      date: '2020/09/05'
    }
  }

  handleChange() {
    console.log.apply(null, arguments)
  }

  render() {
    return <div>
      <ZxReactCalendar
        value={this.state.date} 
        change={(...args) => this.handleChange(...args)}/>
    </div>
  }
}

Methods

setDate(date)

Set selected date

parameter type required remark
date string/timestamp/Date or Array[string/timestamp/Date], null no -
// mode: single
// set select date
zxCalendar.setDate('2020/08/10')
zxCalendar.setDate('2020/08/10 22:14:59')
// clear selected date
zxCalendar.setDate()

// mode: multiple
zxCalendar.setDate(['2020/08/01', '2020/08/05', '2020/08/10'])

// mode: range
zxCalendar.setDate(['2008/01/14', '2019/12/10'])

setCurrentDate(date)

Set current date

parameter type required remark
date string/timestamp/Date yes -

setDateRange(startDate, endDate)

Set optional date range

parameter type required remark
startDate string/timestamp/Date yes -
endDate string/timestamp/Date yes -

prev(isYear)

options.type isYear remark
date effective isYear=true, go to prev year
isYear=false, go to prev month
month invalid go to prev year
year invalid go to prev years page

next(isYear)

options.type isYear remark
date effective isYear=true, go to next year
isYear=false, go to next month
month invalid go to next year
year invalid go to next years page

toDate(date)

String, timestamp to Date

parameter type required remark
date string/timestamp/Date yes -

return Date/null

const date = zxCalendar.toDate('2020/08/10')
if (date !== null) {
    console.log(date.getFullYear())
} 

formatDate(date, formatter[, langPackage])

parameter type required remark
date string/timestamp/Date yes
formatter string yes yMdhmsaAwW
langPackage object no {weeks: ['日', '月', '火', '水', '木', '金', '土']}

formatter

2020/08/18 22:59:02

format meaning example
yyyy year 2020
M month 8
MM month 08
d day 18
dd day 18
h hour 22
hh hour 22
m minute 59
mm minute 59
s second 2
ss second 02
a am/pm pm
A AM/PM PM
w week 2
ww week 02
W week options: {isFullWeek: false, lang: 'zh'}, 二
options: {isFullWeek: true, lang: 'zh'}, 星期二
ZxCalendar.prototype.formatDate(date, 'W'), 2
ZxCalendar.prototype.formatDate(date, 'WW'), 02
zxCalendar.formatDate(new Date(), 'yyyy/MM/dd hh:mm:ss')
// 2020/08/10 23:49:12

on(eventName, fn)

parameter type required remark
eventName string yes custom event name
fn function yes -
zxCalendar.on('error', err => {
  console.error(err)
})

zxCalendar.on('change', arr => {
  console.log(arr)
})

zxCalendar.on('onWeekClick', ({el, className, innerText) => {
  console.log(innerText)
})

zxCalendar.on('onTitleClick', ({el, className, innerText) => {
  console.log(innerText)
})
eventName parameter
change arr

arr

[
  {
    text: String,
    fullText: String,
    value: Number,
    date: Date
  }
]

emit(eventName[, parameters])

zxCalendar.emit('customEvent', {})

off(eventName)

zxCalendar.off('customEvent')

getDate()

get selected dates

return Array

destroy()

remove calendar from el(parent)

zxCalendar.destroy()
You might also like...
Localized, accessible calendar and datepicker for Vue with no external dependencies

Calendar Localized, accessible calendar and datepicker for Vue with no external dependencies. Installation $ npm install vue-a11y-calendar Pe

A responsive and customizable Github heatmap calendar.

vue-github-calendar A responsive and customizable Github heatmap calendar for Vue.js Usage Install npm install vue-github-calendar Import the componen

vue calendar fullCalendar. no jquery required. Schedule events management
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

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

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

A simple infinite calendar component in Vue 2
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

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

vue 2.x  calendar component
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

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

Owner
Front-end developer, I'm working on my English.
null
Full calendar base on Vue2 and momentjs.

Vue2 Calendar Component Full calendar base on Vue2 and dayjs. Support month and week view. Custom date item style with scopeSlots. 中文文档 ?? Live demo I

Kit 75 Nov 11, 2022
Using vue3.x composition api in react-hooks style.

v3-use Using vue3.x composition api in react-hooks style. Install npm install v3-use # or yarn add v3-use Usage <template> <div>{{state}}</div>

mufang 3 Oct 3, 2022
Simple-calendar-app - Simple Vue calendar (date-picker)

Simple vue calendar (date-picker) Vue Moment.js Installation git clone npm i npm

Dmitry Chinenov 3 Oct 31, 2022
A lightweight calendar component for Vue2

vue2-calendar Check out the demo here on Code Sandbox: Introduction This is a simple and small event calendar component for Vue js. It is very lightwe

Vincent 55 May 2, 2022
Multilingual Persian/Gregorian Calendar for Vue3

Emrooz Emrooz is a multilingual calendar built for Vue3. It also supports both Shamsi (Persian / Jalali) and Gregorian (English) calendars. Installati

Cafe Bazaar 29 Dec 6, 2022
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
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

The Codest 76 Oct 5, 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 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

Mahdi Aryayi 35 Oct 5, 2022
A simple vue calendar component. Base for further development and styling.

vue-simple-calendar A simple vue calendar component with minimal css. A base for further development/styling. DEMO Dependencies date-fns, lodash-es In

Roman Ranniew 6 Jun 15, 2022