CODEWITHSUNDEEP
ruby-on-railsjsonfullcalendar
Asarluhi
Asarluhi

Reputation: 1290

fullcalendar-rails: different calendars for different events places

I would like to use the gem 'fullcalendar-rails', based on the jQuery FullCalendar plugin from Adam Shaw, to organize my application's events.

I read the useful and well written tutorial by Fernando Perales, which is linked in the readme.md file. Since I would like to use fullcalendar-rails for my Rails 5 application, and I am new with json, I would like to ask some questions.

My Event model has a place attribute, which is the place where the event is held. My goal is to have different calendars for different places, because each place has its own events.

My idea is to insert in the Events index page the following form:

<%= form_tag(events_path, method: :get, id: "search-event-place") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search a place" %>
<%= submit_tag "Search", class: "btn btn-primary" %>
<% end %>

<% if @events.present? %>
  <div id="calendar"></div>
<% end %>

In this way users can look for a place and get all events held in that place, organised in fullcalendar. So, for instance, if a user search for an event in London, he will get a calendar with events in London...

The index action in the events controller would be as follows:

def index
  if params[:search]
    @events = Event.search(params[:search])
  else
    @events = nil
  end
end

Would it work if, after defining a search method in the Event model, I defined the instance variable @events used by the index.json.builder file as @events = Event.search(params[:search]) ?
The search method would be defined in the Event model as follows:

def self.search(search)
  where("place ILIKE ?", "#{search}")
end

Is the index page of the RESTful Events resource the right place to define @events? What events will I see if I go to: localhost:3000/events.json or to: localhost:3000/events?

One of my main concerns is this: since the show action of the RESTful Events resource corresponds to the url /events/1 for the event with id=1, I wonder if I will be routed correctly using for each event in the index.json.builder file the html format which generates a url such as /events/1.html. In fact, as common rails practice, I would insert the partial for the generic event in app/views/events/show.html.erb

Lastly: my users choose the day of the event with jQuery date picker, so the attribute event_date will be saved as a string with format "yy-mm-dd": how can I set json start and end? Are the start and end attributes necessary or can I choose only the day of the event?

Upvotes: 0

Views: 543

Answers (1)

davidwessman
davidwessman

Reputation: 1228

Hello!

1. Query

I think this would be more suitable as a scope:

  scope(:place, ->(search) { where('place LIKE ?', "%#{search}%") })

Then you can chain it with other queries and such.

Update:

This code should be added to your Event-model. Then you can call Event.place('search-string').where(sun: true) or the other way around, it is chainable.

2. Controller

You could use the index action, i.e.

def index
  respond_to do |format|
    format.html
    format.json do
      @events = set_events
    end
  end
end

def set_events
  if params[:place].present?
    Event.place(params[:place])
  else
    Event.all
  end
end

And if you have an events#index route, you can access it with extension .json and see the rendered json from your index.json.jbuilder.

E.g. if you access /events you will see the index.html.erb and /events.json?place=place1 will render all events with a place like place1 as json.

Update

The format.html allows rendering html as well as json.

3. View

This requires some decisions:

  1. Are your places predefined or user input?
  2. How do users search for places?

If the places are predefined (or can be accessed) I would render the calendars as:

<div class="fullcalendar" data-place="<%= 'place1' %>">
</div>

JS:

const calendars = document.getElementsByClass('fullcalendar');
Array.from(calendars).forEach(function(calendar) {
  const place = calendar.dataset.place;
  calendar.fullCalendar({
    eventSources: [{ url: '/events.json?place=' + place }],
    other_options:...
  });
});

4. Rest

I do not understand your concerns regarding show or what you mean by the datepicker - please elaborate!

Update

I tried to put everything together in a Gist this time. https://gist.github.com/davidwessman/7597e3eea4e71238d7f71a74928e64bd please check if out if it helps!

Upvotes: 2

Related Questions