微信练手小程序源码 - 日历(含各种功能组件)
时间:2022-07-23
本文章向大家介绍微信练手小程序源码 - 日历(含各种功能组件),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
小程序日历
引入组件
在json文件中配置组件
{
"usingComponents": {
"calendar": "/component/calendar/index"
}
}
在wxml中引入组件
<calendar calendarConfig="{{calendarConfig}}"></calendar>
自定义配置初始化日历
const conf = {
data: {
calendarConfig: {
// 配置内置主题
theme: 'elegant'
}
},
doSomeThing() {
// 调用日历方法
this.calendar.enableArea(['2018-10-7', '2018-10-28']);
}
};
Page(conf);
日历模板初始化
import initCalendar from '../../template/calendar/index';
const conf = {
onShow: function() {
initCalendar(); // 使用默认配置初始化日历
}
};
Page(conf);
获取当前选择的日期
const options = {
lunar: true // 在配置showLunar为false, 但需返回农历信息时使用该选项
}
const selectedDay = this.calendar.getSelectedDay(options);
// => { year: 2019, month: 12, day: 1}
获取日历当前年月
const ym = this.calendar.getCurrentYM();
// => { year: 2019, month: 12}
设置待办事项
// 待办事项中若有 todoText 字段,则会在待办日期下面显示指定文字,如自定义节日等。
this.calendar.setTodoLabels({
// 待办点标记设置
pos: 'bottom', // 待办点标记位置 ['top', 'bottom']
dotColor: 'purple', // 待办点标记颜色
circle: true, // 待办圆圈标记设置(如圆圈标记已签到日期),该设置与点标记设置互斥
showLabelAlways: true, // 点击时是否显示待办事项(圆点/文字),在 circle 为 true 及当日历配置 showLunar 为 true 时,此配置失效
days: [
{
year: 2018,
month: 1,
day: 1,
todoText: '待办',
color: '#f40' // 单独定义代办颜色 (标记点、文字)
},
{
year: 2018,
month: 5,
day: 15
}
]
});
删除待办事项
this.calendar.deleteTodoLabels([
{
year: 2018,
month: 5,
day: 12
},
{
year: 2018,
month: 5,
day: 15
}
]);
设置指定日期样式,该方法只会对日期生效。
组件样式隔离采用了 apply-shared 方案,此模式下页面样式会影响组件样式,使用时需注意页面样式对日历组件样式的覆盖。
// 页面 js 文件
const toSet = [
{
year: 2019,
month: 11,
day: 19,
class: 'orange-date other-class' // 页面定义的 class,多个 class 由空格隔开
}
];
this.calendar.setDateStyle(toSet);
.orange-date {
background-color: #e8e8e8;
}
.orange-data .default_normal-date {
color: #333;
}
作者 | 小飞机飞飞飞
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- kubernete编排技术八:使用operator管理有状态应用
- Spring第一天:Spring的概述、SpringIOC入门(XML)、Spring的Bean管理、Spring属性注入
- Flink的处理背压原理及问题-面试必备
- Spring第二天:Spring的IOC的注解方式、Spring的AOP开发(XML)
- OpenCV还能实现这种效果? | 视频防抖技术
- 迁移到 Go Modules
- 使用docker 搭建redis的哨兵机制
- 使用docker 搭建redis的主从复制
- 使用Python判断文件下是否有空文件夹
- MySQL 设置用户可以远程连接
- MySQL关于character_set 设置为uft8问题
- nohup 退出终端不退出任务
- windows 下Redis开机自启动
- 机器学习基础:决策树的可视化
- 持续部署入门:基于 Kubernetes 实现蓝绿发布