FullCalendar не загружает события

Я использую FullCalendar в своем приложении asp.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:"Джон, (2,1), 6",start:"05.13.2016, 00:00:00"},{title:"Оливия, (11,4), 6" ,start:"05.11.2016 00:00:00"}]

Получение следующей ошибки при проверке элемента. :
Не удалось загрузить ресурс: сервер ответил со статусом 400 (неверный запрос): http: localho../ABC/[%7Btitle:%22John,%20(4,6),%206 %22,начало:%2205/21/2016%201:05:00%20PM%22,конец:%2205/21/2016%201:30:00%20PM%22%7D,%7Btitle:%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 = [...]. Когда я использую предопределенные события, календарь показывает их идеально. Но когда я звоню на сервер, возникает ошибка. ПОКАЗЫВАЕТ ЛИ ПОЛНЫЙ КАЛЕНДАРЬ СОБЫТИЯ ТОЛЬКО ИЗ ФАЙЛА, ХРАНЯЩЕГОСЯ НА СЕРВЕРЕ. ПОТОМУ ЧТО В ДОКУМЕНТАЦИИ УКАЗАН ТОЛЬКО URL ФАЙЛА, СОДЕРЖАЩЕГО ДАННЫЕ JSON.

Помоги мне. Спасибо.


person DhavalR    schedule 19.05.2016    source источник
comment
где eventRender: действие?   -  person Sudarshan Kalebere    schedule 19.05.2016
comment
@SudarshanKalebere: пожалуйста, смотрите правку. Я пробовал оба варианта var events = ..., но события не загружаются. Я даже пробовал в document.Ready и без него оба events... варианта.   -  person DhavalR    schedule 19.05.2016


Ответы (3)


Ваша единственная настоящая проблема, из-за которой ваш календарь не отображается, заключается в следующем:

defaultView: 'agendaweek',

Должно быть

 defaultView: 'agendaWeek',

Да... Заглавная буква испортила твою дырку.

И вам не нужно все остальное

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

рядом с вашим основным. оставьте только это (с большой буквы W)

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

РЕДАКТИРОВАТЬ

Это потому, что ваш формат даты неверен. По умолчанию используется ММ/дд/ГГГГ. вы пытаетесь установить дату на 13 месяц. И причина, по которой у вас есть несколько календарей, заключается в том, что вы устанавливаете их несколько раз. Просто сделайте это один раз. Вы можете увидеть рабочий пример здесь с вашим json (я исправил даты). Просто очистите весь свой javascript и HTML, чтобы они были похожи на пример jsFiddle, а затем начните добавлять свои собственные вещи.

person Eyal Abir    schedule 20.05.2016
comment
изменение на agendaWeek показывает, что два календаря перекрываются. поэтому я изменил на basic, оба случая не загружают события. - person DhavalR; 20.05.2016
comment
Какую jquery версию вы добавили.? - person DhavalR; 21.05.2016
comment
В скрипке стоит 2.2.1, но я проверил на 1.7.2 и тоже работает. попробуйте добавить также moment.js и убедитесь, что он загружается до calendar.js - cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js - person Eyal Abir; 21.05.2016
comment
см. отредактированный код. работает отлично, но при получении данных из контроллера та же ошибка; нет в календаре. - person DhavalR; 22.05.2016
comment
Не уверен, что понял, какая ошибка все еще происходит. FcViews... Или ошибка 400? Или они оба? Ошибка 400 случалась и раньше? - person Eyal Abir; 22.05.2016
comment
400. Когда я пытаюсь получить записи с контроллера. - person DhavalR; 22.05.2016
comment
400 означает, что URL-адрес, который вы пытаетесь открыть, неверен. Попробуйте утешить. Зарегистрируйте @Url.Action(... Каков результат? - person Eyal Abir; 22.05.2016
comment
Я попытался отладить установку точки останова. Он отлично перенаправляется. См. код. Есть строка alert (jsonEvenys). Это дает точный результат, который я хочу. - person DhavalR; 22.05.2016
comment
Не могли бы вы отредактировать свой вопрос, чтобы указать, какие части кода актуальны сейчас? Есть 2 примера кода js. - person Eyal Abir; 22.05.2016
comment
Js в комментарии - это просто пример формата. Теперь следует рассмотреть часть jquery.extend и jasonEvents=url. - person DhavalR; 22.05.2016
comment
Давайте продолжим обсуждение в чате. - person Eyal Abir; 22.05.2016
comment
Привет, потерял тебя в чате, Это не файл. *.php — это серверный контроллер, как и у вас. все, что вам нужно сделать, это вернуть строку json из вашего контроллера. Ошибка 400 устранена путем перехода с POST на GET? - person Eyal Abir; 22.05.2016

попробуйте ниже код:

$(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;
    }
}
person Jignesh Jinjariya    schedule 20.05.2016
comment
Что мне делать с ColLoading.? И я получаю события в JsonResult, но просто не загружаю в календарь. Он показывает ошибку, которую я указал. - person DhavalR; 20.05.2016
comment
вам нужно удалить $.ajax(); код, который не требуется, поскольку мы предоставили. события: '/Booking/GetEvents/' в календарь. и он будет вызывать этот метод. уберите управление календарем из метода $.Ajax() и сохраните его в $(document).ready(function () { }; вы можете удалить var sourceFullView = { url: '/Booking/GetEvents/' }; var CalLoading = верно; обе эти строки - person Jignesh Jinjariya; 20.05.2016
comment
см. редактирование. и удаление функции ajax не вызывает метод GetEvents. Я пробовал /Booking/GetEvents/ и @Url.Action("","") в document.ready... - person DhavalR; 21.05.2016

пытаться

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

вместо

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

Нажмите здесь для полного ознакомления со свойствами объекта события.

person sucil    schedule 27.05.2016