Question

我正在尝试实施这个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>

Answer 1

如果您在日历引导程序中看到app.js，您可以查看它们如何初始化按钮......它不在＆＃34;核心＆＃34;上，您也需要这样做

编辑：你在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();
});

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

1 个答案: