Introduction and basic usage of Simple Calendar gem

Since we are developing an application using Simple Calendar, which is a Rails gem, we will explain the introduction and basic usage of Simple Calendar for later study.

The content is a Japanese translation of simple_calendar's official GitHub.

What is Simple Calendar?

It is a gem that makes it easy to implement the calendar display function.

Execution environment

Install Simple Calender

Write the following in the Gemfile and enter bundle install in the terminal.

Gemfile


gem "simple_calendar", "~> 2.0"

Terminal


bundle install

Load the default stylesheet into the application.css file.

app/assets/stylesheets/application.css


*= require simple_calendar

Alternatively, write the following in the application.scss file.

app/assets/stylesheets/application.scss


@import "simple_calendar";

Generate calendar in view file using method

Describes how to use the Simple Calendar method to generate a calendar in a view file.

month_calendar method

You can generate a monthly calendar using the month_calendar method.

month.html.erb


<%= month_calendar do |date| %>
  <%= date %>
<% end %>

スクリーンショット 2021-01-01 21.52.59.png

week_calendar method

You can generate a weekly calendar using the week_calendar method. You can set how many weeks to display with the optional number_of_weeks. If number_of_weeks is not described, it will be displayed for one week by default.

week.html.erb


<%= week_calendar(number_of_weeks: 2) do |date| %>
  <%= date %>
<% end %>

スクリーンショット 2021-01-01 21.55.36.png

calendar method (customize display days)

You can customize the number of days displayed in the calendar by using the calendar method. You can set how many days are displayed with the option number_of_days. If you do not write number_of_days, it will be displayed for 4 days by default.

custom.html.erb


<%= calendar(number_of_days: 4) do |date| %>
  <%= date %>
<% end %>

スクリーンショット 2021-01-01 22.01.07.png

This is the end of the process from the introduction of Simple Calendar to the basic usage.

Edit the look of Simple Calendar yourself

If you want to edit the appearance of each calendar, enter the following command and copy the view file to your own app.

Terminal


rails g simple_calendar:views

#Simple as follows_A calendar folder and each view file will be generated in your app
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

Reference material

-Simple_calendar's official GitHub -Qiita [Rails] Calendar display using Simple Calendar -Qiita [rails] I made a blog function with a calendar using simple_calendar.

Recommended Posts

Introduction and basic usage of Simple Calendar gem
Basic usage of enums and code examples
Introduction and precautions of gem Friendly Id
Introduction and usage explanation of Font Awesome
Introduction and introduction of management screen generation gem Administrate
Calendar implementation and conditional branching in Rails Gem simple calendar
[Docker] Introduction of basic Docker Instruction
Super basic usage of Eclipse
Introduction purpose of ActiveHash and simple flow to application implementation
Basic usage of java Optional Part 1
[Rails] Differences and usage of each_with_index and each.with_index
From introduction to usage of byebug
Introduction of Docker Hub and commands Self-learning ①
[Ruby] Classification and usage of loops in Ruby
Summary of Java Math.random and import (Calendar)
[Docker] Introduction to docker compose Basic summary of docker-compose.yml
[Java] Personal summary of classes and methods (basic)
Simple installation of nginx and Docker using ansible
Learn the rudimentary mechanism and usage of Gradle 4.4
Introduction of Rspec and Japanese localization of error messages
Java review ③ (Basic usage of arrays / reference type)
Introduction of pay.jp
Introduction of milkode
Date () and Calendar ()
Ruby and Gem
Introduction to Java for beginners Basic knowledge of Java language ①