jquery - 如何在全日历中加载 3rd 方引导程序

Question

我正在从这个 url https://fullcalendar.io/docs/v3/themeSystem学习将 3rd 方主题与这个日历集成。

我从这里获取了第 3 方引导日历：

https://bootsnipp.com/snippets/VXm8d

我正在尝试将其加载到上面一个，以便我可以在我的 html 中获取此日历，但一整天都无法完成任何事情。我不知道它是否可能？还是我做错了？

抱歉英语不好。请帮忙。

$(document).ready(function() {

        // page is now ready, initialize the calendar...
        var slotDuration = convert_float_time( $("#calendar_slot_duration").val() );
        console.log(slotDuration);
        var minTime = $("#calendar_min_time").val();
        var maxTime = $("#calendar_max_time").val();
        var user = $("#calendar_user").val();
        var calendarID = $("#calendar_id").val();

        $('#booking_calendar').fullCalendar({
            // put your options and callbacks here
            minTime: minTime,
            maxTime: maxTime,
            slotDuration: slotDuration + ':00',
            slotLabelInterval: slotDuration + ':00',
            slotLabelFormat: 'hh:mma',
            defaultView: 'agendaWeek',
            timezone: 'local',
            allDaySlot: false,
            theme: 'bootstrap3', //Not working
            eventSources: [
                {
                url: '/book/calendar/timeframe/' + calendarID,
                rendering: 'background',
                className: "booking_calendar_book_time"
                },
                {
                url: '/book/calendar/events/' + user,
                rendering: 'background',
                backgroundColor: '#ff0000'
                }

            ],
            eventRender: function (event, element) {
                if (event.className == 'wcb_back_event') {
                    element.append(event.title);
                }
            },
           dayClick: function(date, jsEvent, view) {


               var allEvents = [];
               allEvents = $('#booking_calendar').fullCalendar('clientEvents');
               var event = $.grep(allEvents, function (v) {
                   return +v.start === +date;
               });
               if (event.length == 0) {

                   this.template = 'website_calendar_booking.calendar_booking_modal';
                   var self = this;
                   self.$modal = $( qweb.render(this.template, {}) );
                   $('body').append(self.$modal);
                   $('#oe_website_calendar_modal').modal('show');
                   $('#booking_form_start').val(date);
                   $('#booking_form_calendar_id').val(calendarID);

                   self.$modal.find("#submit_calendar_booking").on('click', function () {
                       self.$modal.modal('hide');
                   });

           } else {
               alert("This timeslot has already been booked");
           }

           }
    }); //end fullcalendar load


function convert_float_time(float_time) {
    var format_time = ""
    var decimal = float_time % 1
    format_time = Math.floor(float_time) + ":" + (60 * decimal)
    return format_time
}

标签： jqueryhtmltwitter-bootstrapfullcalendarfullcalendar-3