[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

Recommended Posts

[Rails] How to install simple_calendar
[Rails] How to install devise
[Rails] How to install reCAPTCHA
[Rails] How to install Font Awesome
[Rails] How to install ImageMagick (RMajick)
[Rails] How to install Font Awesome
How to install Swiper in Rails
How to write Rails
How to install Docker
How to uninstall Rails
How to install docker-machine
How to install MySQL
How to install ngrok
[Ruby on Rails] How to install Bootstrap in Rails
[rails] How to post images
[Rails] How to use enum
[Rails] How to use enum
How to read rails routes
How to install Boots Faces
How to use rails join
How to terminate rails server
How to write Rails validation
How to write Rails seed
[Rails] How to use validation
[Rails] How to disable turbolinks
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Rails] How to implement scraping
[Rails] How to make seed
How to write Rails routing
How to install JDK8-10 (Mac)
[Rails] How to use Scope
[Rails] How to install a decorator using gem draper
[Rails] How to use gem "devise"
How to deploy jQuery on Rails
Rails new fails to install mysql
[Rails] How to use devise (Note)
[Rails] How to use flash messages
[rails] How to display db information
How to install JMeter for Mac
[Rails] How to write in Japanese
[Rails] How to prevent screen transition
How to install ruby through rbenv
[How to install Spring Data Jpa]
How to use Ruby on Rails
How to deploy Bootstrap on Rails
[Rails] How to speed up docker-compose
Super rough! How to install Dagger2
[Rails] How to add new pages
How to install Bootstrap in Ruby
How to install MariaDB 10.4 on CentOS 8
Rails on Tiles (how to write)
How to install WildFly on Ubuntu 18.04
How to introduce jQuery in Rails 6
[Rails] How to implement star rating
How to get along with Rails
[Introduction to Rails] How to use render
Super easy in 2 steps! How to install devise! !! (rails 5 version)
How to implement search functionality in Rails
How to change app name in rails
Install Webpacker and Yarn to run Rails