@jyunzn/zz
v0.0.1
Published
This is a calendar library
Downloads
3
Maintainers
jyunznReadme
ZZ
zz is a javascript calendar library that runs on the browser.
Table of Contents
Features
- Compare before switching months
- Only manipulate the DOM with differences
- Provides many customization options and life cycle functions
- Use plug-in mode to maintain the scalability of this library, and have the effect of importing on demand
Installation
npm
npm install @jyunzn/zzcommonJS
const zz = require("@jyunzn/zz");ES module
import zz from "@jyunzn/zz";
CDN
unpkg
<script src="https://unpkg.com/@jyunzn/zz"></script>jsdelivr ( npm )
<script src="https://cdn.jsdelivr.net/npm/@jyunzn/zz"></script>jsdelivr ( gh )
<script src="https://cdn.jsdelivr.net/gh/jyunzn/zz/dist/zz.min.js"></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/[email protected]/examples/default.min.css" rel="stylesheet"/>
<style>
.caledar {
border: 1px solid black;
position: relative;
padding: 50px 30px;
box-sizing: border-box;
}
.prev-btn.p_btn1 {
left: 100px;
}
.next-btn.n_btn1 {
right: 100px;
}
</style>
<script src="https://kit.fontawesome.com/36ce20503e.js" crossorigin="anonymous"></script>
<!-- step1. import the module -->
<script src="https://unpkg.com/@jyunzn/zz"></script>
</head>
<body>
<!-- step2. Create a container -->
<div class="caledar"></div>
<script>
// step3. call zz function and mount into the container
// If you want to use custom options,
// you can set it in the first parameter in the zz function
zz(/*{
// - Set options
cmz_quan: 12,
cmz_ymStart: '2020-01',
cmz_ymPos: 'my',
cmz_yNames: { 2020: '貳零貳零', 2021: '貳零貳壹' },
cmz_mNames: {
1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr',
5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug',
9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec'
},
cmz_wMarks: {
sun: 'S',
mon: 'M',
tue: 'T',
wed: 'W',
thu: 'T',
fri: 'F',
sat: 'S'
},
cmz_swBtns: [
['i', { direct: 'prev', step: 12, class: "prev-btn p_btn12" }, '<<<<<'],
// use font-awesome
['i', { direct: 'prev', step: 1, class: "prev-btn p_btn1 fas fa-angle-left" }, ''],
['i', { direct: 'next', step: 1, class: "next-btn n_btn1" }, '>'],
// set children, children can always be nested!
['i', { direct: 'next', step: 12, class: "next-btn n_btn12" }, [
'>',
['i', { style: 'color: pink;' }, '>'],
['span', {}, [
'>',
['i', { style: { color: 'skyblue' }}, '>']
]]
]]
],
cls_year: 'my-year',
cls_month: 'my-month',
// - Set life cycle
onPreved: (...args) => { console.log('onPreved', ...args) },
onNexted: (...args) => { console.log('onNexted', ...args) },
onBeforeCreate: (...args) => { console.log('onBeforeCreate', ...args) },
onCreated: (...args) => { console.log('onCreated', ...args) },
onBeforeMount: (...args) => { console.log('onBeforeMount', ...args) },
onMounted: (...args) => { console.log('onMounted', ...args) },
onBeforeUnmount: (...args) => { console.log('onBeforeUnmount', ...args) },
onUnmounted: (...args) => { console.log('onUnmounted', ...args) }
}*/).mount(".caledar");
</script>
</body>
</html>Options
class options
- All customizable class name settings
- If you need to set more than two class names, please separate them with spaces, such as
'apple banana'
| option | default |
| ------------------ | ------------------ |
| cls_ymContainer | 'ym-container' |
| cls_monthWrap | 'month-wrap' |
| cls_monthHeader | 'month-header' |
| cls_monthContent | 'month-content' |
| cls_weekMarkWrap | 'week-mark-wrap' |
| cls_weekMark | 'week-mark' |
| cls_w4Content | 'w-4' |
| cls_w5Content | 'w-5' |
| cls_w6Content | 'w-6' |
| cls_year | 'year' |
| cls_month | 'month' |
| cls_week | 'week' |
| cls_date | 'date' |
| cls_empFDate | 'empty-f' |
| cls_empBDate | 'empty-b' |
| cls_passYear | 'pass-y' |
| cls_passMonth | 'pass-m' |
| cls_passWeek | 'pass-w' |
| cls_passDate | 'pass-d' |
| cls_passEmpFDate | 'pass-emp-f' |
| cls_passEmpBDate | 'pass-emp-b' |
| cls_unPassYear | 'unpass-y' |
| cls_unPassMonth | 'unpass-m' |
| cls_unPassWeek | 'unpass-w' |
| cls_unPassDate | 'unpass-d' |
| cls_unPassEmpFDate | 'unpass-emp-f' |
| cls_unPassEmpBDate | 'unpass-emp-b' |
| cls_curDate | 'cur-d' |
| cls_curMonth | 'cur-m' |
| cls_curYear | 'cur-y' |
| cls_curWeek | 'cur-w' |
tag options
- All customizable label settings
- value:
HTML Tag | SVG Tag | Custom Element Name( The name must be kebab-case )
| option | default |
| ---------------- | -------- |
| tag_ymContainer | 'div' |
| tag_monthWrap | 'div' |
| tag_monthHeader | 'div' |
| tag_monthContent | 'div' |
| tag_weekMarkWrap | 'ul' |
| tag_weekMark | 'li' |
| tag_year | 'span' |
| tag_month | 'span' |
| tag_week | 'ul' |
| tag_date | 'li' |
| tag_empFDate | 'li' |
| tag_empBDate | 'li' |
other options
Life Cycle
The life cycle architecture refers to VueJS, so the trigger timing is similar to the life cycle of VueJS
Methods
The zz function will return an object with mount and unmount methods
| function | description | | -------- | -------------------------------------------------------------------------------------------------- | | mount | Mount the dom created by the zz function to the specified container, Accepts a selectors parameter | | unmount | Unmount the calendar mounted in the container |
Plugins
- The plug-in mode of zz also refers to VueJS,
- The zz object has a use function. The plugin can be installed by passing the plugin into the use parameter.
- The plug-in object must have an install method
usage
const plugin = { install() {} };
zz.use(plugin);plugin list
| plugin | description | | ------------------------------------------ | ------------------------------------------------------------------------------------------ | | zzsper | ZZ Single Picker, provides the function of selecting a single day | | zzrper | ZZ Range Picker, provides the function of selecting the range of days |