CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapcalendar
Firkamon
Firkamon

Reputation: 807

Some features of a Bootstrap calendar do not work

I'm trying to implement this Bootstrap 3 calendar: http://bootstrap-calendar.azurewebsites.net/index-bs3.html (you can of course see its innards by looking at the source)

However, there are problems. Firstly, the checkbox to toggle modals do not work. Rather, to enable modals, one has to first click a day in the calendar (to get the black dropdown menu), and then they are enabled.

Secondly, the navigational buttons (week, day, month, prev, next, today) do not work at all. No error is caught. Only this warning:

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

Here's the relevant JS and HTML code:

<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>

And

<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>

Upvotes: 2

Views: 2174

Answers (1)

Eleazan
Eleazan

Reputation: 438

If you see the app.js in the calendar bootstrap, you can view how they initialize the buttons... it's not on the "core", you need to do too

EDIT: You have all of them in 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();
});

Upvotes: 4

Related Questions