啥话不说，我们先上效果图，源码放在最后

1、实现的功能

用年切换日历、用月切换日历，可以显示用月显示，也可以用年显示，可以在日历中显示对应某天的时间

2、编写界面代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./js/jquery-1.11.3.min.js"></script><link rel="stylesheet" href="./css/raoCalendar.css" /><link rel="stylesheet" href="./css/index.css" /><script src="./js/raoCalendar.js"></script><script>$(document).ready(function () {var data = [{ startDate: "2018-6-10", name: "事件1" },{ startDate: "2018-7-10", name: "事件1" },{ startDate: "2018-8-10", name: "事件1" },{ startDate: "2018-9-10", name: "事件1" },{ startDate: "2018-10-10", name: "事件1" },{ startDate: "2018-11-1", name: "事件2" },{ startDate: "2018-11-1", name: "事件11" },{ startDate: "2018-12-1", name: "事件12" },{ startDate: "2018-12-1", name: "事件13" },{ startDate: "2018-12-1", name: "事14" },{ startDate: "2019-1-10", name: "事件14" },{ startDate: "2019-2-10", name: "事件14" },{ startDate: "2019-3-10", name: "事件14" },{ startDate: "2019-4-10", name: "事件14" },{ startDate: "2019-5-10", name: "事件14" },{ startDate: "2019-6-10", name: "事件14" },{ startDate: "2019-7-10", name: "事件14" },{ startDate: "2019-8-10", name: "事件14" },{ startDate: "2019-9-10", name: "事件14" },{ startDate: "2019-10-10", name: "事件14" },{ startDate: "2019-11-10", name: "事件14" },{ startDate: "2019-12-10", name: "事件14" },{ startDate: "2020-1-10", name: "事件14" },{ startDate: "2020-2-10", name: "事件14" },];$(".calendar").calendar({data: data,mode: "month",//  maxEvent: 3,//showModeBtn: false//  newDate: "2018-04-1",cellClick: function (events) {console.log(events);//viewCell的事件列表art.dialog.parent.location ="${ctx}/yzself/tsakManage/my-working-manage!addWorking.action";},});});</script></head><body><div class="calendar"></div></body>
</html>

OK，就是这么简单，所有代码我都封装好了，你只需要直接用就好了，代码我就上传到这了

日历控件下载

如果您觉得有用，请作者喝杯咖啡吧，或者关注评论转发

手把手教你用js写一个可以选择年月的动态日历组件相关推荐

手把手教你用C#写一个刷屏软件
手把手教你用C#写一个刷屏轰炸软件成品展示环境准备新建项目程序思路程序部分完整代码成品展示环境准备 VS2019 新建项目打开界面绘制打开工具箱开始放置按钮标签以及文本框最后设计 ...
手把手教你用js封装一个导航栏组件
文章目录前言一.实现思路介绍二.代码 1.html代码 2.js代码 3.css代码总结前言本文介绍如何用js封装一个组件,这里以导航栏为例. 看这篇文章你需要有一定的js基础哦一.实现 ...
java 雷电_【我叫辰先森】教大家用js写一个雷电
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 //储存敌机 var arr1 = new Array(); //打开网页立即调用创建敌机方法: (function diji(){ //调用敌机创建方法 ...
手把手教你从零写一个日志框架
点击上方 "编程技术圈"关注, 星标或置顶一起成长后台回复"大礼包"有惊喜礼包! 每日英文 Sometimes you have to accept the ...
写一个构建复杂数据的日历组件 Kalendar
需求:我们经常会在一些旅游.订票.酒店的页面中看到一些日历,这些日历有公历.农历.节假日.非节假日(调休)的标注,同时还有产品业务上的信息,比如票价.余票等等.那现在开始造造轮子了,首先这个组件应该 ...
python界面设计-手把手教你用Python设计一个简单的命令行界面
原标题:手把手教你用Python设计一个简单的命令行界面对 Python 程序来说,完备的命令行界面可以提升团队的工作效率,减少调用时可能碰到的困扰.今天,我们就来教大家如何设计功能完整的 Pyth ...
手把手教你用C写游程编码
手把手教你用C写游程编码 (原创作品,作者Shawn, 转载请声明) 相信大家对游程编码的概念不会陌生.如果用C语言亲自实现一遍游程编码的话,会发现综合运用到了很多C语言的知识和要避免踩到坑! 游程编 ...
IP门禁：手把手教你用PHP实现一个IP防火墙
最近我遇到一个需求,我的一台服务器总是遭到端口扫描和恶意登录攻击,对此可以怎么办呢?似乎除了内网隔离.增强密码认证.证书登录.设置防火墙iptables,网上找不到什么别的方案,对了,还用堡垒机的方案 ...
手把手教你使用nodejs编写一个【使用远程仓库模板，快速创建项目模块】的cli(命令行)
目录实现步骤初始化cli项目项目目录创建交互式命令拉取远程仓库代码,读取仓库中的模板拉取远程仓库代码 ora 终端 loading 读取仓库中的模板将选择的模板复制写入目标项目 Comm ...

手把手教你用js写一个可以选择年月的动态日历组件

如果您觉得有用，请作者喝杯咖啡吧，或者关注评论转发

手把手教你用js写一个可以选择年月的动态日历组件相关推荐

最新文章

热门文章