[RUBY] [Rails] So installieren Sie simple_calendar

Einführung

Ich wollte es mithilfe eines Kalenders in der Anwendungsentwicklung implementieren und habe es daher kurz zusammengefasst.

Was ist simple_calendar?

simple_calendar ist ein Juwel, mit dem Sie einfach eine Kalenderfunktion hinzufügen können. Sie können einen Kalender erstellen, indem Sie ein Datum wie einen Monatskalender oder einen Wochenkalender angeben. Dieses Mal verwendet die Methode einen Monatskalender.

Inhaltsverzeichnis

1. Installieren Sie simple_calendar
2. Generieren Sie eine simple_calendar-Ansicht
3. Kalender anzeigen
4. Ändern Sie das Layout des Kalenders
5. Bonus

1. Installieren Sie simple_calendar

Fügen Sie der Gem-Datei Folgendes hinzu und führen Sie "Bundle-Installation" im Anwendungsverzeichnis aus.

gem.file

gem "simple_calendar", "~> 2.0"

2. Generieren Sie eine simple_calendar-Ansicht

Führen Sie den folgenden Befehl aus, um eine Ansichtsdatei für simple_calendar zu generieren. Wenn Sie das Layout anpassen möchten, können Sie es bearbeiten, indem Sie mit diesem Befehl eine Datei erstellen.

Terminal

rails g simple_calendar:views

3. Kalender anzeigen

Modell bearbeiten

Fügen Sie dem Modell Folgendes hinzu, um das Ereignis im Kalender anzuzeigen. Der Teil "Datum" beschreibt den Spaltennamen.

model.rb

def start_time
  self.date
end

Ansichtsdatei bearbeiten

Schreiben Sie Folgendes, um den Kalender anzuzeigen. Der Teil "Ereignisse" ruft Daten ab, indem die in der Steuerung festgelegten Instanzvariablen platziert werden. Sie können das Ereignis jetzt im Kalender anzeigen.

ruby:view.html.erb

<%= month_calendar events: @all do |date, all| %>
  <%= date.day %>　//So zeigen Sie den Zeitplan im Kalender an
  <% all.each do |i| %>
    <div>
      <%= i.price %>
    </div>
  <% end %>
<% end %>

Wenn <% = Datum%>, wird es als 2020-01-01 ausgegeben. Dieses Mal möchte ich nur das Datum anzeigen, also schreibe ich <% = date.day%>.

Andere Dateien bearbeiten

Fügen Sie "* = require simple_calendar" zu application.css hinzu, um das CSS von simple_calendar anzuwenden.

/app/assets/stylesheets/application.css

/*
 *= require simple_calendar #Ich werde es hier hinzufügen
 *= require_tree .
 *= require_self
 */

4. Ändern Sie das Layout des Kalenders

Sie können das Kalenderdesign anpassen, indem Sie eine Datei erstellen und das CSS wie unten gezeigt selbst schreiben.

/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

Wenn Sie den Kalender mit dem Eingabe-Tag verwenden möchten, können Sie ihn wie unten gezeigt mit "f.date_field" anzeigen.

ruby:view.html.erb

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

Referenzlink

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