个人中心
gpt4 book ai didi

javascript - bootstrap-year-calendar 不起作用

转载 作者：行者123 更新时间：2023-11-28 05:14:53 25 4
gpt4 key购买 nike

我想使用此网站的 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>

最佳答案

我也遇到了同样的问题，不过很容易解决。在 jS 上更改点的主题标签

$('#calendar').calendar({

至

$('.calendar').calendar({

在 Html 上，更改类的 data-provide

div data-provide="calendar"

至

div class="calendar"

关于javascript - bootstrap-year-calendar 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41050191/

25 4 0
文章推荐： php - 中的 Wordpress 关系循环
文章推荐： css - 在 JavaFX 应用程序中制作 Windows Phone 8 等量大小的磁贴
文章推荐： javascript - 如何在另一个页面中突破一个对象框？
文章推荐： html - CSS 如何在父 div 的每一侧放置 4 个 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com