simple-calendar实现一个日历效果代码
代码语言:html
所属分类:选择器
代码描述:simple-calendar实现一个日历效果代码
代码标签: 日历
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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 type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/simple-calendar.css"> <style> #calendar{ width: 100% } .clearfix{ margin-bottom: 50px !important; } </style> </head> <body> <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"><span aria-hidden="true" class="octicon octicon-link"></span></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"><span aria-hidden="true" class="octicon octicon-link"></span></a>引入资源</h2> <p>使用日历插件前首先要引用资源:JS CSS</p> <div class="highlight highlight-source-js"> <pre><span class="pl-k"><</span>link rel<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>text/css<span class="pl-pds">"</span></span> href<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>css/simple-calendar.css<span class="pl-pds">"</span></span><span class="pl-k">></span> <span class="pl-k"><</span>script type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> src<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>js/simple-calendar.js<span class="pl-pds">"</span></span><span class="pl-k">><</span><span class="pl-k">/</span>script<span class="pl-k">></span></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"><span aria-hidden="true" class="octicon octicon-link"></span></a>初始化一个日历</h2> <p>首先为calendar准备一个容器,可以设置大小,也可以在options中设置,不设置的话自动设为默认</p> <div class="highlight highlight-text-html-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0