如何在单击下一个或返回完整日历后加载新数据

本文关键字:新数据 加载 数据 日历 单击 下一个 返回 | 更新日期: 2023-09-27 18:37:21

我正在使用与我的 ASP.NET MVC项目集成的Fullcalendar插件。我的主要任务包括创建预订时间表。我已经编写了负责显示特定日期的事件("按钮")的代码,并且工作正常!代码如下:

var calendar = $("#calendar").fullCalendar({
        weekends: false
         , lang: 'pl',
         header: {
             left:'',
             center: 'title',
             right: 'today prev,next'
         }, height: 630, week: true, columnFormat: 'dd M/D', minTime: '8:00', maxTime: '20:00', selectable: true,
        allDaySlot: false, eventColor: '#F6A828',       
        events: function (start, end, timezone, callback) {

            $.ajax({
                url: '/Dentist/GetEvents/',
                type: 'POST',
                contentType: "application/json",
                success: function (json) {
                    if (json.isRedirect) {
                        window.location.href = json.redirectUrl;
                    }
                    callback(json)
                    //
                }
            });           
        },
    })
    $('#calendar').fullCalendar('changeView', 'agendaWeek');

和方法 C# 中的 GetEvents

public JsonResult GetEvents()
    {
        if (Session["DoctorID"] == null)
        {
            return Json(new { redirectUrl = Url.Action("Terminarz", "Recepcjonista"), isRedirect = true });
        }
        var listEvent = new List<CallendarEvent>();
        List<CallendarEvent> list = TermRepository.GetAllEventsByDoctorId((int)Session["DoctorID"]);
        int licznik = 1;
        foreach (var item in list)
        {
            int count = Size(item.id, item.From, item.To);
            for (int i = 0; i < count; i++)
            {
                listEvent.Add(new CallendarEvent()
                {
                    id = licznik,
                    day = item.day,
                    Title = item.Title,
                    From = GetDay(item.day).AddHours(item.From.TimeOfDay.Hours).AddMinutes(item.From.TimeOfDay.Minutes).AddMinutes(i * 30),
                    To = GetDay(item.day).AddHours(item.From.TimeOfDay.Hours).AddMinutes(item.From.TimeOfDay.Minutes).AddMinutes(i * 30).AddMinutes(30)
                });
                licznik++;
            }
        }
         var listEvent2 = from l in listEvent
                        select new
                        {
                            id = l.id,
                            //day = l.day,
                            //Title = l.Title,
                            start = l.From,
                            end = l.To,
                            color = "#88CD23"
                        };
        return Json(listEvent2, JsonRequestBehavior.AllowGet);
    }

现在我想处理下一个和后退按钮并更改开始日期,结束 +7 天。我写了这样的东西,但不起作用 C#

public JsonResult GetEventsAdd(int move)
    {
        //all the same method as in GetEvents, but added days
                listEvent.Add(new CallendarEvent()
                {
                    id = licznik,
                    day = item.day,
                    Title = item.Title,
                    From = GetDay(item.day).AddHours(item.From.TimeOfDay.Hours).AddMinutes(item.From.TimeOfDay.Minutes).AddMinutes(i * 30).AddDays(move),
                    To = GetDay(item.day).AddHours(item.From.TimeOfDay.Hours).AddMinutes(item.From.TimeOfDay.Minutes).AddMinutes(i * 30).AddMinutes(30).AddDays(move)
                });
                licznik++;
            }
        }
       //all the same method as in GetEvents
        return Json(listEvent2, JsonRequestBehavior.AllowGet);
    }

并且脚本已更改

events: function (start, end, timezone, callback) {
            var data = { "move": 7 }
            $.ajax({
                url: '/Dentist/GetEvents/',
                type: 'POST',
                //data: JSON.stringify(calendar),
                //datatype: "json",
                contentType: "application/json",
                success: function (json) {
                    if (json.isRedirect) {
                        window.location.href = json.redirectUrl;
                    }
                    callback(json)
                    //
                }
            });
            $(".fc-next-button").one("click", function () {
                $.ajax({
                    url: '/Dentist/GetEventsAdd/',
                    type: 'POST',
                    data: JSON.stringify(data),
                    datatype: "json",
                    contentType: "application/json",
                    success: function (json) {
                        if (json.isRedirect) {
                            window.location.href = json.redirectUrl;
                        }
                        callback(json)
                        //$('#calendar').fullCalendar('refetchEvents');
                    }
                });
            }); 

我怎样才能得到这样的解决方案?

如何在单击下一个或返回完整日历后加载新数据

完整日历进行的 AJAX 调用传递当前视图的开始和结束日期范围。然后,仅当它没有存储日期时,它才会再次调用它。所以在你的/牙医/获取事件/获取"GET"变量:"START"和"END"。返回该范围内的事件。

然后只需使用FullCalendar中的本机"下一步","上一个"按钮,让它做它的事情。