ZZSPER
ZZSPER is a plugin of @jyunzn/zz calendar library, its full name is ZZ Single Picker, which provides the function of selecting a single day.
Installation
This plugin depends on @jyunzn/zz, so @jyunzn/zz must also be imported
npm
npm install @jyunzn/zz @jyunzn/zzsper-
commonJS
const zz = require('@jyunzn/zz') const zzsper = require('@jyunzn/zzsper')
-
ES module
import zz from '@jyunzn/zz' import zzsper from '@jyunzn/zzsper'
CDN
-
unpkg
<script src="https://unpkg.com/@jyunzn/zz"></script> <script src="https://unpkg.com/@jyunzn/zzsper"></script>
-
jsdelivr
<script src="https://cdn.jsdelivr.net/npm/@jyunzn/zz"></script> <script src="https://cdn.jsdelivr.net/npm/@jyunzn/zzsper"></script>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- set some style -->
<link href="https://cdn.jsdelivr.net/gh/jyunzn/zz@0.0.0-alpha.3/examples/default.min.css" rel="stylesheet"/>
<style>
.calendar {
position: relative;
padding: 50px 30px;
}
.zzsp-selected {
background: black;
}
</style>
<!-- step1. import the module -->
<script src="https://unpkg.com/@jyunzn/zz"></script>
<script src="https://unpkg.com/@jyunzn/zzsper"></script>
</head>
<body>
<div class="calendar"></div>
<script>
// step2. Install plugin
zz.use(zzsper)
// step3. Use plugin (zzsp: true)
zz({
zzsp: true, /*
// - other options
zzsp_cls_selected: 'zzsp-selected apple',
zzsp_cmz_initSelectDate: '2020-11-11',
// - set event
zzsp_onSelected(date) {
console.log(date)
}
*/}).mount('.calendar')
</script>
</body>
</html>Options
| option | default | description |
|---|---|---|
| zzsp | undefined |
If your calendar needs to use the zzsper plugin, must set this option to true |
| zzsp_cls_selected | zzsp-selected |
|
| zzsp_cmz_initSelectDate | null |
|
| zzsp_onSelected | undefined |
|