Bootstrap日历的一些功能不起作用

Some features of a Bootstrap calendar do not work

本文关键字：功能 不起作用 日历 Bootstrap      更新时间：2023-09-26

我正在尝试实现这个Bootstrap 3日历:http://bootstrap-calendar.azurewebsites.net/index-bs3.html(您当然可以通过查看源代码看到其内部结构)

然而，也有问题。首先，切换模态的复选框不起作用。相反，要启用情态，必须首先单击日历中的某一天(以获得黑色下拉菜单)，然后启用它们。

其次，导航按钮(周、日、月、上、下、今天)根本不起作用。没有捕获错误。只有这个警告:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

以下是相关的JS和HTML代码: 
<head>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.cookie.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}underscore/underscore.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}bootstrap-calendar/js/calendar.js"></script>
</head>

和

<div class="container">
    <div class="page-header">
        <div class="pull-right form-inline">
            <div class="btn-group">
                <button class="btn btn-primary" data-calendar-nav="prev"><< Prev</button>
                <button class="btn" data-calendar-nav="today">Today</button>
                <button class="btn btn-primary" data-calendar-nav="next">Next >></button>
            </div>
            <div class="btn-group">
                <button class="btn btn-warning" data-calendar-view="year">Year</button>
                <button class="btn btn-warning active" data-calendar-view="month">Month</button>
                <button class="btn btn-warning" data-calendar-view="week">Week</button>
                <button class="btn btn-warning" data-calendar-view="day">Day</button>
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span9">
            <div id="calendar"></div>
        </div>
        <div class="span3">
                <label class="checkbox">
                    <input checked type="checkbox" value="#events-modal" id="events-in-modal"> Open events in modal window
                </label>
            <h4>Events</h4>
            <ul id="eventlist" class="nav nav-list"></ul>
        </div>
    </div>
    <script LANGUAGE="javascript">
        var calendar = $("#calendar").calendar(
            {
                tmpl_path: "{{ STATIC_URL }}bootstrap-calendar/tmpls/",
                modal: "#events-modal",
            events_source: [
        {
            "id": 293,
            "title": "{{ user }}",
            "url": "http://example.com",
            "class": "event-important",
            "start": 1406160000000, // Milliseconds
            "end": 1406205837000 // Milliseconds
        }]
            });         
    </script>

    <div class="modal fade" id="events-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Event</h3>
            </div>
            <div class="modal-body" style="height: 400px">
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>
</div>
    </div>

如果你在日历引导中看到app.js，你可以看到它们是如何初始化按钮的…它不在"core"上，你需要做too

编辑:它们都在app.js中:

$('.btn-group button[data-calendar-nav]').each(function() {
    var $this = $(this);
    $this.click(function() {
        calendar.navigate($this.data('calendar-nav'));
    });
});
$('.btn-group button[data-calendar-view]').each(function() {
    var $this = $(this);
    $this.click(function() {
        calendar.view($this.data('calendar-view'));
    });
});
$('#first_day').change(function(){
    var value = $(this).val();
    value = value.length ? parseInt(value) : null;
    calendar.setOptions({first_day: value});
    calendar.view();
});
$('#language').change(function(){
    calendar.setLanguage($(this).val());
    calendar.view();
});
相关文章：