Applets calendar component

Small program calendar components, support a variety of modes, easy to use good use

  • 4 calendar modes
  • Three date selection methods
  • Supports custom holidays
  • Supports custom date content
  • Lazy loading guarantees rendering performance
  • Support the lunar calendar
  • Supports automatic generation based on the specified date
  • Support across data months

1


2


3


The sample code

https://github.com/webkixi/aotoo-xquery 
=> pages/calendar    
Copy the code

Configuration instructions

wxml

<ui-calendar dataSource="{{config}}" />
Copy the code

js

Basic usage

const Pager = require('.. /.. /components/aotoo/core/index')
Pager({
  data: {
    config: {
      ?id: 'calendar'.mode: 1.// Vertical calendar
      type: 'range'.// Select a region
      tap: 'onTap'.// page responds to the event
      total: 365.// Specify the total number of calendar days
      data: [].// Automatically build the calendar by calculating the total value for the given date
      rangeCount: 28.// 28 days between districts
      rangeMode: 2.// Select mode
      rangeTip: ['check-in'.'departure'].// select a prompt
      festival: true.// Enable the holiday display
      alignMonth: false.// Month alignment when swiper is switched
      lunar: false.// Whether to display the lunar calendar
      date: [].// Specify the date to display the content
      value: ['2019-12-24'.'2020-01-05']./ / the default value
      toolbox: {
          monthHeader: true, whether to display the beginning of the moondiscontinue: false, whether to omit the month with no data},methods: { 
        // Respond to the TAP event
        onTap(e, param, inst) {
          // param.date Current date selected
          
          // Select mode
          // param.range === 'start' select the first day
          // param.range === 'end' selects the last day}}}}})Copy the code

? Id {String} ID of the configuration instance

Mode {Number} Sets the display mode of the calendar. 1= vertical calendar 2= horizontal calendar

Type {Number} single= single calendar, range= range, multiple= multiple calendar

Total {Number} sets the Number of days the calendar will span from today, such as 180 or 365

Start {String} sets the start date, e.g. ‘2020-06-05’

Date date {Object | Function} to define additional content

Disable {Boolean} The Settings are globally invalid and all dates cannot interact with each other. The weight is lower than disable for a single date

RangeCount {Number} When type === ‘range’, rangeCount is the range size, indicating how many days the range is allowed to select

RangeMode {Number} Specifies whether to allow dates other than angeCount to be displayed when selecting a date range. 1= display, 2= no display

Tap {String} Responds to the TAP event of the date element

Value {Array} Specifies the date selected by default, allowing the Array to be empty. If type=’single’ it should be set to [‘2020-06-05′], Type =’range’ should be set to [‘2020-06-03’, ‘2020-06-05′], where type=’multiple’ allows multiple values

Data {Array} This data will automatically calculate the number of date span (allow cross-year setting), if this data is set, the total is invalid, such as set to [‘2019-11-05’, ‘2021-11-05’], automatic calculation date is 730 days

Holiday festival {Boolean | Array} set calendar shows that support the specified holiday

Toolbox {Object} calendar extension configuration, allowing setting some advanced functions, such as whether calendar allows cross month, special range algorithm and so on

Toolbox. header {Boolean} Whether to display the header of the calendar, generally used for horizontal duration is true

Toolbox. monthHeader {Boolean} specifies whether to display the monthHeader of the calendar

Toolbox. rangeEdge {Function} Default value null, type=’range’, custom range selection algorithm

Toolbox. discontinue {Boolean} Defaults to false, missing months are ignored when the calendar has a data array built

Making the source code