我有一个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">
<!--   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> 1</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 2</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 3</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 4</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 5</a>
<a class="restmuell" href="#"><i class="fa fa-circle"></i> 6</a>
<a class="papiermuell" href="#"><i class="fa fa-circle"></i> 7</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 8</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 9</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> 1</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 2</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 3</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 4</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正常工作！