Select entire week in fullcalendar

问题

im having trouble with the fullcalendar plugin where im trying to make an entire week selected in month view with just on click and then create an event of this. In other words, if you click any day on a specific week, that week will be highlighted and an event will be created. Thereafter this event should be entered into my database.

This is what I have so far:

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

Any help will be much appreciated.

回答1:

I managed to select entire week in monthview with a little hack in fullcalendar js. In fullcalendar js in function renderDayOverlay

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

It selects event for entire week and saves that event in that week. Still 1 issue is their regarding EndDate calculation for a week in consecutive months i.e. 28 Apr - 4 May. For other weeks it works.

回答2:

A few users didn’t notice that OP edited their question to include an answer, so for ease of access I’m reposting it as an answer so people don’t miss it. Full disclosure this is not my code, it is OP’s code, upvote his question instead of this answer. that being said here is the code:

(Also as I did not write it I cannot vouch for it working,nor can I explain it)

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

来源：https://stackoverflow.com/questions/16011421/select-entire-week-in-fullcalendar