jquery - 在全日历中选择整周

Question

我在使用 fullcalendar 插件时遇到问题，我试图通过单击在月视图中选择一整周，然后创建一个事件。换句话说，如果您单击特定周的任何一天，该周将突出显示并创建一个事件。此后，应将此事件输入我的数据库。

这是我到目前为止所拥有的：

<script>
    $(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
// page is now ready, initialize the calendar...

$("#calendar").fullCalendar({
    // put your options and callbacks here
    header: {
            right: "today prev,next",
            left: "title",
        },
    height:650,
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            var title = confirm("Apply for kitchenweek?");
            if (title) {
                calendar.fullCalendar("renderEvent",
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar("unselect");
        },
    editable: true,
    events: "/json-events.php"
   })
  });
</script>

任何帮助都感激不尽。

Answer 1

我设法在月视图中选择了整整一周，并在 fullcalendar js 中做了一点修改。在函数 renderDayOverlay 中的 fullcalendar js

function renderDayOverlay(overlayStart, overlayEnd, refreshCoordinateGrid) {
overlayStart.setDate(overlayStart.getDate()-overlayStart.getDay());
overlayEnd.setDate(overlayStart.getDate() + 7);
.
.
.
.
overlayEnd.setDate(overlayEnd.getDate() - 1); // last line of function

它选择整周的事件并在该周保存该事件。还有一个问题是他们关于连续几个月（即 4 月 28 日至 5 月 4 日）一周的 EndDate 计算。对于其他几周，它有效。

Answer 2

一些用户没有注意到 OP 编辑​​了他们的问题以包含答案，因此为了便于访问，我将其重新发布为答案，这样人们就不会错过它。完全披露这不是我的代码，它是 OP 的代码，支持他的问题而不是这个答案。这里所说的是代码：

（也因为我没有写它我不能保证它的工作，我也不能解释它）

   <script>
        $(document).ready(function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
    // page is now ready, initialize the calendar...

   var calendar = $("#calendar").fullCalendar({
    // put your options and callbacks here
    header: {
            right: "today prev,next",
            left: "title"
        },
    height:650,
    events: "/json-events.php",
    //selectable: true,
        selectHelper: true,
    dayClick: function(start, allDay, jsEvent, view) {
        $(this).parent().siblings().removeClass("week-highlight");
        $(this).parent().addClass("week-highlight");
        if(start < date && start.getDate() != date.getDate())
        {
            alert("Cannot select past dates.");
            $(this).parent().removeClass("week-highlight");
            return;
        }
            var title = confirm("Apply for kitchenweek?");
             var now = date? new Date(start-1) : new Date();
             now.setHours(0,0,0,0);
             var monday = new Date(now);
             monday.setDate(monday.getDate() - monday.getDay() + 1);
             var sunday = new Date(now);
             sunday.setDate(sunday.getDate() - sunday.getDay() + 7);
            if (title) {
                calendar.fullCalendar("renderEvent",
                    {
                        title: "Kitchenweek for: '; echo $username; echo'",
                        start: monday,
                        end: sunday,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            var mondaydate = $.fullCalendar.formatDate(monday,"yyyy-MM-dd");
            var sundaydate = $.fullCalendar.formatDate(sunday,"yyyy-MM-dd");
            var pname = "Kitchenweek for: '; echo $username; echo'";
            var username = "'; echo $username; echo'";
            $.ajax({
            type: "POST",
            url: "/new_event.php",
            data: {
            startdate: mondaydate,
            enddate: sundaydate,
            event_title: pname,
            uname: username
            }
            });
            }
            $(this).parent().removeClass("week-highlight");
        }
});
});
</script>