Jquery fullcalendar与eventDrop无法在生产中工作

时间:2017-12-12 15:34:10

标签: jquery fullcalendar jquery-ui-draggable

我在我的应用程序中使用fullcalendar,并且还拖放Jquery将事件拖到日历中。 它在开发环境中工作正常,但在IIS中发布时无效。 我已经检查过脚本路径是否正确。 似乎所有工作都在我的fullcalendar对象中的eventDrop和eventReceive之外。

这是我的全日历代码:

    $('#calendar').fullCalendar({
    height: $(window).height() * 0.90,
    scrollTime: "08:00:00", // Starting hours scroll starts in the view
    timezone: 'local',
    navLinks: true, // can click day/week names to navigate views
    eventLimit: true, // limit events in a cell for all non-agenda views
    aspectRatio: 2.50, // control the day cell height in month view
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    allDaySlot: false, // remove "all days" cell
    titleRangeSeparator: " - ",
    header: {
        left: 'next,prev today',
        center: 'title',
        right: 'agendaDay,agendaFiveDay,week1,month1'
    },
    slotLabelFormat: 'H:mm',
    defaultView: "agendaFiveDay",
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar
    // triggered when a drop activity from an external source occurs
    eventReceive: function (event) {
        addActivity(event.start, event.resourceId, event.docNum, event.docType, event.title, event.tooltipContent, shifted, g_psDb, g_sUser, function (addActivityResult) {
            if (addActivityResult.Message != "OK") {
                toastr["error"](addActivityResult.Message)
                $('#calendar').fullCalendar('removeEvents', event._id)
            }
            else {
                // set the activity id of the new added activity recieved from the DB 
                event.id = addActivityResult.ActivityId;
                // remove the dropped item from the open tasks list in the view
                elements = $('#openActivities .item')
                $.each(elements, function (i) {
                    if ($(this).data('event').docNum == event.docNum) {
                        $(this).remove();
                    }
                });
            }
        })
    },
    eventRender: function (event, element) {
        element.css("background-color", event.color);

        // create the tooltip for each event
        s = moment(event.start).format("HH:mm");
        e = moment(event.end).format("HH:mm");
        element.qtip({
            content: {
                text: event.tooltipContent,
                title: e + ' - ' + s
            },
            style: 'qtip-bootstrap', // Give it some style
            position: {
                my: 'left center',
                at: 'right middle'
            },
            show: {
                delay: 500, solo: true
            },
            hide: {
                when: 'mouseout', delay: 400
            }
        })
        // Create context menu when right clicking an activity, ignore when it is background activity
        element.bind('mousedown', function (e) {
            if ((e.which == 3) && (this.className != "fc-bgevent")) {
                $('#menu').hide();
                $('#menu').css({ 'top': e.pageY - 50, 'left': e.pageX, 'position': 'absolute', 'border': '1px solid black' });
                $('#menu').data("element", element) // pass the DOM element to the menu
                $('#menu').data("event", event) // pass the activity OBJECT to the menu
                $('#menu').show();
            }
        });
    },
    eventAfterAllRender: function (view) {
        // give background color to even days
        if (view.name == 'week1' || view.name == "agendaFiveDay" || view.name == "agendaFourDay" || view.name == "agendaTwoDay") {
            $.each($("td"), function () {
                var date = $(this).attr("data-date");
                if (typeof date != "undefined" && date != false) {
                    // If element has thiViewss attribute
                    date = new Date(date);
                    var day = date.getDate().toString();
                    if (day % 2 == 0)
                        $(this).css("background-color", "#f6f6f6");
                }
            })
        }
    },
    views: {
        month1: {
            type: 'month',
            duration: { months: 1 },
            // group by day FIRST with resources underneath
            groupByDateAndResource: true
        },
        week1: {
            titleFormat: 'YYYY, D MMMM',   // The date format for this view
            type: 'agenda',
            duration: { weeks: 1 },
            /// group by day FIRST with resources underneath
            groupByDateAndResource: true,
            columnFormat: "ddd D/M"
        },
        agendaFourDay: {
            titleFormat: 'YYYY, D MMMM',   // The date format for this view
            type: 'agenda',
            duration: { days: 4 },
            groupByDateAndResource: true,
            columnFormat: "ddd D/M"
        },
        agendaFiveDay: {
            titleFormat: 'YYYY, D MMMM',   // The date format for this view
            type: 'agenda',
            duration: { weeks: 1 },
            groupByDateAndResource: true,
            columnFormat: "ddd D/M",
            hiddenDays: [5, 6] // don't show Friday and Sautarday
        },
        agendaTwoDay: {
            titleFormat: 'YYYY, D MMMM',   // The date format for this view
            type: 'agenda',
            duration: { days: 2 },
            groupByDateAndResource: true
        }
    },
    resources: [], // This line must be here to implemet resources in the calendar
    eventSources: [
        {
            events: function (start, end, timezone, callback) {
                var startDate = new Date(start);
                var endDate = new Date(end);
                getFixedActivities(startDate, endDate, function (events) {
                    callback(events)
                })
            }
        },
        {
            events: function (start, end, timezone, callback) {
                var startDate = new Date(start);
                var endDate = new Date(end);
                getAvailableHours(startDate, endDate, function (events) {
                    callback(events)
                })
            },
            color: 'green' // TODO: set as database variable
        }
    ],
    // trigers each time an activity resizes
    eventResize: function (event, delta, revertFunc) {
        updateActivity(event, shifted, function (activityResult) {
            if (activityResult.Message != "OK") {
                // alert(activityResult.Message)
                toastr["error"](activityResult.Message)
                revertFunc();
            }
        })
    },
    // triggers every time an internal activity being moved
    eventDrop: function (event, delta, revertFunc) {
        updateActivity(event, shifted, function (activityResult) {
            if (activityResult.Message != "OK") {
                //alert(activityResult.Message)
                toastr["error"](activityResult.Message)
                revertFunc();
            }
        })
    }
});
    function OnSuccess(response) {
    $("#openActivities").empty();
    var activities = response.d;
    $(activities).each(function (i) {
        // format the date
        var dueDate = new Date(parseInt(this.DueDate.substr(6)));
        dueDate = dueDate.toLocaleDateString();
        // Create list item with the data retrieved
        var $element = $("<li class='item'>" + this.WebListItem + "</li>");
        // add the created item to the list
        $("#openActivities").append($element);
        // animation of adding items to open activities list
        $element.delay(200 * i).animate({ opacity: 1 }).slideDown('slow');
        // store data on the list item so the calendar will be able get it later
        $element.data('event', {
            title: this.Content, // Use the title input as the event title
            duration: "01:00", // The duration in HH:mm format
            docType: this.DocType,
            docNum: this.DocNum,
            color: g_defaultStatusColor,
            tooltipContent: this.TooltipContent,
            cancel: false // will determine if to remove the event from the calendar 
        });

        // make the event draggable using jQuery UI
        $element.draggable({
            containment: 'window',
            scroll: false,
            helper: 'clone',
            revert: true,      // will cause the event to go back to its
            revertDuration: 0,  //  original position after the drag
            start: function () {
                $(this).css("cursor", "pointer");
                $(this).css("opacity", 0.4);
            },
            stop: function () {
                $(this).css("opacity", 1);
            }
        })
    })
}

0 个答案:

没有答案