FullCalendar

Question

使用 ASP.NET.

从 CodeBehind 获取 JSON 额外的 None 标准字段

我在将 "obj" 传递给 addEventSource 时正确获取 "standard" 标题、开始、结束、颜色、类名。

问题是我想使用“Events”和“eventRender”而不是使用“addEventSource" 以便能够处理 None 标准字段，这是行不通的。

是否可以将 object 或 JSON 传递给“Events”？

我也曾尝试使用“docd”（none parseJSON 字符串），但没有在日历中显示任何结果。使用全日历 3

例如

 events: obj, 
    eventRender: function(event, element) {
        Console.log(info.event.extendedProps.PrjectID)
    }

这是请求 Ajax:

 $.ajax({
                type: "POST",
                url: "Calender.aspx/GetTimeData",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ 'year': year, 'month': month, 'projectID': projectid }),
                dataType: "json"

            }).done(function (doc) {
                var events = [];
                docd = doc.d;
                obj = $.parseJSON(doc.d);
              }
                 });

额外参数：

ProjectID,UserID,WorkTypeID,Signed

Json:

  [{"Signed":1,"ProjectID":39,"WorkTypeid":1,"UserID":97,"id":719627,"start":"2019-01-01T07:00:00","end":"2019-01-01T15:00:00","title":"Test Title ","color":"#607d8b","className":null}]

********************* 更新 1 *********************

编辑了代码，ajax 请求在全日历环境中实现时没有任何问题，但是帖子不会出现在日历中，“ eventRender”未触发。

        $('#calendar').fullCalendar({

            loading: function (bool) {
                //LoadEvents();
                //alert('events are being rendered'); // Add your script to show loading
            },
            eventAfterAllRender: function (view) {
                //alert('all events are rendered'); // remove your loading 

            },
            navLinks: true,
            lazyFetching: false,
            height: "auto",
            aspectRatio: 2,
            weekends: true,
            weekNumbers: true,
            displayEventEnd: true,
            showNonCurrentDates: false,
            weekLabel: "V",
            allLocales: true,
            locale: "sv",
            header: false,
            //header: {
            //    //left: 'prev,next today',
            //    left: '',
            //    center: '',
            //    right: 'month,agendaWeek,agendaDay,listMonth'
            //},
            viewRender: function (element, view) {
                var title = view.title;
                $("#CalendarHeadTitle").html(title);
                //element.find('.fc-title').append("-test-"); 
            },
            dayClick: function (date, jsEvent, view) {
                $("#sDate, #eDate").val(moment(date).format("YYYY-MM-DD"));
                $('.modal').modal('show');
            },
            eventClick: function (info) {
                $('.modal').modal('show');
            },
            eventDrop: function (event, delta, revertFunc) {

                //TODO: Implement - call to move!

                if (!confirm("Vill du flytta ")) {
                    revertFunc();
                }
            },

            editable: true,
            events: function (start, end, timezone, callback) {

                $.ajax({
                    type: "POST",
                    url: "Calender.aspx/GetTimeData",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ 'year': $("#<%=DdlYear.ClientID%>").val(), 'month': $("#<%=DdlMonth.ClientID%>").val(), 'projectID': $("#<%=DdlProjects.ClientID%>").val() }),
                    dataType: "json"
                }).done(function (doc) {
                    var events = $.parseJSON(doc.d);
                    console.log(doc.d);
                    callback(events); //this provided callback function passes the event data back to fullCalendar
                });
            },
            eventRender: function (event, element) {
                console.log('event render action');
            }
        });

Answer 1

我认为您混淆了 fullCalendar 3 和 fullCalendar 4 的语法和功能。它们是 very different。

Console.log(info.event.extendedProps.PrjectID)

会失败，因为

a) 你没有在你的函数参数中定义一个 info 变量（所以你应该得到一个控制台错误，虽然你没有提到一个），并且

b) 即使你修复了它，我也强烈怀疑（根据你用于 eventRender function, and the fact you're making extensive use of jQuery) that you're actually using fullCalendar 3, whose event object 的签名没有 "extendedProps" 属性.

如果我的假设是正确的，那么我希望

console.log(event.ProjectID);

输出需要的数据。

P.S。您的代码显示有些脱离上下文，所以我不确定您将如何加载事件，但您不需要在日历环境之外进行 AJAX 调用的过程，然后将生成的数组稍后传递给日历。相反，使用 fullCalendar 的 built-in 功能之一来处理动态事件源。对于您的情况，events-as-a-function 选项可能是最合适的。这是将数据连接到日历的推荐方式。

你可以这样实现：

events: function( start, end, timezone, callback ) {
  $.ajax({
    type: "POST",
    url: "Calender.aspx/GetTimeData",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ 'year': year, 'month': month, 'projectID': projectid }),
    dataType: "json"
  }).done(function (doc) {
    var events = $.parseJSON(doc.d);
    callback(events); //this provided callback function passes the event data back to fullCalendar
  });
}

FullCalendar 每次需要新事件时都会运行此代码（例如，当加载日历时，以及每当用户更改日历视图以涵盖尚未获取事件的日期范围时） .如您所见，fullCalendar 通过回调参数为您提供 start 和 end 日期，您可以将这些日期直接传递给您的服务器以帮助它过滤 returns 涵盖的事件列表所需的日期范围。您的代码目前接受 "month" 和 "year"，因此可以从传入的开始日期开始获取它们，但是如果您使用的不是 "month" 视图，那么这将不够灵活。

FullCalendar - None 带有 addEventSource 的标准字段

FullCalendar - None Standard Field with addEventSource

asp.net

json

fullcalendar-3