7

FullCalendarasp.net mvc アプリケーションで使用しています。イベントはロードされません。ajax呼び出しでイベント一覧を取得しています。以下は私のコードです。何が問題なのですか？

<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <div class="panel-body">
                <div id="calendar"></div>
            </div>
        </section>
    </div>
</div>
<script type="text/javascript">
    jQuery.extend({
        getValues: function (url) {
            var result = null;
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (data) {
                    result = data;
                },
                error: function (err) {
                    alert(JSON.stringify(err));
                }
            });
            return result;
        }
    });
    var jsonEvents = $.getValues('@Url.Action("GetEvents", "Booking")');
    alert(jsonEvents);

    //var jsonEvents = [{ title: "Dhaval, (4,6), 6", start: "05/21/2016 1:05:00 PM" },
    //    { title: "Mohit, (2), 4", start: "05/21/2016 1:05:00 PM" }]

    $('#calendar').fullCalendar({
        header:
        {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },
        allDay: true,
        defaultView: 'agendaWeek',
        events: jsonEvents//'@Url.Action("GetEvents", "Booking")'
    });
</script>

**コメント内の js は単なる例の形式です。** そして、GetEvents/Controller以下のように、

public Json GetEvents()
{
    string query = "query to get events";
    // columns in result table are: id, title, date
        try
        {
            SqlConnection connection = new SqlConnection("connectionString");
            connection.Open();
            SqlCommand command = new SqlCommand(query, connection);
            SqlDataReader events = command.ExecuteReader();
            DataTable dt = new DataTable();
            dt.Load(events);
            string result = DataTableToJSONWithStringBuilder(dt);
            connection.Close();
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex) { }
    }
public string DataTableToJSONWithStringBuilder(DataTable table)
    {
        var JSONString = new StringBuilder();
        if (table.Rows.Count > 0)
        {
            JSONString.Append("[");
            for (int i = 0; i < table.Rows.Count; i++)
            {
                JSONString.Append("{");
                for (int j = 0; j < table.Columns.Count; j++)
                {
                    if (j < table.Columns.Count - 1)
                    {
                        JSONString.Append(table.Columns[j].ColumnName.ToString() + ":" + "\"" + table.Rows[i][j].ToString() + "\",");
                    }
                    else if (j == table.Columns.Count - 1)
                    {
                        JSONString.Append(table.Columns[j].ColumnName.ToString() + ":" + "\"" + table.Rows[i][j].ToString() + "\"");
                    }
                }
                if (i == table.Rows.Count - 1)
                {
                    JSONString.Append("}");
                }
                else
                {
                    JSONString.Append("},");
                }
            }
            JSONString.Append("]");
        }
        return JSONString.ToString();
    }

これが私が望むフォーマットです。 [{title:"John, (2,1), 6",start:"13/05/2016 12:00:00 AM"},{title:"オリビア, (11,4), 6",start: "2016 年 11 月 5 日午前 12:00:00"}]

要素を検査すると、次のエラーが発生します。:
リソースのロードに失敗しました: サーバーはステータス 400 (Bad Request) で応答しました: http: localho../ABC/[%7Btitle:%22John,%20(4,6),%206%22,start:% 2205/21/2016%201:05:00%20PM%22,end:%2205/21/2016%201:30:00%20PM%22%7D,%7Bタイトル:%22オリビア,%20(2),% 204%22,開始:%2205/21/2016%201:05:00%20PM%22,終了:%2205/21/2016%201:30:00%20PM%22%7D]?start=2016-05 -15&end=2016-05-22&_=1463885539445

ここで私はコメントしvar jsonEvents = [...]ました。定義済みのイベントを使用すると、カレンダーに完璧に表示されます。しかし、サーバーを呼び出すと、エラーが発生します。 FULLCALENDAR は、サーバーに保存されたファイルからのイベントのみを表示しますか? ドキュメントには、JSON データを含むファイルへの URL のみが示されているためです。

助けて。ありがとう。

4

3 に答える 3

5

カレンダーが表示されない唯一の本当の問題は次のとおりです。

defaultView: 'agendaweek',

それはする必要があります

 defaultView: 'agendaWeek',

はい...大文字があなたの穴を台無しにしました。

そして、あなたは他のすべてを必要としません

$("#calendar").fullCalendar(...)

あなたのメインの横に。これだけキープ (Capital W)

$('#calendar').fullCalendar(
            {
                header:
                {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultView: 'agendaWeek',
                selectable: false,
                selectHelper: false,
                events: events
            });

編集

これは、日付の形式が正しくないためです。デフォルトは MM/dd/YYYY です。日付を月 13 に設定しようとしています。複数のカレンダーがあるのは、複数回設定したためです。一度だけやってください。ここであなたのjsonで実際の例を見ることができます（日付を修正しました）。すべての JavaScript と HTML を jsFiddle の例のようにきれいにしてから、独自のものを追加してください。

于 2016-05-20T11:22:41.647 に答える
2

試す

events: { url: '@Url.Action("GetEvents", "Booking")', type:'GET', ..}

それ以外の

events :'@Url.Action("GetEvents", "Booking")'

イベント オブジェクト プロパティの完全なリファレンスについては、ここをクリックしてください。

于 2016-05-27T19:09:55.270 に答える
2

以下のコードを試してください：

$(document).ready(function () {

    var sourceFullView = { url: '/Booking/GetEvents/' };
    var CalLoading = true;

    $('#calendar').fullCalendar({
        header: {
            left: '',
            right: '',
            center: 'prev,title,next',
        },
        defaultView: 'month',
        editable: true,
        allDaySlot: false,
        selectable: true,
        slotMinutes: 15,
        droppable: true,
        events: '/Booking/GetEvents/'
    });
});

そこでのクエリからの JSON 応答で何を得ているのかわかりません。そのため、Entity Framework Linq クエリを使用してレコードをフェッチしてみることができれば、以下のサンプル コードが役立ちます。

public JsonResult GetEvents()
{
    try
    {
        var eventsList = from ev in db.YourTableName
        select new
        {
            Id = ev.Id,
            Title = ev.Title,
            Date = ev.Date
        };
        var rows = eventsList.ToArray();
        return Json(rows, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        throw ex;
    }
}
于 2016-05-20T17:47:30.937 に答える