添加拖动功能以使用CLNDR.js从日历中选择多个（范围）日期

Posted 2021-03-31

我正在使用CLNDR.js lib制作日历，它适用于选择一个日期，但现在我们想通过拖动日历框（日期）来选择日期范围。

正如您在图像中看到的那样，用户可以拖动两个句柄，有jquery-ui可拖动但是任何人都可以通过这个来演示或指导我如何实现这个功能或者它是否可以通过CLNDR.js本身。 任何帮助将非常感激。

答案

所以我通过使用jquery拖放实现了这一点。只要单击其中一个框，我就会向其添加某个类并添加拖动处理程序。然后使盒子可以放置以放下它们上的手柄。如果你不熟悉jQuery拖放请有一个look。我删除了一些特定于我的项目的细节。我在这里分享的主要是用于此拖动功能的核心内容，除了您将看到的某些特定功能。我希望这有帮助。

// highlighting the box
   $(this).addClass("bg-white");

// adding drag handlers to the date box
  $(this).append('<div id="dragable-icons" ><span class="pull-left drag-icon" id="left-icon" style="z-index: 999; left:-8px" >' +
                '<i class="fa fa-arrows " aria-hidden="true"></i>' +
                '</span>' +
                '<span class="pull-right drag-icon" id="right-icon" style="z-index: 999; right:-8px">' +
                '<i class="fa fa-arrows" aria-hidden="true" ></i>' +
                '</span></div>')

 // making the icons draggable
            $("#left-icon , #right-icon").draggable({
                containment: ".calendar-rows", scroll: true
            });

 // all the boxes with class '.active' will be droppable (i.e box with 'active' class will be selected by dragging the icons on it)
            $(".day-active").droppable({
                accept: " #right-icon, #left-icon",
                over: function (event, ui) { // when the handle is over a box
                    if($(this).hasClass("day-unavailable")){
                            $(this).removeClass("day-unavailable");
                            $(this).addClass("prev-unavailable");
                        }
                    $(this).addClass("bg-white");
                },
                // drop: when icons dragging icons are dropped on some date box
                drop: function (event, ui) {
                    // if left icon moved then update startDateBox  otherwise endDatebox (calculations)

                    if ($(event.toElement.parentElement).hasClass("pull-left")) {
                        $(ui.draggable).detach().css({top: 25,left: -7}).appendTo(this);
                        startDateBox = $(this)
                    }
                    else {
                        $(ui.draggable).detach().css({top: 25,left: 7}).appendTo(this);
                        endDateBox = $(this)
                    }

                    $('.calendar-rows').find(".bg-white").removeClass("bg-white");
                    $(startDateBox).addClass("bg-white");
                    $(endDateBox).addClass("bg-white");
                    // get all selected boxes
                    datebox = $(".bg-white")
                    len = datebox.length
                    // generateDate(), getDates(), setDateModify() : notes at end of file
                    // selecting all dates between startDate and endDate
                    startdate = generateDate(datebox[0])
                    enddate = generateDate(datebox[len - 1])
                    var dateArray = getDates(new Date(startdate), (new Date(enddate)));
                    var length = dateArray.length;
                    for (i = 1; i < length; i++) {
                        if (parseInt(dateArray[i].getMonth() + 1) > 9) {
                            month = (parseInt(dateArray[i].getMonth()) + 1);
                        }
                        else {
                            month = "0" + (parseInt(dateArray[i].getMonth()) + 1);
                        }
                        if (dateArray[i].getDate() > 9) {
                            date = dateArray[i].getDate()
                        }
                        else {
                            date = "0" + dateArray[i].getDate()
                        }
                        date = dateArray[i].getFullYear() + "-" + month + "-" + date
                        var class_name = ".calendar-day-" + date
                        if ($(class_name).hasClass("day-unavailable")) {
                                $(class_name).removeClass("day-unavailable");
                                $(class_name).addClass("prev-unavailable");
                            }  
                        $(class_name).addClass("bg-white");

                    }
                    setDateModify(startdate, enddate)
                }
            });