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">&lt;</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">&gt;</span>

<span class="pl-k">&lt;</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">&gt;&lt;</span><span class="pl-k">/</span>script<span class="pl-k">&gt;</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