2012-02-22 143 views
0

我想用full calendar來在線呈現時間表。理想情況下,我希望有很多功能。最初,我想將它連接到我的SQL數據庫,從包含特定用戶的事件的表中檢索數據。我正在使用SQL緊湊型服務器和C#以及Razor語法。做這件事的最好方法是什麼?fullcalendar從數據庫檢索

我從網站上選擇演示和工作到目前爲止我的代碼是這樣的:

<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#連接到與此類似AA數據庫:

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

什麼是使用這種填充我的事件在JavaScript的最好方法?

回答

0

我會看看其他一些例子,如json feed。在這裏你可以使用一個php,或者在我的情況下,一個.net連接到一個後端數據庫,它將提供一個'回覆'作爲json提要。 FullCallendar具有解釋此提要並顯示它們的所有代碼。