[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

スクリーンショット 2020-10-29 17.57.24.png

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.

スクリーンショット 2020-10-29 14.29.18.png 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. スクリーンショット 2020-10-29 14.59.57.png

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.

スクリーンショット 2020-10-29 15.01.34.png

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. スクリーンショット 2020-10-29 17.57.40.png 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

スクリーンショット 2020-10-29 17.57.24.png 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

Recommended Posts

[Rails] I made a simple calendar mini app with customized specifications.
[Rails] I tried to create a mini app with FullCalendar
I made a rock-paper-scissors app with kotlin
I made a rock-paper-scissors app with android
I made a LINE bot with Rails + heroku
I made a portfolio with Ruby On Rails
A simple CRUD app made with Nuxt / Laravel (Docker)
I made a chat app.
I made a development environment with rails6 + docker + postgreSQL + Materialize.
I want to push an app made with Rails 6 to GitHub
I made a shopify app @java
I made a GUI with Swing
I made a simple recommendation function.
I made a matching app (Android app)
[Android] I made a pedometer app.
I made a simple search form with Spring Boot + GitHub Search API.
[Ruby] I made a simple Ping client
[Rails6] Create a new app with Rails [Beginner]
[Rails withdrawal] Create a simple withdrawal function with rails
I made a risky die with Ruby
I made a calculator app on Android
[Rails 5] Create a new app with Rails [Beginner]
I made an app to scribble with PencilKit on a PDF file
Create a simple search app with Spring Boot
04. I made a front end with SpringBoot + Thymeleaf
I made a mosaic art with Pokemon images
I made a gender selection column with enum
Publish the app made with ruby on rails
I made a viewer app that displays a PDF
[Rails] I made a draft function using enum
I made a simple calculation problem game in Java
Practice making a simple chat app with Docker + Sinatra
I tried to decorate the simple calendar a little
[Ruby] I made a crawler with anemone and nokogiri.
[Beginner] I stumbled upon launching a project with Rails6
I made a lock pattern using the volume key with the Android app. Fragment edition
How to get started with creating a Rails app
After posting an article with Rails Simple Calendar, I want to reflect it in the calendar.
I made a Japanese version of Rails / devise automatic email
I made a plugin to execute jextract with Gradle task
I made a mod that instantly calls a vehicle with Minecraft
I came across a guy with two dots in Rails
I made a simple MVC sample system using Spring Boot
I made a SPA with Rails + Nuxt.js for half a year of self-study, so please take a look.
The story of the first Rails app refactored with a self-made helper
I tried to create a simple map app in Android Studio
I want to add a browsing function with ruby on rails
I made a reply function for the Rails Tutorial extension (Part 1)
I recently made a js app in the rumored Dart language
I got a warning message with the rails _6.0.3_ new hello_myapp command
I tried to build a simple application using Dockder + Rails Scaffold
I made a reply function for the Rails Tutorial extension (Part 5):
Run a simple model made with Keras on iOS using CoreML
I tried to make a group function (bulletin board) with Rails
Ruby: I made a FizzBuzz program!
[Rails] Creating a new project with rails new
Creating a timer app with a muddy
Create a new app in Rails
Track Rails app errors with Sentry
I made a package.xml generation tool.
I built a rails environment with docker and mysql, but I got stuck