0 
<script type="text/javascript">
    $(document).ready(function() {
    // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({


            url: 'http://localhost/CalendarAPI/api/calendar/'
    })

    });
    </script>

WebAPI Json からカレンダー データをフィードしたいと考えています。上記のリンクをクリックすると、JSON データが表示され、適切にフォーマットされた JSON データをダウンロードできます。

上記の JSON を FullCalender JQuery プラグインにフィードする際に助けが必要です。

4

2 に答える 2

2

js コードは次のようになります。

$('#calendar').fullCalendar({
   url: '/api/ControllerName/GetEvents/'
})

GetEvents - アクション名。

イベントのモデルは次のようになります。

public class EventModel
{
    public int id { get; set; }
    public DateTime? start { get; set; }
    public DateTime? end { get; set; }
    public string title { get; set; }
    public bool allDay { get; set; }
}

コントローラーで、次のようなコードでアクション (GetEvents) を作成します。

public IEnumerable<EventModel> GetEvents()
    {
        //data from database
        CalendarEntities _db = new CalendarEntities();
        var events = _db.Events.ToList();
        IEnumerable<EventModel> listEvents = events.Select(_event => new EventModel
        {
            id = _event.Id,
            title = _event.Caption,
            start = _event.TimeStart,
            end = _event.TimeEnd,
            allDay = _event.AllDay
        });
        return listEvents;
    }
于 2015-05-08T07:25:05.880 に答える
1

fullcalendar のドキュメントは非常に優れています。ぜひご覧ください: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

スクリプトからデータを含める方法はいくつかあります。最も簡単な方法は次のとおりです。

$('#calendar').fullCalendar({
    events: '/myfeed.php'
});

拡張フォームを使用して、より多くのオプションを渡すこともできます。

$('#calendar').fullCalendar({

    eventSources: [

        // your event source
        {
            url: '/myfeed.php',
            type: 'POST',
            data: {
                custom_param1: 'something',
                custom_param2: 'somethingelse'
            },
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: 'yellow',   // a non-ajax option
            textColor: 'black' // a non-ajax option
        }

        // any other sources...

    ]

});
于 2012-12-06T09:12:14.020 に答える