簡體   English   中英

在Fullcalendar jQuery中顯示事件?

[英]Displaying events in Fullcalendar jquery?

使用“事件”上的函數,我無法顯示事件,但是如果我使用控制台中通過使用同一返回變量的console.log生成的字符串,則可以顯示事件。 為什么?

$(document).ready(function () {

                    var date = new Date();
                    var d = date.getDate();
                    var m = date.getMonth();
                    var y = date.getFullYear();

                    // page is now ready, initialize the calendar...
                    var calendar = $('#calendar');
                    calendar.fullCalendar({
                        // put your options and callbacks here
                        'theme': false,
                        'header': {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        'weekends': false,
                        'defaultView': 'agendaDay',
                        axisFormat: 'HH:mm',
                        timeFormat: {
                            // for agendaWeek and agendaDay
                            agenda: 'H:mm{ - H:mm}', // 5:00 - 6:30
                            // for all other views
                            '': 'H(:mm)t'            // 7p
                        },
                        minTime: 8,
                        ignoreTimezone: true,
                        editable: true,
                        selectable: true,
                        selectHelper: true,
                        select: function (startDate, endDate, allDay, jsEvent, view) {
                            /*
                             after selection user will be promted for enter title for event.
                             */
                            var title = prompt('Event Title:');
                            /*
                             if title is enterd calendar will add title and event into fullCalendar.
                             */
                            if (title) {
                                calendar.fullCalendar('renderEvent',
                                        {
                                            title: title,
                                            start: startDate,
                                            end: endDate,
                                            allDay: allDay
                                        },
                                        true // make the event "stick"
                                );
                            }
                            calendar.fullCalendar('unselect');
                        },
                        eventDrop: function (event, delta) {
                            alert(event.title + ' was moved ' + delta + ' days\n' +
                                    '(should probably update your database)');
                        },
                        events: function getjson() {

                            var out;

                            $.ajax({
                                url: 'http://localhost:8000/calendar/api/events/events/',
                                type: 'GET',
                                async: false,
                                success: function (data) {
                                    out = JSON.stringify(data['objects']);
                                },
                                error: function () {
                                    alert('errore');
                                }
                            });
                            console.log('hshshshshsh', out);
                            return out;

                        }

我正在使用顯示事件對象的json資源

您可以直接輸入網址(如說這里 ):

calendar.fullCalendar({
    events: 'http://localhost:8000/calendar/api/events/events/'
});

以下代碼對我有用。.它可能對您有用。.只需根據您的代碼進行更改

 events: function (start, end, callback) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Put your url here",
                    dataType: "json", // datatype returned by the webservice

                    success: function (data) {
                        var events = $.map(data.d, function (item, i) {
                            var event = new Object();
                            event.id = item.id;
                            event.start = new Date(item.date);
                            event.title = item.title;
                            event.color = item.color;

                            return event;
                        });
                        callback(events);

                    }, //end of Success function

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                                          alert("StatusEvents: " + textStatus);
                                                 alert("Error: " + errorThrown);
                    }

                }); //end of Ajax Function


            } //end of events function

我的json實體就像

 [Serializable]
public class Events 
{
    public int id { get; set; }
    public string title { get; set; }
    public DateTime date { get; set; }
    public string color { get; set; }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM