2012-08-16 48 views
0

我想在我的項目中使用日曆,我已經使用過table_builder gem和event_calendar gem,但fullcalendar gem對我來說更合適。問題是我找不到任何一步一步的教程來使用它,不知何故,我是RubyOnRails的新手。任何人都可以幫助我理解如何使用它嗎?RubyOnRails3 - FullCalendar

回答

2

* 我想通了如何使用完整的日曆 - 只要去fullcalendar web site和下載fullcalendar JavaScript和CSS文件所需的版本 - 包括在佈局的頭fullcalendar.js和fullcalendar.css - 創建一個新的js文件稱爲日曆並編寫以下代碼:*

$(document).ready(function() { 

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

$('#my_calendar').fullCalendar({ 
    editable: true, 
    droppable: true, 
    theme: true,  
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    defaultView: 'month', 
    height: 500, 
    slotMinutes: 15, 

    loading: function(bool){ 
     if (bool) 
      $('#loading').show(); 
     else 
      $('#loading').hide(); 
    }, 

    // a future calendar might have many sources.   
    eventSources: [{ 
     url: '/events/index/', 
     color: 'yellow', 
     textColor: 'black', 
     ignoreTimezone: false 
    }], 

    dragOpacity: "0.5", 

    //http://arshaw.com/fullcalendar/docs/event_ui/eventDrop/ 
    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc){ 
     updateEvent(event); 
    }, 

    // http://arshaw.com/fullcalendar/docs/event_ui/eventResize/ 
    eventResize: function(event, dayDelta, minuteDelta, revertFunc){ 
     updateEvent(event); 
    }, 

    // http://arshaw.com/fullcalendar/docs/mouse/eventClick/ 
    eventClick: function(event, jsEvent, view){ 
     window.location = ('/events/show?id=' + event.id) 
    }, 
}); 

});

功能updateEvent(the_event){

$.ajax({ 
    type: 'POST',          
    url: '/events/update_js?id='+ the_event.id +"&startd=" + the_event.start+"&endd=" + the_event.end,     //the script to call to get data   
    data: {end: the_event.end, start: the_event.start } ,      //you can insert url argumnets here to pass to api.php 
            //for example "id=5&parent=6" 
    dataType: 'json',    //data format  
    success: function()   //on receive of reply 
    { 
    alert("done!") 
    } 
}); 

};

在模型和視圖中還有其他代碼可以顯示日曆。我也更改了編輯事件函數的代碼,因爲它不適用於我,並且在編輯事件的控制器中運行 - 我隨時都可以獲得幫助。希望你能像我一樣使用它