2012-02-22 4 views
0

Я пытаюсь использовать full calendar, чтобы сделать расписание онлайн. В идеале, я хотел бы иметь много функциональности с этим. Первоначально я хотел бы подключить его к моей базе данных SQL, извлекать данные из таблицы, содержащей события для конкретного пользователя. Я использую SQL compact server и 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# для подключения к базе данных аа похожее на это:

@{ 
    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 имеет весь код для интерпретации этого фида и отображения их.

Смежные вопросы