Перетаскивание внешних событий в FullCalendar из скользящего слайдера - PullRequest
0 голосов
/ 04 июня 2018

Я использую слайдер и полный календарь вместе в одном из моих проектов.Полный календарь предлагает функцию перетаскивания внешних событий в календарь, как показано в этой демонстрации . Я не могу реализовать ту же логику, потому что мои события находятся внутри скользящего ползунка.Вот скриншот того, что я строю: screenshot А вот код:

<div class="menu-wrap">
    <div class="tab-pane gallery container-fluid" id="favorites">
        <div class="row d-none d-md-block gallery_wrapper">
            <div class="w-100 d-none d-md-block heroSlider-fixed">
                <div class="overlay">
                </div>
                <!-- Slider -->
                <div class="slider responsive six">
                    @for($i=1;$i<=12;$i++)
                        @component('components.menu-plan-componant')

                        @endcomponent
                    @endfor

                </div>
                <!-- control arrows -->
                <div class="prev six-prev">
                    <img src="{{URL::to('assets/images/icon/left_direction.svg')}}"
                         class="chevron-basic">
                </div>
                <div class="next six-next">
                    <img src="{{URL::to('assets/images/icon/right_direction.svg')}}"
                         class="chevron-basic">
                </div>
            </div>
        </div>
    </div>
</div>

код для скользящего слайдера:

$('.six').slick({
                    adaptiveHeight: true,
                    prevArrow: $('.six-prev'),
                    nextArrow: $('.six-next'),
                    infinite: false,
                    speed: 300,
                    slidesToShow: 6,
                    slidesToScroll: 6,
                    responsive: [
                        {
                            breakpoint: 1024,
                            settings: {
                                slidesToShow: 6,
                                slidesToScroll: 6,
                                infinite: true,
                                dots: true
                            }
                        },
                        {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
                        // You can unslick at a given breakpoint now by adding:
                        // settings: "unslick"
                        // instead of a settings object
                    ]
                });

И код дляполный календарь:

$('#calendar').fullCalendar({
                    droppable: true,
                    defaultView: 'Week',
                    header: false,
                    defaultDate: today,
                    navLinks: false, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',

                    drop: function() {
                        // is the "remove after drop" checkbox checked?
                        if ($('#drop-remove').is(':checked')) {
                            // if so, remove the element from the "Draggable Events" list
                            $(this).remove();
                        }
                    },


                    eventRender: function (event, element) {
                        element.find(".fc-event-title").remove();
                        element.find(".fc-event-time").remove();
                        var new_description = '#';
                        element.append(new_description);

                    },
                    now: today,
                    footer: {
                        left: 'promptResource',
                        center: '',
                        right: ''
                    },
                    customButtons: {
                        promptResource: {
                            text: '+ add course',
                            click: function () {
                                var title = prompt('Course name');
                                if (title) {
                                    $('#calendar').fullCalendar(
                                        'addResource',
                                        {title: title},
                                        true // scroll to the new resource?
                                    );
                                }
                            }
                        }
                    },
                    views: {
                        Week: {
                            type: 'timeline',
                            duration: {Days: '7'},
                            slotLabelInterval: {hours: 24},
                            slotDuration: {hours: 24},
                        }
                    },
                    resourceLabelText: 'Meal',
                    resourceRender: function (resource, cellEls) {
                        cellEls.on('click', function () {
                            if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
                                $('#calendar').fullCalendar('removeResource', resource);
                            }
                        });
                    },
                    resources: [
                        {id: 'a', title: 'Breakfast', eventColor: 'red'},
                        {id: 'b', title: 'Lunch', eventColor: 'green'},
                        {id: 'c', title: 'Dinner', eventColor: 'orange'},
                        {id: 'd', title: 'Other', eventColor: 'grey'},
                    ],

                    events: [
                        {id: '1', resourceId: 'b', start: today, end: today, title: 'event 1'},
                        {
                            id: '2',
                            resourceId: 'c',
                            start: '2018-04-07T05:00:00',
                            end: '2018-04-07T22:00:00',
                            title: 'event 2'
                        },
                        {id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3'},
                        {
                            id: '4',
                            resourceId: 'e',
                            start: '2018-04-07T03:00:00',
                            end: '2018-04-07T08:00:00',
                            title: 'event 4'
                        },
                        {
                            id: '5',
                            resourceId: 'f',
                            start: '2018-04-07T00:30:00',
                            end: '2018-04-07T02:30:00',
                            title: 'event 5'
                        }
                    ],
                    drop: function() {
                        // is the "remove after drop" checkbox checked?
                        if ($('#drop-remove').is(':checked')) {
                            // if so, remove the element from the "Draggable Events" list
                            $(this).remove();
                        }
                    }

                });

Как мне добиться функциональности перетаскивания событий, используя скользящий слайдер и полный календарь?

ОБНОВЛЕНИЕ: Если я сделаю элемент внутри скользкого перетаскиваемого элемента, он будет применять только область внутри скользящего ползунка, но не снаружи.Это показано на скриншоте ниже: ![enter image description here

1 Ответ

0 голосов
/ 04 июня 2018

Мне удалось расширить демонстрацию Fullcalendar в минимальный пример, включая Slick.Я использовал setTimeout, чтобы убедиться, что Slick завершил свои манипуляции с dom, прежде чем делать что-либо перетаскиваемое, но я полагаю, что Slick предоставляет некоторое правильное асинхронное событие, которое точно сообщает вам, когда оно закончилось (еще не проверял документы).Я думаю, что вы можете адаптировать эту минимальную установку в свое собственное приложение.

https://codepen.io/freemanlambda/pen/MXKPBp?editors=1010

...