@jyunzn/zzsper

0.0.0-alpha.2 • Public • Published

ZZSPER

NPM version GITHUB LICENSE NPM size GITHUB issues GITHUB TOP LAN

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
  • Customize the class name of the selected date.
  • If more than two class names are required, separate them with spaces
zzsp_cmz_initSelectDate null
  • Initial date setting
  • Format: yyyy-mm-dd
zzsp_onSelected undefined
  • Timing: When the user clicks on the date
  • Parameter: { selectedDate, selectingDate }

    • selectedDate: Last selected date
    • selectingDate: The date selected this time

License

MIT

Package Sidebar

Install

npm i @jyunzn/zzsper

Weekly Downloads

1

Version

0.0.0-alpha.2

License

MIT

Unpacked Size

109 kB

Total Files

21

Last publish

Collaborators

  • jyunzn