[RUBY] [Rails] Comment installer simple_calendar

introduction

Je voulais l'implémenter à l'aide d'un calendrier dans le développement d'applications, je l'ai donc résumé brièvement.

Qu'est-ce que simple_calendar?

simple_calendar est un joyau qui vous permet d'ajouter facilement une fonction de calendrier. Vous pouvez créer un calendrier en spécifiant une date telle qu'un calendrier mensuel ou un calendrier hebdomadaire. Cette fois, la méthode utilise un calendrier mensuel.

table des matières

1. Installez simple_calendar
2. Générez une vue simple_calendar
3. Afficher le calendrier
4. Changer la disposition du calendrier
5. Bonus

1. Installez simple_calendar

Ajoutez ce qui suit au fichier gem et exécutez "bundle install" dans le répertoire de l'application.

gem.file

gem "simple_calendar", "~> 2.0"

2. Générez une vue simple_calendar

Exécutez la commande suivante pour générer un fichier de vue simple_calendar. Si vous souhaitez personnaliser la mise en page, vous pouvez la modifier en générant un fichier avec cette commande.

Terminal

rails g simple_calendar:views

3. Afficher le calendrier

Modifier le modèle

Ajoutez ce qui suit au modèle pour afficher l'événement sur le calendrier. La partie "date" décrit le nom de la colonne.

model.rb

def start_time
  self.date
end

Modifier le fichier de vue

Pour afficher le calendrier, écrivez ce qui suit. La partie "événements" extrait les données en plaçant les variables d'instance définies dans le contrôleur. Vous pouvez maintenant afficher l'événement sur le calendrier.

ruby:view.html.erb

<%= month_calendar events: @all do |date, all| %>
  <%= date.day %>　//Comment afficher le calendrier sur le calendrier
  <% all.each do |i| %>
    <div>
      <%= i.price %>
    </div>
  <% end %>
<% end %>

Si <% = date%>, il sera affiché comme 2020-01-01. Cette fois, je veux afficher uniquement la date, donc j'écris <% = date.day%>.

Modification d'autres fichiers

Ajoutez "* = require simple_calendar" à application.css pour appliquer le CSS de simple_calendar.

/app/assets/stylesheets/application.css

/*
 *= require simple_calendar #Je vais l'ajouter ici
 *= require_tree .
 *= require_self
 */

4. Changer la disposition du calendrier

Vous pouvez personnaliser la conception du calendrier en créant un fichier et en écrivant vous-même le CSS comme indiqué ci-dessous.

/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

Si vous souhaitez utiliser le calendrier avec la balise d'entrée, vous pouvez l'afficher avec "f.date_field" comme indiqué ci-dessous.

ruby:view.html.erb

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

Lien de référence

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