[Rails] I made a simple calendar mini app with customized specifications.

Introduction

I wanted a calendar for my app, so I made it so that I could customize the Simple Calendar mini app. I made "Full Calendar" before, but I didn't seem to be able to plug in the functions I wanted, so I would like to make "Simple Calendar" that can be implemented in detail.

Completion drawing

table of contents

1. Create a new application
2. Introduction of simple_calendar
3. Creating a template for the calendar function
4. Calendar display and implementation of "Add event" function
5. Adjust the appearance

Target person

Those who want to introduce a calendar Those who can implement MVC

Development environment

ruby 2.6.5 rails 6.0.0 Database mysql2 0.4.4 simple_calendar 2.0

Implementation

Let's implement it ~

1. Create a new application

First, launch a new application.

Terminal.

% rails _6.0.0_ new simple_calendar_app -d mysql
% cd simple_calendar_app
% rails db:create

The database is created with mysql.

Terminal.

Created database 'simple_calendar_app_development'
Created database 'simple_calendar_app_test'

You now have a database.

2. Introduction of simple_calendar

Gemfile.

gem 'simple_calendar', '~> 2.0'

Terminal.

% bundle install

Don't forget to bundle install! !!

3. Creating a template for the calendar function

After creating the controller and view and setting the routing, create the model. 3.1 Controllers and views 3.2 Set up routing 3.3 Create a model

3.1 Controllers and views

Terminal.

% rails g controller events index

Terminal.

      create  app/controllers/events_controller.rb
       route  get 'events/index'
      invoke  erb
      create    app/views/events
      create    app/views/events/index.html.erb
      invoke  test_unit
      create    test/controllers/events_controller_test.rb
      invoke  helper
      create    app/helpers/events_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/events.scss

By setting "events index" when creating a controller, the view corresponding to the events controller and the routing settings will be set.

3.2 Set up routing

ruotes.rb

Rails.application.routes.draw do
  get 'events/index' 
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  #Up to this point, it is automatically set when the controller is generated.

  #This time set to
  root to: 'events#index'
  resources :events
end

This time, we will set'events # index'to root and use resources, so delete the automatically set description.

3.3 Create a model

Terminal.

% rails g model event

Edit the migration file that is automatically generated with the model.

2020XXXXXXX_create_events.rb

class CreateEvents < ActiveRecord::Migration[6.0]
  def change
    create_table :events do |t|
      #Add these three
      t.string :title
      t.text :content
      t.datetime :start_time

      t.timestamps
    end
  end
end

I will define it in the view after this, but it seems that it will be output to the calendar by setting "t.datetime: start_time". Also, since this is a mini app, there are three columns to save, but it needs to be customized according to the app to be developed.

Terminal.

%  rails db:migrate

When you start the server with rails s, the automatically generated view page will be displayed.

First of all, this is the template.

4. Calendar display and implementation of "Add event" function

Next, since this is a mini app, we will implement the minimum required three functions.

4.1, calendar display 4.2, addition of events 4.3, display additional events on the calendar

4.1, calendar display

We will edit the controller and view.

/app/controllers/events_controller.rb

class BlogsController < ApplicationController

  def index
    @events = Event.all #← Add this
  end
end

/app/views/events/index.html.erb

<h1>Events#index</h1>
<p>Find me in app/views/events/index.html.erb</p>
<%#Since it is automatically generated so far, it is deleted%>

<%#Add the following%>
<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>
<% end %>

Terminal.

%  rails s

Start the server and check it once.

The default image is displayed. We'll fix the look later, but we'll add features first.

4.2, addition of events

We will edit the controller and view again. Before editing, create a new folder under views> events.

First, add a new method to the controller.

/app/controllers/events_controller.rb

class EventsController < ApplicationController
  def index
    @events = Event.all
  end
  #New method added
  def new
    @event = Event.new
  end
end

Next, add a button to the view to move to the "Add Event" page.

/app/views/events/index.html.erb

 
<%= link_to 'Event addition', new_event_path %> #←link_to postscript

<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>
<% end %>

Look for the transition destination "new_event_path" in rails routes.

It's a little derailed, but when I wanted to know which view was supported from the URI Pattern, I found that it was displayed by holding the cursor and pressing "command" + click.

URI Pattern /events/new Move the cursor to ↑ and press "command" + click to move to the corresponding view.

You can now move to the event addition page.

Then, edit the new file created earlier.

/app/views/events/new.html.erb

<h1>test</h1>

<%= form_with(model: @event, local: true) do |form| %>

  <div class="title">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

    <div class="time">
    <%= form.label :start_time %>
    <%= form.datetime_select :start_time %>
  </div>

  <div class="content">
    <%= form.label :content %>
    <%= form.text_field :content %>
  </div>


  <div class="submit">
    <%= form.submit %>
  </div>

<% end %>

It looks like this. An input page (new page) has been created!

Since it cannot be saved as it is, edit the controller.

/app/controllers/events_controller.rb

class EventsController < ApplicationController

#abridgement

  def create
    Event.create(event_parameter)
    redirect_to root_path
  end

  private

  def event_parameter
    params.require(:event).permit(:title, :content, :start_time)
  end

end

You can save it by adding the create method.

If you fill in the form and check "Sequel Pro", you can see that it is saved. However, it has not yet appeared in the calendar.

4.3, display additional events on the calendar

The contents saved earlier will be displayed (reflected) on the calendar. Edit the view.

/app/views/events/index.html.erb

<%= link_to 'Event addition', new_event_path %>

<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>

<%#Addition from here%>
  <% events.each do |event| %>
    <div>
      <%= event.title %>
    </div>
  <% end %>
<%#Added up to here%>
<% end %>

The event you just added is now displayed in your calendar.

5. Adjust the appearance

Since the appearance is the default, I will arrange it.

From the official website of Simple Calendar. https://github.com/excid3/simple_calendar/blob/master/README.md

Terminal.

% rails g simple_calendar:views

You'll get a file that will quickly trim your view.

create  app/views/simple_calendar
create  app/views/simple_calendar/_calendar.html.erb
create  app/views/simple_calendar/_month_calendar.html.erb
create  app/views/simple_calendar/_week_calendar.html.erb

It will be reflected by adding the following to application.css.

app/assets/stylesheets/application.css

#abridgement

 *= require simple_calendar #← Addendum
 *= require_tree .
 *= require_self

Completion drawing

It was completed! !! !! After that, by adding MVC, you can customize the editing function and deletion function. Personally, I am developing a customer reservation management application, so I will apply it to that.

[Rails] Introduced Simple Calendar to personal development apps Will be updated at a later date

Summary

This time, I implemented the following in the mini app.

1. Create a new application
2. Introduction of simple_calendar
3. Creating a template for the calendar function
4. Calendar display and implementation of "Add event" function
5. Adjust the appearance

With the above implementation, it is possible to display the added event on the calendar.

This time we have implemented the minimum functionality, but we need to customize it according to each specification.

Finally

I am a beginner in programming, but I am posting an article in the hope that it will help people who are similarly troubled. This time, I posted it as a record of the first work for personal development. See you next time ~

reference

official https://github.com/excid3/simple_calendar/blob/master/README.md

These two articles were very helpful. Thank you! https://qiita.com/miriwo/items/ca2a64bdf8098beccd28 https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0