SimpleCalendar.js简单带农历节日的日历插件.zip

共13个文件

jpg：4个

css：3个

js：3个

版权申诉

实用代码

实用插件

13 浏览量 2023-09-27 22:18:35 上传评论收藏 79KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

SimpleCalendar.js简单带农历节日的日历插件.zip （13个子文件）

stylesheets

stylesheet.css 15KB

print.css 3KB

simple-calendar.css 4KB

index.html 15KB

images

github-button.png 2KB

highlight-bg.jpg 30KB

body-bg.jpg 2KB

sidebar-bg.jpg 2KB

download-button.png 15KB

header-bg.jpg 9KB

javascripts

simple-calendar.js 28KB

main.js 48B

simple-calendar-es6.js 24KB

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">  <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print"> <link rel="stylesheet" type="text/css" href="stylesheets/simple-calendar.css">  <title>SimpleCalendar.js简单带农历节日的日历插件</title> <style> #calendar{ width: 100% } .clearfix{ margin-bottom: 50px !important; } </style> </head> <body><script src="/demos/googlegg.js"></script> <header> <div class="inner"> <h1>Simple-calendar</h1> <h2>一个简单的日历插件</h2> </div> </header> <div id="content-wrapper"> <div class="inner clearfix"> <div id = 'calendar'> </div> </div> <div class="inner clearfix"> <section id="main-content"> <h1> <a id="simple-calendar开发文档" class="anchor" href="#simple-calendar%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3" aria-hidden="true"></a>Simple-Calendar开发文档</h1> <hr> <a id="引入资源" class="anchor" href="#%E5%BC%95%E5%85%A5%E8%B5%84%E6%BA%90" aria-hidden="true"></a>引入资源</h2> 使用日历插件前首先要引用资源：JS CSS <div class="highlight highlight-source-js"><pre><link rel="stylesheet" type="text/css" href="css/simple-calendar.css"> <script type="text/javascript" src="js/simple-calendar.js"></script></pre></div> <h2> <a id="初始化一个日历" class="anchor" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E4%B8%80%E4%B8%AA%E6%97%A5%E5%8E%86" aria-hidden="true"></a>初始化一个日历</h2> 首先为calendar准备一个容器，可以设置大小，也可以在options中设置，不设置的话自动设为默认 <div class="highlight highlight-text-html-basic"><pre> <div id='container'></div></pre></div> <div class="highlight highlight-text-html-basic"><pre> <script> var myCalendar = new SimpleCalendar('#container'); </script></pre></div> 这样一个日历就诞生了 ^-^ <h2> <a id="配置项说明" class="anchor" href="#%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%AF%B4%E6%98%8E" aria-hidden="true"></a>配置项说明</h2> <div class="highlight highlight-source-js"><pre>var options = { width: '500px', height: '500px', language: 'CH', //语言 showLunarCalendar: true, //阴历 showHoliday: true, //休假 showFestival: true, //节日 showLunarFestival: true, //农历节日 showSolarTerm: true, //节气 showMark: true, //标记 timeRange: { startYear: 1900, endYear: 2049 }, mark: { '2016-5-5': '上学' }, theme: { changeAble: false, weeks: { backgroundColor: '#FBEC9C', fontColor: '#4A4A4A', fontSize: '20px', }, days: { backgroundColor: '#ffffff', fontColor: '#565555', fontSize: '24px' }, todaycolor: 'orange', activeSelectColor: 'orange', } }</pre></div> <h3> <a id="国际化" class="anchor" href="#%E5%9B%BD%E9%99%85%E5%8C%96" aria-hidden="true"></a>国际化</h3> <blockquote> language：语言的话目前只支持中文和英文，分别对应'CH','EN' </blockquote> 如果想要加更多的语言或者更改现在的显示，可以直接更改languageData内容 <h3> <a id="节日显示配置" class="anchor" href="#%E8%8A%82%E6%97%A5%E6%98%BE%E7%A4%BA%E9%85%8D%E7%BD%AE" aria-hidden="true"></a>节日显示配置</h3> <div class="highlight highlight-source-js"><pre>showLunarCalendar: true, //是否显示阴历日期 showHoliday: true, //是否显示休假休假 showFestival<

评论收藏

内容反馈

版权申诉