zz is a javascript calendar library that runs on the browser.
- 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
npm install @jyunzn/zz-
commonJS
const zz = require("@jyunzn/zz");
-
ES module
import zz from "@jyunzn/zz";
-
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>
<!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>
.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>- 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' |
- 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' |
| option | default | description |
|---|---|---|
| cmz_quan | 1 |
Number of calendars type: |
| cmz_yNames | null |
Name the year
|
| cmz_mNames |
|
Name the month
|
| cmz_wMarks |
|
Name the day of the week marker
|
| cmz_ymStart | Current month |
Leftmost calendar month
|
| cmz_ymPos | ym |
Relative position of year and month, Value: |
| cmz_swBtns |
|
Button to switch month，Each top button setting represents a whole button
|
The life cycle architecture refers to VueJS, so the trigger timing is similar to the life cycle of VueJS
| hook | description |
|---|---|
| onBeforeCreate |
|
| onCreated |
|
| onBeforeMount |
|
| onMounted |
|
| onBeforeUnmount |
|
| onUnmounted |
|
| onPreved |
|
| onNexted |
|
|
|
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 |
- 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
const plugin = { install() {} };
zz.use(plugin);| 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 |