btgcalendar v1.6.8

btg-calendar

btg calendar components

Build Setup

# install dependencies

By NPM

npm i --save btgcalendar

By Yarn

yarn add btgcalendar

npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

How to use

支持 large mini 两种样式，每分钟刷新、选中高亮、鼠标hover等

import BtgCalendar from "btgcalendar"

>api

// 设置选定日期
calendar.selectedDate('2020-11-19')

>required

options(必要) 设置一个配置源，具体参数参考下面demo
color 可以自定义，或者设置type(包括 price low mid high):
{
  value: 100,
  type: 'low' // 可以设置type
},
{
  value: 1000,
  backgroundColor: '#FEF0F0', // 或者自定义颜色
  borderColor: '#FBC4C4',
  textColor: '#FF6F5B',
},

refresh-func(必要) 设置一个刷新数据的func

> optional


clickDate(可选) 点击日期会调
// 点击日期，
如果没有事件，返回数据格式 2020-10-24
如果有事件，返回数据格式同直接点击门票事件

clickEvent(可选) 点击门票事件
// 点击门票事件，返回数据格式
// datetime: "2020-10-24"
// isAvailable: true
// ...baseProduct.stocks 里的字段
// value: 99999999  value 不用理会，是calendarOptions里设置的值

Tips:

为了方便使用，目前 clickDate clickEvent 均会返回相同的事件。但如果点击日期没有事件，则只会回调 clickDate

type: 'large' 正常模式，全尺寸日历

type: 'mini' mini模式，缩小显示，鼠标hover实现显示日期信息，支持选中模式。

如果需要更新size调用 this.$refs.calendar.render()

DEMO

<template>
    // 包裹一层div，自定义宽高，默认是100%
  <div class="calendar-wrapper">
    <btg-calendar :options="calendarOptions"
                  :refresh-func="fetchTickets"
                  v-on:clickDate="clickDate"
                  :clickDate="clickDate"
                  :changeTicketCode="changeTicketCode"></btg-calendar>
  </div>
</template>

## LICENSE
BtgCalendar is released under the MIT [License](https://github.com/peppababy7/BtgCalendar/blob/main/LICENSE).