HTML5，CSS3日历为clndr.js做准备

时间：2018-04-05 20:27:37

标签： javascript jquery momentjs clndr.js

我有一个CSS3日历，我想将它与clndr.js一起使用。

在Clndr.js页面上，我读到我必须在脚本中添加脚本＆＃34; moment.js＆＃34;，＆＃34; underscore.js＆＃34;，＆＃34; clndr.js＆ ＃34;和＆＃34; jquery.js＆＃34;。我还有很多其他JS脚本。

在文档中我也可以看到我必须使用名称日历和脚本代码放入一个空div：

<script>$(function() { $(‘#calendar’).clndr();});</script>

但是，我看不到clndr脚本创建的任何日历。有什么问题？

现在我将发布我的JS和HTML代码。

我身体底部的Javascripts标签：

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jqueryui.js"></script>
<script type="text/javascript" src="scripts/framework.plugins.js"></script> <script type="text/javascript" src="scripts/underscore.js"></script>
<script type="text/javascript" src="scripts/moment.js"></script> 
<script type="text/javascript" src="scripts/clndr.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>

正文标记的HTML代码：

<body> 

<div id="preloader">
    <div id="status">
        <p class="center-text">
            Lade Inhalt...
            <em>Abhängig von Ihrer Internetverbindung!</em>
        </p>
    </div>
</div>

<div class="hide-content"></div>       
<div class="all-elements">
    <div class="snap-drawers">
        <!-- Left Sidebar -->
        <div class="snap-drawer snap-drawer-left">
            <a href="index.html"><i class="fa fa-home"></i>Home</a>
            <a href="page-features.html" class="selected-item"><i class="fa fa-cog"></i>Features</a>
            <a href="page-media.html"><i class="fa fa-picture-o"></i>Media</a>
            <a href="page-blog.html"><i class="fa fa-pencil"></i>Blog</a>
            <a href="contact.html"><i class="fa fa-envelope-o"></i>Contact</a>
            <a href="#"><i class="fa fa-facebook"></i>Like Us</a>
            <a href="#"><i class="fa fa-twitter"></i>Follow Us</a>
            <a href="#"><i class="fa fa-google-plus"></i>Follow us</a>
            <a href="#" class="show-share-bottom"><i class="fa fa-retweet"></i>Share</a>
            <a href="#" class="sidebar-close"><i class="fa fa-times"></i>Close</a>
        </div>
    </div>

    <div class="header">
        <a href="#" class="main-logo"></a>
        <a href="#" class="open-menu"><i class="fa fa-navicon"></i></a>
        <a href="#" class="open-call"><i class="fa fa-phone"></i></a>
        <a href="#" class="open-mail"><i class="fa fa-envelope-o"></i></a>
    </div> 

    <a href="#" class="footer-ball"><i class="fa fa-navicon"></i></a>

    <!-- Page Content-->
    <div id="content" class="snap-content">        
        <div class="header-clear"></div>
        <div class="content">

            <div class="one-half-responsive">
                <h3>Calendar Design</h3>
                <p>
                    Dieser Abfallkalender ist nicht offiziell von der Gemeinde Ober-Mörlen. Es stellt lediglich eine private Programmierung dar!</p>
                    <p>Die verschiedenen Farbpunkte bedeuten verschiedene Abfallarten und deren Abholungen:
                </p>
                <div class="decoration"></div>

                <div class="one-half">
                    <p>
                        1/2<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                        Proin luctus congue sodales. Pellentesque vel mollis odio. 
                     </p>
                </div>
                <div class="two-half last-column">
                    <p>
                        2/2<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                        Proin luctus congue sodales. Pellentesque vel mollis odio. 
                    </p>        
                </div>
                <div class="decoration"></div>







                 <div class="decoration"></div>





<script>
$('#calendar').clndr({
  template: $('#calendar-template').html()
});
</script>
                           <div id="calendar-template"></div>     
                <h3 class="center-text half-bottom">January, 2025</h3>
                <div class="calendar-titles">
                    <a class="light-titles" href="#">SO</a>
                    <a href="#">MO</a>
                    <a href="#">DI</a>
                    <a href="#">MI</a>
                    <a href="#">DO</a>
                    <a href="#">FR</a>
                    <a class="light-titles" href="#">SA</a>
                </div>
                <div class="decoration half-bottom"></div>
                <div class="calendar-days">
                    <!-- &nbsp adds a space for the single numbers, this way they can be centered in boxes -->
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>&nbsp1</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>&nbsp2</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>&nbsp3</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>&nbsp4</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>&nbsp5</a>
                    <a class="restmuell" href="#"><i class="fa fa-circle"></i>&nbsp6</a>
                    <a class="papiermuell" href="#"><i class="fa fa-circle"></i>&nbsp7</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>&nbsp8</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>&nbsp9</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>10</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>11</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>12</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>13</a>
                    <a class="gelber-sack" href="#"><i class="fa fa-circle"></i>14</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>15</a>
                    <a class="restmuell2" href="#"><i class="fa fa-circle"></i>16</a>
                    <a class="taken-day" href="#"><i class="fa fa-circle"></i>17</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>18</a>
                    <a class="close-day" href="#"><i class="fa fa-circle"></i>19</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>20</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>21</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>22</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>23</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>24</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>25</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>26</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>27</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>28</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>29</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>30</a>
                    <a class="clear-day" href="#"><i class="fa fa-circle"></i>31</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>&nbsp1</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>&nbsp2</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>&nbsp3</a>
                    <a class="light-day" href="#"><i class="fa fa-circle"></i>&nbsp4</a>
                </div>

            <div class="one-half-responsive last-column">      
                <div class="calendar-hours">
                    <a href="#" class="calendar-hour calendar-hour-taken">
                        <strong class="cal-from">Freitag</strong>
                        <strong class="cal-to">06.01.25</strong>
                        <h4>Restmüll</h4>
                        <em><i class="fa fa-map-marker"></i>Ober-Mörlen</em>
                    </a>                   
                    </div>
            </div>
            <div class="decoration"></div>      


        <!-- Page Footer-->
        <div class="footer">
            <p class="center-text">Copyright 2025. Alle Rechte vorbehalten.</p>

        </div>    

    </div>



</div>

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jqueryui.js"></script>
<script type="text/javascript" src="scripts/framework.plugins.js"></script>


 <script type="text/javascript" src="scripts/underscore.js"></script>
 <script type="text/javascript" src="scripts/moment.js"></script> 
<script type="text/javascript" src="scripts/clndr.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>

</body>

我希望有人可以帮助我让clndr.js正常工作！

0 个答案:

没有答案
相关问题
最新问题