[RUBY] Kalenderimplementierung und bedingte Verzweigung im einfachen Kalender von Rails Gem
Überblick
Ich studiere derzeit an einer Programmierschule namens DMM WEB CAMP. Beim Erstellen des Portfolios habe ich eine Ereignistabelle erstellt und im Kalender angezeigt. Ich hoffe, es wird für diejenigen nützlich sein, die es schaffen werden.
Abschlusszeichnung
Artikel, die ich als Referenz verwendet habe
[Schienen] Kalenderanzeige mit einfachem Kalender https://qiita.com/mikaku/items/0971442a7308dc669122
github https://github.com/excid3/simple_calendar
Vorbereitungen
Ereignistabelle
-Datum und Uhrzeit des Starts von data_and_time ・ Datum und Uhrzeit des Endes der Besprechungsendezeit
Veranstaltungsteilnahme
- Dies ist eine Erweiterung der postähnlichen Funktion.
Verband
models/event.rb
class Event < ApplicationRecord
has_many :event_participates, dependent: :destroy
end
models/event_participate.rb
class EventParticipate < ApplicationRecord
belongs_to :event
end
gem install
gem 'simple_calendar', '~>2.0'
$ bundle install
Installation des einfachen Kalenders anzeigen
$ rails g simple_calendar:views
・ In views / simple_calendar können drei Arten von Kalendervorlagen erstellt werden.
Beschreibung in application.scss (CSS)
stylesheets/applecation.scss
*= require simple_calendar
*= require_tree .
*= require_self
start_time Endzeitdefinition
models/event.rb
class Event < ApplicationRecord
has_many :event_participates, dependent: :destroy
def start_time
self.date_and_time
end
def end_time
self.meetingfinishtime
end
end
Dieses Juwel erfordert die Definition von start_time und end_time. (Besonders start_time) Es ist in Ordnung, wenn die von Ihnen erstellte Spalte von Anfang an diesen Namen hat. Wenn es sich jedoch um einen anderen Spaltennamen handelt, definieren wir ihn im Modell. Da es sich jedoch um Datum und Uhrzeit handelt, sollte der Datentyp wahrscheinlich datetime sein. Als ich es implementiert habe, ohne es vorher definiert zu haben, habe ich einen Fehler erhalten.
In Github wurde mit dem Gerüst von Anfang an eine Spalte mit dem obigen Namen erstellt.
Kalenderanzeige
Mein Portfolio
views/events/index.html.erb
</div>
<div class= 'calender'>
<%= month_calendar events: @events do |date, event| %>
<%= date %>
<% event.each do |event| %>
<br>
<% if user_signed_in? %>
<% if event.user_id == current_user.id %>
<i class="fa fa-circle notification-circle" style="color: red;"></i>
<% end %>
<% end %>
<% if event.event_participates.where(user_id: current_user).exists? %>
<span class="participate">
<%= link_to event.title,event_path(event) %>
</span>
<% else %>
<span class="other">
<%= link_to event.title,event_path(event) %>
</span>
<% end %>
<% end %>
<% end %>
</div>
Wenn Sie nur den Kalender und den Titel des Ereignisses anzeigen möchten, benötigen Sie nur Folgendes.
<div class= 'calender'>
<%= month_calendar events: @events do |date, event| %>
<%= date %>
<% event.each do |event| %>
<%= event.title %>
<% end %>
<% end %>
</div>
controllers/events_controller.rb
def index
@events = Event.all
end
Event.all, das im Controller definiert ist, wird in @events gespeichert und im Kalender angezeigt. <%= month_calendar events: @events Wenn Sie Ereignisse ändern: In dieser Syntax wird wahrscheinlich eine Fehlermeldung angezeigt, aber ich denke, es ist in Ordnung, eine Instanzvariable zu verwenden, in der die Informationen gespeichert sind.
Derzeit verwende ich den zuvor installierten month_calendar. Da jedoch zwei weitere Vorlagen verfügbar sind, kann ich anscheinend drei Typen verwenden.
Wenn ich an der Aktion teilnehme, ist die Hintergrundfarbe orange. Wenn es sich um ein Ereignis handelt, das gehostet wird, wollte ich ein rotes Kreissymbol hinzufügen, also machen Sie den folgenden bedingten Zweig Ich habe es im Kalender gemacht.
<% if event.user_id == current_user.id %>
<i class="fa fa-circle notification-circle" style="color: red;"></i>
<% end %>
Wenn die Benutzer-ID (dh der Ereignisersteller) in der Ereignistabelle Sie selbst sind, wird das Symbol für die Schriftart vor dem Ereignistitel angezeigt. Ich denke, hier ist alles in Ordnung, solange es sich um ein Inline-Element handelt.
Nächster
<% if event.event_participates.where(user_id: current_user).exists? %>
<span class="participate">
<%= link_to event.title,event_path(event) %>
</span>
<% else %>
<span class="other">
<%= link_to event.title,event_path(event) %>
</span>
<% end %>
In der ersten Zeile <% if event.event_participates.where (user_id: current_user) .exists?%> Ich suche, ob ich (current_user) unter den Benutzern existiert, die an der Veranstaltung teilnehmen (partizipieren). Wenn gefunden, Klasse teilnehmen, sonst Klasse andere, Selbst wenn die anzuzeigenden Informationen identisch sind, kann der Klassenname unterschiedlich sein.
Alles was Sie tun müssen, ist die Farbe mit CSS zu ändern, also tun Sie bitte, was Sie wollen.
Die Ansicht von month_calender ist übrigens wie folgt.
views/simple_calendar/_month_calendar.html.erb
<div class="simple-calendar">
<p class="carendar-title"><%= "#{Date.today.month}Monatlicher Veranstaltungsplan" %></p>
<div class="calendar-heading" data-turbolinks="false">
<!--%= link_to t('simple_calendar.previous', default: 'Previous'), calendar.url_for_previous_view %-->
<!-- <span class="calendar-title"><%= t('date.month_names')[start_date.month] %> <%= start_date.year %></span> -->
<!--%= link_to t('simple_calendar.next', default: 'Next'), calendar.url_for_next_view %-->
<i class="fa fa-circle notification-circle" style="color: red;"><span>Gesponserte Veranstaltung</span></i>
<span class="calendar-info">Teilnahmeplan</span>
</div>
<table class="table table-striped calendar-table">
<thead>
<tr>
<% date_range.slice(0, 7).each do |day| %>
<th><%= t('date.abbr_day_names')[day.wday] %></th>
<% end %>
</tr>
</thead>
<tbody>
<% date_range.each_slice(7) do |week| %>
<tr>
<% week.each do |day| %>
<%= content_tag :td, class: calendar.td_classes_for(day) do %>
<% if defined?(Haml) && respond_to?(:block_is_haml?) && block_is_haml?(passed_block) %>
<% capture_haml(day, sorted_events.fetch(day, []), &passed_block) %>
<% else %>
<% passed_block.call day, sorted_events.fetch(day, []) %>
<% end %>
<% end %>
<% end %>
</tr>
<% end %>
</tbody>
</table>
</div>
Ich habe den oberen Teil in den Spezifikationen meines Portfolios auskommentiert. Ein Link zum nächsten Monat oder zum Vormonat wird am Ort des Kommentars angezeigt. Es scheint, dass Sie es flexibel ändern können, wenn es ein kleiner Teil ist.
Zusammenfassung
Zuerst wollte ich es mit vollem Kalender implementieren, aber ich verstand es nicht und gab dieses Mal auf und benutzte dieses Juwel. Ich wollte die Tatsache verbessern, dass der Ereignistitel jedes Mal zwischen start_time und end_time angezeigt wird, aber es war aufgrund meiner mangelnden Leistung schwierig. Der Klassenname des Elements hat keine besondere Bedeutung. Ich habe einen Rechtschreibfehler gemacht, aber ... Ich denke, dass selbst ein so einfacher Kalender besser ist als meiner, je nachdem, wie Sie ihn zeigen. Probieren Sie ihn also bitte aus.
Recommended Posts