[RUBY] Implémentation de calendrier simple de Rails Gem et branchement conditionnel
Aperçu
J'étudie actuellement dans une école de programmation appelée DMM WEB CAMP. Lors de la création du portfolio, j'ai créé un tableau d'événements et l'ai affiché sur le calendrier. J'espère qu'il sera utile à ceux qui le créeront.
Dessin d'achèvement
Articles que j'ai utilisés comme référence
[Rails] Affichage du calendrier à l'aide du calendrier simple https://qiita.com/mikaku/items/0971442a7308dc669122
github https://github.com/excid3/simple_calendar
Préparation préalable
Table des événements
-Date et heure de début de data_and_time ・ Date et heure de fin de la réunion
Tableau de participation à l'événement
- Ceci est une extension de la fonction de type poste.
association
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
Voir l'installation du calendrier simple
$ rails g simple_calendar:views
・ Trois types de modèles de calendrier peuvent être créés dans views / simple_calendar.
Description dans application.scss (CSS)
stylesheets/applecation.scss
*= require simple_calendar
*= require_tree .
*= require_self
start_time Définition de l'heure de fin
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
Cette gemme nécessite la définition de start_time et end_time. (Surtout start_time) Ce n'est pas grave si la colonne que vous créez porte ce nom depuis le début, mais s'il s'agit d'un nom de colonne différent, définissons-le dans le modèle. Cependant, comme il traite de la date et de l'heure, je pense que le type de données devrait probablement être datetime. J'ai eu une erreur lorsque je l'ai implémenté sans d'abord la définir.
github a utilisé scaffold pour créer une colonne avec le nom ci-dessus depuis le début.
Affichage du calendrier
Mon 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>
Si vous souhaitez afficher uniquement le calendrier et le titre de l'événement, vous n'avez besoin que des éléments suivants.
<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 défini dans le contrôleur est stocké dans @events et affiché dans le calendrier. <%= month_calendar events: @events Si vous modifiez les événements: dans cette syntaxe, vous obtiendrez probablement une erreur, mais je pense que vous pouvez utiliser n'importe quelle variable d'instance qui stocke les informations.
Actuellement, j'utilise le month_calendar que j'ai installé plus tôt, mais comme il existe deux autres modèles disponibles, il semble que je puisse utiliser trois types.
Si j'effectue l'action de participation, la couleur d'arrière-plan sera orange, Si c'est un événement qui est hébergé, je voulais ajouter une icône de cercle rouge, alors créez la branche conditionnelle suivante Je l'ai fait dans le calendrier.
<% if event.user_id == current_user.id %>
<i class="fa fa-circle notification-circle" style="color: red;"></i>
<% end %>
Si le user_id (c'est-à-dire le créateur de l'événement) dans la table des événements est vous-même, l'icône font awesome sera affichée avant le titre de l'événement. Je pense que tout va bien ici tant qu'il s'agit d'un élément en ligne.
prochain
<% 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 %>
Dans la première ligne <% if event.event_participates.where (user_id: current_user) .exists?%> Je cherche si I (current_user) existe parmi les utilisateurs qui participent à l'événement (participete). Si trouvé, classe participer, sinon classe autre, Même si les informations à afficher sont les mêmes, le nom de la classe peut être différent.
Tout ce que vous avez à faire est de changer la couleur avec CSS, alors faites ce que vous voulez.
À propos, la vue de month_calender est la suivante.
views/simple_calendar/_month_calendar.html.erb
<div class="simple-calendar">
<p class="carendar-title"><%= "#{Date.today.month}Calendrier mensuel des événements" %></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>Événement sponsorisé</span></i>
<span class="calendar-info">Plan de participation</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>
J'ai commenté la partie supérieure des spécifications de mon portfolio. Un lien vers le mois suivant ou le mois précédent apparaîtra dans l'emplacement de commentaire. Il semble que vous puissiez le modifier de manière flexible s'il s'agit d'une petite pièce.
Résumé
Au début, j'avais prévu de l'implémenter avec un calendrier complet, mais je ne l'ai pas compris et j'ai abandonné et utilisé ce joyau cette fois. Je voulais améliorer le fait que le titre de l'événement apparaisse à chaque fois entre start_time et end_time, mais c'était difficile à cause de mon manque de puissance. Le nom de classe de l'élément n'a pas de signification particulière. J'ai fait une erreur en l'orthographe, mais ... Je pense que même un calendrier aussi simple sera meilleur que le mien selon la façon dont vous le montrez, alors essayez-le.
Recommended Posts