Как загрузить стороннюю Bootstrap в fullcalendar - PullRequest
Новая
       33

Как загрузить стороннюю Bootstrap в fullcalendar

0 голосов
/ 09 апреля 2020

Я учусь по этому URL https://fullcalendar.io/docs/v3/themeSystem для интеграции сторонней темы с этим календарем.

Я взял сторонний bootstrap календарь отсюда:

https://bootsnipp.com/snippets/VXm8d

Я пытаюсь загрузить это выше единицы, чтобы я мог взять этот Календарь в своем html, но не смог ничего добиться в течение всего дня. Я не знаю, возможно ли это или нет? или я делаю не так?

Извините за плохого Энгли sh. Пожалуйста помоги. 

$(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
}
...