Question

我在其中一个页面上使用FullCalendar，并且正在从我拥有的数据库中填充事件。

我基本上创建了事件：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,Title,StartDate,EndDate,DescriptionId,AllDay")] Event @event)
{
    if (ModelState.IsValid)
    {
        db.Events.Add(@event);
        db.SaveChanges();
        return RedirectToAction("Index", "Main");
    }

    return View(@event);
}

当我被重定向到Index控制器上的Main页面时，我刚刚创建的事件未显示在日历上。

以下是我的Index操作：

public class MainController : Controller
{
    private DbContextName db = new DbContextName();
    // GET: Main
    public ActionResult Index()
    {
        var data = db.Events.ToList();
        return View(data);
    }

    // more code not related to the question
}

以下是我填写日历的方式：

$('#calendar').fullCalendar({
    themesystem: 'bootstrap-yeti',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek'
    },
    allDay:true,
    navLinks: true, // can click day/week names to navigate views
    editable: false,
    print: true,
    eventLimit: true, // allow "more" link when too many events
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: submissionUrl,
            type: "GET",
            dataType: "JSON",
            success: function(result) {
                console.log(result);
                var events = [];

                $.each(result,
                    function(i, data) {

                        events.push({
                            title: data.Title,
                            description: data.Description,
                            start: moment(data.Start).format("YYYY-MM-DD HH:mm"),
                            end: moment(data.End).format("YYYY-MM-DD HH:mm"),
                            color: data.Color
                        });
                    });

                callback(events);
            },
            error: function(jqXHR) {
                console.log(jqXHR);
            }
        });
    },
    timeFormat: 'HH:mm', // uppercase H for 24-hour clock
    eventRender: function (event, element) {
        element.find('.fc-title').append("<br/>" + event.description);
    }
});

在我创建一个新事件并重定向到Index页面后，我检查控制台我看到除了刚刚创建的那个事件之外的所有事件..但是如果我刷新页面，那么事件就出现了，一切都还好。但是，为什么不在重定向上这样做呢？

更新

submissionUrl转到GetCalendarData控制器上名为Main的方法：

[HttpGet]
public ActionResult GetCalendarData()
{
    var data =
        db.Events.Select(
            x =>
                new
                {
                    Title = x.Title,
                    Description = x.Description.DescriptionTitle,
                    Start = x.StartDate,
                    End = x.EndDate,
                    Color = x.Description.Color
                }).ToList();

    return Json(data, JsonRequestBehavior.AllowGet);

}

Answer 1

<强>更新

尝试将cache: false添加到内部ajax调用中。这将使jquery尝试避免获取缓存数据。

供将来考虑

由于您的API服务似乎返回了与fullcalendar非常接近的内容，因此您可以简化定义填充事件的方式。

let eventUrl = 'http://myserver/myapp/mycontroller/geteventjson';

$('#calendar').fullCalendar({
                themesystem: 'bootstrap-yeti',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                allDay: true,
                navLinks: true, 
                editable: false,
                print: true,
                eventLimit: true,
                events: eventUrl, // Simply a url that returns JSON events
                timeFormat: 'HH:mm', 
                eventRender: function (event, element) {
                    element.find('.fc-title').append("<br/>" + event.description);
                }
            });

完整日历可以直接从您的服务填充，无需本地收藏。

事件创建后FullCalendar不更新

1 个答案: