"插入日历"组件: —— 快应用组件库H-UI
程序员文章站
2022-06-28 18:22:36
 用户第一次插入日历，需要授权确认：  日历插入成功或失败，会在快应用顶部做全局提示：  查看系统日历：   

用户第一次插入日历，需要授权确认：
日历插入成功或失败，会在快应用顶部做全局提示：
查看系统日历：


<import name="calendar" src="../common/ui/h-ui/advance/c_calendar"></import>
<template>
<div class="container-full">
<calendar data="{{data}}" params="{{params1}}"></calendar>
</div>
</template>
<style lang="less">
@import '../common/styles/container.less';
</style>
<script>
export default {
private: {
data: {},
params1: {}
}
}
</script>


插入日历后查看手机系统日历，结果一致：

<import name="calendar" src="../common/ui/h-ui/advance/c_calendar"></import>
<template>
<div class="container-full">
<calendar data="{{data2}}" params="{{params2}}"></calendar>
</div>
</template>
<style lang="less">
@import '../common/styles/container.less';
</style>
<script>
export default {
private: {
data2:{
'title': '我的健身日程',
'content': '参加李教练的健身课。',
'date': '2020-03-31',
'timerange': '15:30至16:30',
'allday': false,
'remind': ['5','10','30'],//支持：1，5，10，15，30，60，120
//'repeat': 'weekly',//支持：daily，weekly，monthly，yearly
'repeat': 'weekly',
'expiration': 'until',//支持：forever，count,until
//'count': '10',
'until': '2021-03-31',
'interval': '1',
'byday': ['tu','th']
},
params2: {}
}
}
</script>

<import name="calendar" src="../common/ui/h-ui/advance/c_calendar"></import>
<template>
<div class="container-full">
<calendar data="{{data}}" params="{{params3}}" type="danger"></calendar>
</div>
</template>
<style lang="less">
@import '../common/styles/container.less';
</style>
<script>
export default {
private: {
data: {},
params3: {}
}
}
</script>

<import name="calendar" src="../common/ui/h-ui/advance/c_calendar"></import>
<template>
<div class="container-full">
<calendar data="{{data}}" params="{{params4}}" simple="true"></calendar>
</div>
</template>
<style lang="less">
@import '../common/styles/container.less';
</style>
<script>
export default {
private: {
data: {},
params4: {}
}
}
</script>
扫码体验