@jyunzn/zz NPM

ZZ

zz is a javascript calendar library that runs on the browser.

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/zz

commonJS
```
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/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>

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