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>
<script>
import BtgCalendar from "btg-calendar"
export default {
name: 'app',
components: {BtgCalendar},
data() {
return {
calendarOptions: {
type: 'mini', // [large, mini]
ticketsData: {},
// 需要匹配的code,可以随时设置,日历会实时刷新,若匹配不到或传空,则会尝试匹配第一个
ticketCode: 'CODE0',
updateTitle: '最后更新时间:', // 右上角刷新文案自定义,目前60s自动刷新
// 如果需要设置日历高度跟随窗口高度,则需要设置,如要实现window.innerHeight - 90px,就设置90,
// 如果不需要就不设置或设置0
// 但是如果屏幕高度过低,则有优先保证可以显示完全日历
// insetHeight: 90,
priceColor: [
{
value: -1, // -1 会解析成无穷大,或者设置一个合适的阈值,实际数量小于value就显示value的color
type: 'price' // 可以设置type, 预设 price,如果不满足则自定义颜色
}
],
//
availableColor: [
{
value: 100, // 颜色阈值
type: 'low' // 颜色type,预设三种颜色 low mid high
},
{
value: 1000,
backgroundColor: '#FEF0F0', // 如果不满足则自定义颜色
borderColor: '#FBC4C4',
textColor: '#FF6F5B',
},
{
value: -1, // -1 会解析成无穷大,或者设置一个合适的阈值
backgroundColor: '#ECF8F2',
borderColor: '#97D2B4',
textColor: '#42B983',
},
],
enableRefresh: true, // 是否需要刷新按钮, default true
enableSelect: true, // 是否需要条件选择器, default true
isHoverEvent: true, // 鼠标移动到日期上,如果有事件,是否需要显示,default true
typeMap: {}, // 类型map做key映射,可不传,
isFloatSelector: false, // 筛选浮动
customSelectorSectionNames: ['section000', 'section111', 'section222']
}
}
},
created() {
},
mounted() {
// 设置选定日期
this.$refs.calendar.selectedDate('2021-01-19')
setTimeout(()=>{
this.$refs.calendar.selectedDate('2021-01-15')
}, 500)
setTimeout(()=>{
this.calendarOptions.ticketCode = 'CODE2'
}, 2000)
// 如果需要更新size调用
// this.$refs.calendar.render()
},
methods: {
fetchTickets() {
setTimeout(()=>{
this.calendarOptions.ticketsData = mockData0.data
this.calendarOptions.typeMap = mockTypeMap
}, 500)
},
clickDate(event) {
// 点击日期,返回数据格式
// {
// datetime: "2020-10-24",
// event: ...baseProduct.stocks 里的字段 ,如果当天没有票务信息,就无数据
// }
console.log(event)
},
changeTicketCode(value) {
/**
* 返回当前切换的类型
**/
console.log(value)
}
}
}
<style scoped>
// 包裹一层div,自定义宽高
.calendar-wrapper {
width: 1000px;
height: 800px;
}
</style>
LICENSE
BtgCalendar is released under the MIT License.