0

我想在我的项目中使用日历，我已经使用了 table_builder gem 和 event_calendar gem，但是 fullcalendar gem 更适合我。问题是我找不到任何分步教程来使用它，而且不知何故我是 RubyOnRails 的新手。任何人都可以帮助我了解如何使用它吗？

4

1 回答 1

2

*我想出了如何使用完整日历 - 只需访问fullcalendar 网站并下载所需版本的 fullcalendar JavaScript 和 css 文件 - 在布局的标题中包含 fullcalendar.js 和 fullcalendar.css - 创建一个名为 calendar 的新 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)
    },
});

});

函数更新事件（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!")
  } 
});

};

模型和视图中还有其他代码会出现日历。我还更改了编辑事件函数的代码，因为它不适用于我并且在事件控制器中运行以进行编辑 - 任何帮助我随时都在这里。希望你能像我一样使用它

于 2012-09-10T14:46:33.543 回答