0

プロジェクトでカレンダーを使用したいのですが、既に table_builder gem と event_calendar gem を使用していますが、fullcalendar gem の方が適しています。問題は、それを使用するためのステップバイステップのチュートリアルが見つからず、どういうわけか私は RubyOnRails を初めて使用することです。使い方を理解できるように助けてもらえますか?

4

1 に答える 1

2

*フル カレンダーの使用方法を理解しました - fullcalendar Web サイトにアクセスし、必要なバージョンの 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)
    },
});

});

関数 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!")
  } 
});

};

モデルとビューには、カレンダーが表示される他のコードがあります。また、編集イベント関数のコードを変更しました。これは、編集用のイベントのコントローラーで機能しなかったためです。いつでもここにいます。私がしたようにあなたがそれを使うことを願っています

于 2012-09-10T14:46:33.543 に答える