The Full Calendar In Ruby on Rails Is Not Working

Question!

I'm trying to add a calendar to my web app but it's not working. I followed the instructions below and I can't get the calendar to populate.

Do I need to write all the Javascript as well? This seems like a quick step to install a calendar. I'm sure I'm missing some steps for installation but this is what I found online.

  1. Add to gemfile


    gem 'fullcalendar-rails'
    gem 'momentjs-rails'
    


2. Bundle install and restart rails server.


3. Add to application.js


    //= require moment 
    //= require fullcalendar
    $('#calendar').fullCalendar({});
  1. Add to application.css


    *= require fullcalendar
    
  2. In view, include the following html:


    <div id="calendar"></div>
    
By : jkloster7


Answers

You have to add options to the fullCalendar plugin so that it knows where to fetch event data from:

$('#calendar').fullCalendar({
    eventSources: ["/events"]
});

In the above example /events is a path to a controller of yours from which you will respond with Event Data

https://fullcalendar.io/docs/event_data/

Alternatively, you can provide your own event data directly to the fullCalendar plugin:

$('#calendar').fullCalendar({
    events: [
        {
            title  : 'event1',
            start  : '2010-01-01'
        },
        {
            title  : 'event2',
            start  : '2010-01-05',
            end    : '2010-01-07'
        },
        {
            title  : 'event3',
            start  : '2010-01-09T12:30:00',
            allDay : false // will make the time show
        }
    ]
});

https://fullcalendar.io/docs/event_data/events_array/

It will also help to place the plugin initializer inside a jQuery ready function so that the DOM loads first:

$(function() {
  $('#calendar').fullCalendar({ eventSources: ["/events"] });
})


I haven't seen the use of $route.params inside the route objects. What you can do though, in your vue you can dynamically load different components based on your $route.params

<component-a v-if="$route.params == 'a'"></component-a>


If you can specify the minimum ClientCustomerId length, e.g. it can never be less than four characters, you can limit the results thus:

WHERE ClientCustomerId like left('SoseJost75G', 4) + '%'

Here an index can be used to get the matching records. Your criteria

AND ClientCustomerId <= 'SoseJost75G' and ClientCustomerId

would then have to be looked up only in the records already found.

The complete query:

SELECT CustomerId
FROM Customer cust
WHERE ClientCustomerId like left('SoseJost75G', 4) + '%'
AND ClientCustomerId <= 'SoseJost75G' and ClientCustomerId;

BTW: Your criteria can also be written as

ClientCustomerId = left('SoseJost75G', length(ClientCustomerId))

but I suppose that this isn't faster than your version.



This video can help you solving your question :)
By: admin