下拉其他选定值时重新加载完整日历

时间:2015-06-05 04:03:04

标签: jquery fullcalendar

最初我已经在document.ready函数中声明了完整的日历,我在下拉列表中有一个列表。当我更改值时,我的日历控件不会根据下拉值更改。我在mvc做,jquery中的日历。

我的HTML页面内容

<div id="calendar"></div>

我的document.ready功能

function calender(stayIdP)
{

    stayid = stayIdP;
    alert(stayid);
    //------------------------------------------------------------------------
    // to find the start and end date 
    $.ajax({
        url: '@Url.Action("LoadStayEvents", "Vendor")',
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        data: "{'stayid':'" + stayid + "'}",
        type: "POST", // 'GET' or 'POST' ('GET' is the default)
        success: function (data) {
            //Data1 = data.split('&');
            data = JSON.parse(data);
            //Othercharges = JSON.parse(Data1[1]);
            var events = [];
            $.each(data, function (i, item) {

                BeginDate = moment(item.STARTDATE);
                EndingDate = moment(item.ENDDATE);


            });


        },
        error: function (xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
        }
    });

    $('#calendar').fullCalendar({
        //header: {
        //    left: 'prev,next',
        //    center: 'title',

        //},
        buttonHtml: {
            prev: '<i class="ace-icon fa fa-chevron-left"></i>',
            next: '<i class="ace-icon fa fa-chevron-right"></i>'
        },

        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        height: 600,

        defaultDate: defaultdate,
        selectable: false,
        selectHelper: true,
        //select: function (start, end, jsEvent, view) {
        //    showUserDetails(start, end, jsEvent, view);
        //},

        editable: true,
        eventLimit: true,
        droppable: true,


        drop: function (date, allDay) { // this function is called when something is dropped

            if (moment(date).format("YYYYMMDD") >= BeginDate.format("YYYYMMDD") && moment(date).format("YYYYMMDD") <= EndingDate.format("YYYYMMDD")) {
                $('#alert').hide();
                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');
                var $extraEventClass = $(this).attr('data-class');
                alert($(this).attr('data-class'));
                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);
                groupid = $(this).attr('id');
                alert($(this).data('eventObject').title);
                $('#txtGroupName').html($(this).data('eventObject').title);
                // copiedEventObject.id = $(this).attr('id');

                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                if ($extraEventClass) copiedEventObject['className'] = [$extraEventClass];

                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                $('#ChangeType').modal();

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }

            }
            else {


                $('#Alert').modal();
            }



        }
   ,
        dayRender: function (date, cell) {

            $.ajax({
                url: '@Url.Action("LoadStayEvents", "Vendor")',
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                data: "{'stayid':'" + stayid + "'}",
                type: "POST", // 'GET' or 'POST' ('GET' is the default)
                success: function (data) {
                    //Data1 = data.split('&');
                    data = JSON.parse(data);
                    //Othercharges = JSON.parse(Data1[1]);
                    var events = [];
                    $.each(data, function (i, item) {

                        var startDate = moment(item.STARTDATE);
                        var endDate = moment(item.ENDDATE);
                        //just compare the YYYYMMDD so don't run into problems with hour/minute/second, etc. if we used valueOf() or similar
                        if (moment(date).format("YYYYMMDD") >= startDate.format("YYYYMMDD") && moment(date).format("YYYYMMDD") <= endDate.format("YYYYMMDD")) {
                            // cell.addClass("pjpDay");
                        }
                        else {
                            cell.addClass("pjpDay");

                        };


                    });


                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });


        },

        eventClick: function (calEvent, jsEvent, view) {
            var dateClicked;


            $(this).css('border-color', 'red');
            var caseNumber = Math.floor((Math.abs(jsEvent.offsetX + jsEvent.currentTarget.offsetLeft) / $(this).parent().parent().width() * 100) / (100 / 7));
            // Get the table
            var table = $(this).parent().parent().parent().parent().children();
            $(table).each(function () {
                // Get the thead
                if ($(this).is('thead')) {
                    var tds = $(this).children().children();
                    dateClicked = $(tds[caseNumber]).attr("data-date");

                }
            });
            $("#dtoccid").val(calEvent.id);
            groupid = calEvent.id;
            Loadcharges(calEvent.id);
            $('#txtEventname').html(calEvent.title);
            //$('#EventDeatils').modal();


        },
        events: function (start, end, timezone, callback) {
            $.ajax({
                url: '@Url.Action("LoadserviceEvents", "Vendor")',
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                data: "{'stayid':'" + stayid + "'}",
                type: "POST", // 'GET' or 'POST' ('GET' is the default)
                success: function (data) {
                    // Data1 = data.split('&');
                    data = JSON.parse(data);

                    var events = [];
                    $.each(data, function (i, item) {
                        if (item.SERVICEGRP == 1) {

                            events.push({

                                id: item.UTID,
                                title: item.TITLE,
                                start: moment(item.USGDATE).format("YYYY-MM-DD"),
                                end: moment(item.USGDATE).format("YYYY-MM-DD"),
                                className: 'label-grey',
                                editable: false

                            });
                        }

                        if (item.SERVICEGRP == 2) {

                            events.push({

                                id: item.UTID,
                                title: item.TITLE,
                                start: moment(item.USGDATE).format("YYYY-MM-DD"),
                                end: moment(item.USGDATE).format("YYYY-MM-DD"),
                                className: 'label-success',
                                editable: false

                            });
                        }
                        if (item.SERVICEGRP == 3) {


                            events.push({

                                id: item.UTID,
                                title: item.TITLE,
                                start: moment(item.USGDATE).format("YYYY-MM-DD"),
                                end: moment(item.USGDATE).format("YYYY-MM-DD"),
                                className: 'label-danger',
                                editable: false

                            });
                        }

                        if (item.SERVICEGRP == 4) {
                            alert(moment(item.USGDATE).format("YYYY-MM-DD"));
                            events.push({

                                id: item.UTID,
                                title: item.TITLE,
                                start: moment(item.USGDATE).format("YYYY-MM-DD"),
                                end: moment(item.USGDATE).format("YYYY-MM-DD"),
                                className: 'label-yellow',
                                editable: false

                            });
                        }
                        if (item.SERVICEGRP == 5) {

                            events.push({

                                id: item.UTID,
                                title: item.TITLE,
                                start: moment(item.USGDATE).format("YYYY-MM-DD"),
                                end: moment(item.USGDATE).format("YYYY-MM-DD"),
                                className: 'label-purple',
                                editable: false

                            });
                        }


                    });

                    callback(events);

                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });
        },
        //eventRender: function (event, element) {

        //    event.disableDragging();
        //    event.disableResizing();


        //}
    });

我下载更改内容

function loadstaytype() {
    var stayi = $('#ddl option:selected').val();

    $.ajax({
        url: '@Url.Action("Loadguestinfo", "Vendor")',
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        data: "{'stayi':'" + stayi + "'}",
        type: "POST", // 'GET' or 'POST' ('GET' is the default)
        success: function (data) {

            data = JSON.parse(data);
            console.log(data);


            stayid = data.STAYID;
            defaultdate = moment(data.CHECKEDINDATE).format("YYYY-MM-DD");

            $('#calendar').fullCalendar('refresh');
            //calender(data.STAYID);
            $.ajax({
                url: '@Url.Action("LoadStayEvents", "Vendor")',
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                data: "{'stayid':'" + stayid + "'}",
                type: "POST", // 'GET' or 'POST' ('GET' is the default)
                success: function (data) {
                    //Data1 = data.split('&');
                    data = JSON.parse(data);
                    //Othercharges = JSON.parse(Data1[1]);
                    var events = [];
                    $.each(data, function (i, item) {

                        BeginDate = moment(item.STARTDATE);
                        EndingDate = moment(item.ENDDATE);


                    });


                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });

            calendar(stayid);


        },
        error: function (xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
        }
    });

}

在完整日历中它不会更改值。提前谢谢

1 个答案:

答案 0 :(得分:-1)

function bindCal(id) {
        var ddlStudio1Value = $("#ddlStudio1 option:selected").val();
        $('#calendar').fullCalendar('addEventSource', function (start, end, timezone, callback) {
            $.ajax({
                url: '@Url.Action("GetEvents", "FacultySchedule")',
                data: "{'status':'','StudioId':'" + ddlStudio1Value + "','FacultyId':0,'start':'" + start + "', 'end':'" + end + "'}",
                dataType: "json",
                type: "POST",
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function (doc) {
                    var events = [];
                    $(doc).each(function () {
                        $('#calendar').fullCalendar('removeEvents', $(this).attr('id'));
                        events.push({
                            id: $(this).attr('id'),
                            title: $(this).attr('title'),
                            start: $(this).attr('start'),
                            end: $(this).attr('end'),
                            color: $(this).attr('color'),
                            textColor: $(this).attr('textColor'),
                            someKey: $(this).attr('someKey'),
                            allDay: $(this).attr('allDay'),
                            CreatedBy: $(this).attr('CreatedBy'),
                            StatusRemark: $(this).attr('StatusRemark'),
                            DurationMnt: $(this).attr('DurationMnt'),
                            Studio: $(this).attr('Studio')
                        });
                    });
                    callback(events);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    }