CODEWITHSUNDEEP
ruby-on-rails-3
olasaad
olasaad

Reputation: 21

RubyOnRails3 - FullCalendar

I would like to use calendar in my project, I already used table_builder gem and event_calendar gem but fullcalendar gem is more appropriate for me. The problem is I can't find any step by step tutorial to use it and somehow I'm new to RubyOnRails. Can any one help me to be able to understand how to use it please?

Upvotes: 0

Views: 497

Answers (1)

olasaad
olasaad

Reputation: 21

*I Figured Out how to use full calendar - just go to fullcalendar web site and download the required version of fullcalendar JavaScript and css files - include fullcalendar.js and fullcalendar.css in the header of layout - create a new js file called calendar and write the following code: * 

$(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)
    },
});

});

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

};

There are other code in the model and view in which the calendar will appear. also I changed the code of edit event function because it didn't work with me and function in the controller of event for edit- for any help I'm here any time. hope you can use it as I did

Upvotes: 2

Related Questions