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.
Those who want to introduce a calendar Those who can implement MVC
ruby 2.6.5 rails 6.0.0 Database mysql2 0.4.4 simple_calendar 2.0
Let's implement it ~
First, launch a new application.
% rails _6.0.0_ new simple_calendar_app -d mysql % cd simple_calendar_app % rails db:create
The database is created with mysql.
Created database 'simple_calendar_app_development' Created database 'simple_calendar_app_test'
You now have a database.
gem 'simple_calendar', '~> 2.0'
% bundle install
Don't forget to bundle install! !!
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
% rails g controller events index
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.
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.
% rails g model event
Edit the migration file that is automatically generated with the model.
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.
% 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.
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
We will edit the controller and view.
class BlogsController < ApplicationController def index @events = Event.all #← Add this end end
<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 %>
% 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.
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.
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.
<%= 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.
<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.
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.
The contents saved earlier will be displayed (reflected) on the calendar. Edit the view.
<%= 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.
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
% 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.
#abridgement *= require simple_calendar #← Addendum *= require_tree . *= require_self
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
This time, I implemented the following in the mini app.
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.
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 ~
These two articles were very helpful. Thank you! https://qiita.com/miriwo/items/ca2a64bdf8098beccd28 https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0