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>

非常感谢任何帮助。

修改我设法解决了这个问题，这是我解决方案的代码：

        <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>

Answer 1

我设法在fullcalendar js中选择了一个小小的hack中的整个星期。在函数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>

在fullcalendar中选择整周

2 个答案: