修改

Question

我使用fullcalendar来创建日程安排。我所做的是，每周必须只有3个时间表（处理日期，支付日期和信用日期）。如果该周已有计划，我需要提示用户已设置计划。但如果没有设置时间表，用户仍然可以发布新的时间表。我已经完成了这个调度程序的逻辑，我唯一的问题是如何禁用本周的设置日程表之间的日期？

例如，我设定04-24-2018（处理日期），04-24-18（支付日期）和04-26-18（信用日期）..

如何禁用该周的04-22-18,04-23-18,04-25-18,04-27-18和04-28-18，以便用户无法为该周创建新的时间表？

schedule image

JAVASCRIPT

select:
            function (start, end, jsEvent, view, resource) {
            IsDateHasEvent(start);
}

function IsDateHasEvent(date) {
    var allEvents = [];
    allEvents = $('#calendar').fullCalendar('clientEvents');
    var event = $.grep(allEvents, function (v) {
        //alert(v.start);
        //return +v.start == +date;
        if (v.start <= date) {
            $("#eventIsAlreadySetModal").modal();
            //alert(v.start);
        }

    });
    return event.length > 0;
}

每当我尝试提醒开始日期的值时，我都可以通过事件获取所有日期。但两者之间的日期仍未被禁用。

有人可以帮我解决这个问题吗？非常感谢你。

完整的Javascript代码

$(document).ready(function () {
    var events = [];
    var selectedEvent = null;
    FetchEventAndRenderCalendar();


    // ******************************************
    // GET ALL SCHEDULES AND DISPLAY IN CALENDAR
    // ******************************************
    function FetchEventAndRenderCalendar() {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetSchedule")',
            success: function (data) {
                $.each(data, function (i, v) {
                    var eColor = "";
                    if (v.status == 'Completed')
                    {
                        eColor = '#3498DB';
                    }
                    if (v.status == 'Active') {
                        eColor = '#2CB05B';
                    }
                    if (v.status == 'Pending') {
                        eColor: '#DE6209';
                    }

                    events.push({
                        eventID: v.scheduleId,
                        title: v.processedDescription,
                        start: moment(v.processedDatetimeStart),
                        status: v.status,
                        color: eColor
                    });

                    events.push({
                        eventID: v.scheduleId,
                        title: v.payoutDescription,
                        start: moment(v.payoutDatetimeStart),
                        status: v.status,
                        color: eColor
                    });

                    events.push({
                        eventID: v.scheduleId,
                        title: v.creditDescription,
                        start: moment(v.creditDatetimeStart),
                        status: v.status,
                        color: eColor,
                        end: moment(v.creditDatetimeStart)
                    });


                })


                GenerateCalendar(events);
            },
            error: function (error) {
                alert('failed');
            }
        })
    }


// ******************************************
    // GENERATE THE CALENDAR VIEW AND SCHEDULES
    // ******************************************
    function GenerateCalendar(events) {
        $('#calendar').fullCalendar('destroy');
        $('#calendar').fullCalendar({
            contentHeight: 500,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month, agendaWeek, agendaDay, listWeek'
            },
            navLinks: true,
            editable: true,
            eventLimit: true,
            eventColor: '#2CB05B',

            droppable: false,
            timeFormat: 'h(:mm)A',
            timeZone: 'local',

            events: events,

            // **************************************
            // display the saved schedule in calendar
            // **************************************
            eventClick:
            function (calEvent, jsEvent, view) {                    
                $("#statusLabel").text(calEvent.status);
                $("#schedId").val(calEvent.eventID);
                $("#schedDesc").html(calEvent.title);
                $("#txtDateStart_Edit").val(calEvent.start.format("MM-DD-YYYY HH:mm A"));
                $('#modalEditSchedule').modal();

                if ($("#statusLabel").html() == "Completed")
                {
                    $("#btnEditSched").hide();
                }

                if ($("#statusLabel").html() == "Active") {
                    $("#btnEditSched").hide();
                }

            },

 // *************************************************
            // select dates in calendar for posting new schedule
            // *************************************************
            selectable: true,
            selectOverlap: true,
            select:
            function (start, end, jsEvent, view, resource) {

                IsDateHasEvent(start);
            },

 // *********************************************
            // disable past navigation button for past dates
            // *********************************************
            viewRender: function (currentView) {
                var minDate = moment();
                // Past dates
                if (minDate >= currentView.start) {    
                    $(".fc-prev-button").prop('disabled', true);
                    $(".fc-prev-button").addClass('fc-state-disabled');
                }
                else {
                    $(".fc-prev-button").removeClass('fc-state-disabled');
                    $(".fc-prev-button").prop('disabled', false);
                }
            },

            // ******************************
            // disable past dates in calendar
            // ******************************
            validRange: function (dateNow) {
                return {
                    start: dateNow.subtract(1, 'days')
                };
            }

            , dayClick: function (date) {
                var events = $('#calendar').fullCalendar('clientEvents');
                for (var i = 0; i < events.length; i++) {
                    //if (moment(date).isSame(moment(events[i].start))) {
                    if (moment(events[i].start) <= moment(date)) {
                        alert('with events');
                        break;
                    }
                    else //if (i == events.length - 1) 
                    {
                        alert('none');
                    }
                }
            }
        });
    }

    // **********************************
    // show modal for adding new schedule
    // **********************************
    function openAddEditForm() {
        $('#modalAddSchedule').modal();
    }



});

function IsDateHasEvent(date) {
    var allEvents = [];
    allEvents = $('#calendar').fullCalendar('clientEvents');
    var event = $.grep(allEvents, function (v) {
        //alert(v.start);
        //return +v.start == +date;
        if (v.start <= date) {
            $("#eventIsAlreadySetModal").modal();
            //alert(v.start);
        }

    });
    return event.length > 0;
}

Answer 1

你需要：

检查同一周内是否至少有3个时间表;
如果有，则禁用该周的其他日期。

右？我将尝试使用javascript Date class解决问题的第一部分。我不了解FullCalendar，所以如果有人能解决这个问题，我会很高兴，呵呵。

我们必须检查一周何时开始以及何时结束。正因为如此，我们准备做一些疯狂的事情。

function printDate(year, month, day) {
    month = (month < 10 ? '0' : '') + month.toString();
    day = (day < 10 ? '0' : '') + day.toString();
    return year + '-' + month + '-' + day;
}
function weekStart(dateString) {
    var dateObject = new Date(dateString);
    var dayOfWeek = dateObject.getDay();
    if(dayOfWeek > 0) {
        dateObject.setDate(day - dayOfWeek);
    }
    return printDate(dateObject.getFullYear(), dateObject.getMonth()+1, dateObject.getDate());
}

function weekEnd(dateString) {
    var dateObject = new Date(dateString);
    var dayOfWeek = dateObject.getDay();
    if(dayOfWeek < 6) {
        dateObject.setDate(day + (6-dayOfWeek));
    }
    return printDate(dateObject.getFullYear(), dateObject.getMonth()+1, dateObject.getDate());
}
function weekRange(dateString) {
    return [weekStart(dateString), weekEnd(dateString)];
}

很好，现在我们可以获得一周＆＃34;周范围＆＃34;从约会。但是从那以后，我们能得到那周的所有日期吗？肯定。

function getDatesFromWeek(wStart) {
    var dates = [],
        date = new Date(wStart),
        count = 0;
    while(count <= 6) {
        date.setDate(date.getDate() + count);
        dates.push(printDate(date.getFullYear(), date.getMonth()+1, date.getDate());
        count++;
    }
    return dates;
}

完美。所以现在我们应该计算每个范围。假设您正在接收有关名为schedules的变量的信息，并且每个计划都有一个名为date的索引：

var weeks = {}, lockedDates = [];
for(var x in schedules) {
    var week = weekRange(schedules[x].date);
    var weekID = week.join('-');
    if(weeks[weekID] == undefined) {
        weeks[weekID] = 1;
    } else {
        weeks[weekID]++;
    }
    if(weeks[weekID] == 3) {
        lockedDates = lockedDates.concat(getDatesFromWeek(week[0]));
    }
}

然后，您必须以[{1}}格式禁用列在lockedDates变量上的所有日期。你知道怎么做其他的吗？

修改

让我们改变我对此所做的最后一部分：

YYYY-MM-DD

如何在fullcalendar

1 个答案:

修改