Как я могу «опубликовать» данные полного календаря обратно на сервер?

Question

Я интегрирую FullCalendar в веб-форму.

FullCalendar получает данные из скрытого поля формы. Как это:

var data = jQuery.parseJSON(jQuery('#fullcalendar_data').val());

Тогда FullCalendar делает это потрясающе, позволяя пользователю редактировать.

Когда пользователь завершит работу, он нажимает «Сохранить» в форме.

Как я могу получить данные о событиях FullCalendar обратно в скрытое поле формы как JSON, чтобы «Сохранить» отправляло их обратно на сервер?

Answer 1

Используйте этот код для получения событий из вашего календаря:

<script type='text/javascript'>
function savedata(){
$(document).ready(function () {
    $(function () {
        $("#save").click(function () {
            var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents');
            alert(eventsFromCalendar);
            $.ajax(
        {

            url: '@Url.Action("Save")',
            type: 'POST',
            traditional: true,
            data: { eventsJson: JSON.stringify(eventsFromCalendar) },
            dataType: "json",
            success: function (response) {
                alert(response);
            },
            error: function (xhr) {
                debugger;
                alert(xhr);
            }

        });
        });
    });
});
 }
 </script> 

и создайте метод контроллера для получения таких данных:

[HttpPost]
public ActionResult Save(string eventsJson)
{
var events = JsonConvert.DeserializeObject<IEnumerable<Event>>(eventsJson);
return View();
}

 public class Event
{
    public int Id { get; set; }



    public string Title { get; set; }
    public DateTime Start { get; set; }
    public DateTime End { get; set; }
}

И вы можете вызвать эту Javaфункция сценария для любого события на вашей странице, например onclick, делая его функцией и т. д.

Answer 2

@ ppumkin, который НЕ будет работать, так как он передается как объект на серверную часть, вам нужно его указать

var eventsFromCalendar = $ ('# calendar'). FullCalendar ('clientEvents');

    var eventsForCookie = [];

    $.each(eventsFromCalendar, function(index,value) {
        var event = new Object();
        event.id = value.id;            
        event.start = value.start;
        event.end = value.end;
        event.title = value.title;
    event.allDay = value.allDay
        eventsForCookie.push(event);
    });             
    $("#all_events").val(JSON.stringify(eventsForCookie));

После этого вы можете отправить его на сервер, который вы можете проанализировать с помощью JSON.parse (Ruby)

Answer 3

Ответы на этот вопрос почти правильные.Сам вопрос очень старый, поэтому может быть, поэтому они больше не работают.

Для тех, у кого есть вопрос в будущем, я выложу свое решение.Мое решение - это комбинация ответа Джаханзаиба и исправление ошибки stringify в этом коде.

function savedata() {
        $(document).ready(function () {
            $(function () {
                $("#save").click(function () {
                    var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents', function (e) {
                            return true;
                        }
                        return false;
                    });
                    for (var i = 0; i < eventsFromCalendar.length; i++)
                    {
                        if (eventsFromCalendar[i].borderColor == 'red')
                        {
                            $('#errorMsg').show();
                            return;
                        }
                    }
                    alert(eventsFromCalendar);
                    $.ajax
                        ({
                    url: '@Url.Action("Save")',
                    type: 'POST',
                    traditional: true,
                    data: {
                        eventsJson: JSON.stringify(eventsFromCalendar.map(function (e)
                        {
                            return {
                                start: e.start,
                                end: e.end,
                                title: e.title,
                            }
                        }))
                    },
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    },
                    error: function (xhr) {
                        debugger;
                        alert(xhr);
                    }
                });
                });
            });
        });
    }

Answer 4

Как говорят другие, используйте

.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array

источник: http://fullcalendar.io/docs/event_data/clientEvents/

Пример использования:

Клиентская сторона

$('#submitchange').click(function() {
        var clientevents = $('#calendar').fullCalendar('clientEvents');
        $.ajax({
            url: '/eventupdate',
            type: 'POST',
            data: {clientdata: JSON.stringify(clientevents)},
            success: function (response) {
                //get the response from server and process it
                $("#calendarupdated").append(response);
            }
        });
    });

Сторона сервера (пример Python Flask):

@app.route('/eventupdate',methods=['POST'])
def eventupdate():
    client_ev = request.form.get('clientdata')
    #convert the json strings into list of event objects
    cev_list = json.loads(client_ev)
    #do whatever you need here to update the database,etc
    return 'Calendar has been updated'

Answer 5

Лучший способ вернуть весь канал - использовать clientEvents

.fullCalendar( 'clientEvents')

http://arshaw.com/fullcalendar/docs/event_data/clientEvents/

В зависимости от того, как вы получаете и отправляете данные, я полагаю, вы захотите это сделатьчто-то вроде

$('#fullcalendar_data').val($('FullCalendarObject').fullCalendar('clientEvents'));

, затем отправьте его на сервер и обработайте все остальное.

Answer 6

Возможно, вы сможете работать с Client Events методом.Похоже, что это вернет массив объектов, которые вы могли бы затем преобразовать в любую форму, которую вы хотели.