[Rails] How to install simple_calendar

Introduction

I wanted to implement it using a calendar in application development, so I summarized it briefly.

What is simple_calendar?

simple_calendar is a gem that allows you to easily add a calendar function. You can create a calendar by specifying a date such as a monthly calendar or a weekly calendar. This time, the method uses a monthly calendar.

table of contents

1. Install simple_calendar
2. Generate a simple_calendar view
3. Display the calendar
4. Change calendar layout
5. Bonus

1. Install simple_calendar

Add the following to the gem file and execute "bundle install" in the application directory.

gem.file

gem "simple_calendar", "~> 2.0"

2. Generate a simple_calendar view

Run the following command to generate a simple_calendar view file. If you want to customize the layout, you can edit it by generating a file with this command.

Terminal

rails g simple_calendar:views

3. Display the calendar

Model editing

Add the following to the model to display the event on the calendar. The "date" part describes the column name.

model.rb

def start_time
  self.date
end

Edit view file

To display the calendar, write the following. The "events" part pulls data by placing the instance variable set in the controller. Now you can display the event on the calendar.

ruby:view.html.erb

<%= month_calendar events: @all do |date, all| %>
  <%= date.day %>　//How to display the schedule on the calendar
  <% all.each do |i| %>
    <div>
      <%= i.price %>
    </div>
  <% end %>
<% end %>

If <% = date%>, it will be output as 2020-01-01. Since I want to display only the date this time, I write <% = date.day%>.

Editing other files

Add "* = require simple_calendar" to application.css to apply the simple_calendar CSS.

/app/assets/stylesheets/application.css

/*
 *= require simple_calendar #I will add it here
 *= require_tree .
 *= require_self
 */

4. Change calendar layout

You can customize the calendar design by creating a file and writing the CSS yourself as shown below.

/app/assets/stylesheets/_simple_calendar.scss

.simple-calendar {
  .day {}

  .wday-0 {}
  .wday-1 {}
  .wday-2 {}
  .wday-3 {}
  .wday-4 {}
  .wday-5 {}
  .wday-6 {}

  .today {}
  .past {}
  .future {}

  .start-date {}

  .prev-month {}
  .next-month { }
  .current-month {}

  .has-events {}
}

5. Bonus

If you want to use the calendar with the input tag, you can display it with "f.date_field" as shown below.

ruby:view.html.erb

<%= form_with model: @income, local: true do |f| %>
  <%= f.date_field :date, id:"date" %>
<% end %>

Reference link

https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0 https://github.com/excid3/simple_calendar