从数据库检索完整日历

我正在尝试使用完整的日历来在线呈现时间表。理想情况下，我希望有很多功能。最初，我想将它连接到我的SQL数据库，从包含特定用户事件的表中检索数据。我使用的是SQL压缩服务器和C#以及Razor语法。做这件事最好的方法是什么？

我正在使用网站上的可选演示，到目前为止我的代码是：

<html>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='../jquery/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='../jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },
            editable: true,
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                },
                {
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ]
        });
    });
</script>
<style type='text/css'>
    body {
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }
    #calendar {
        width: 800px;
        margin: 0 auto;
        }
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

这保存在.html文件中。我猜最好的方法是将其转换为.cshtml表单，并使用C#连接到类似于以下的数据库：

@{
    var db = Database.Open("myDB");
    var Name = Request["Title"];
    var Description = Request["Start"];
    var Price = Request["End"];
    var allDay = Request["myDB"];
}

使用此方法在JavaScript中填充我的事件的最佳方式是什么？

我会看看其他一些例子，比如json提要。在这里，您可以使用php，或者像我的情况一样，使用.net连接到后端数据库，后者将提供作为json提要的"回复"。FullCallendar拥有解释这个提要并显示它们的所有代码。

相关内容

最新更新

热门标签：