Question

我想使用此网站上的bootsrap-year-calendar：http://www.bootstrap-year-calendar.com/

虽然它的广告很容易使用但我很挣扎。我正在使用Spring Boot V1.4.1，Bootstrap V3.3.7和Thymeleaf。

我从上面提到的软件中下载了所有源代码，我唯一可以用日历做的就是显示日历本身。我创建了一个名为calendar.js的新文件，我将所有JavaScript都放在日历的自定义函数中。我尝试显示周数，但它甚至没有显示它们。此页面上有一些带有标记日期的示例，但这些示例也未显示。

我尝试了不同的脚本和css文件的顺序，但不幸的是它没有用。虽然我遵循了安装页面给出的所有指令，但我尝试了其他日期选择器并且这些也没有用。到目前为止唯一有效的是ChartJs

我是否必须更改pom.xml中的依赖项？

我感谢任何帮助！

编辑：这是calendar.js的代码：

$(function() {
    var currentYear = new Date().getFullYear();

    var redDateTime = new Date(currentYear, 2, 13).getTime();
    var circleDateTime = new Date(currentYear, 1, 20).getTime();
    var borderDateTime = new Date(currentYear, 0, 12).getTime();

    $('#calendar').calendar({ 

        displayWeekNumber: true

        customDayRenderer: function(element, date) {
            if(date.getTime() == redDateTime) {
                $(element).css('font-weight', 'bold');
                $(element).css('font-size', '15px');
                $(element).css('color', 'green');
            }
            else if(date.getTime() == circleDateTime) {
                $(element).css('background-color', 'red');
                $(element).css('color', 'white');
                $(element).css('border-radius', '15px');
            }
            else if(date.getTime() == borderDateTime) {
                $(element).css('border', '2px solid blue');
            }
        }
    });
});

这是html文件的代码：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Bootstrap -->    
    <link th:href="@{/resources/css/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/resources/css/bootstrap-3.3.7-dist/css/bootstrap-theme.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/resources/css/bootstrap-year-calendar-master/css/bootstrap-year-calendar.css}" rel="stylesheet" type="text/css"/>

    <!--jQuery-->
    <script th:src="@{/resources/css/jquery-3.1.1.min.js}"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script th:src="@{/resources/css/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>

    <!--bootstrap-year-calendar-->
    <script th:src="@{/resources/css/bootstrap-year-calendar-master/js/bootstrap-year-calendar.js}"></script>
    <script th:src="@{/resources/css/bootstrap-year-calendar-master/js/calendar.js}"></script>
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-md-12">

          <div data-provide="calendar"></div>

        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

我遇到了同样的问题，但是很容易解决。在jS上，将点的＃标签更改为

$（'＃calendar'）。calendar（{

收件人

$（'。calendar'）。calendar（{

然后在HTML上，更改为课程提供的数据

div data-provide =“ calendar”

收件人

div class =“ calendar”

bootstrap-year-calendar不起作用

1 个答案: