[JAVA] [Rails] Gestion des horaires à l'aide du calendrier complet Implémentation d'hier

Cible

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

・ Présentation mince ・ Introduction de Bootstrap 3 ・ Introduction de Font Awesome

• Implémentation de la fonction de connexion ・ Mise en œuvre de la fonction de publication

la mise en oeuvre

1. Présentez Gem

Gemfile

#Postscript
gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'

Terminal

$ bundle

2. Editez ʻapplication.scss`

application.scss

 *= require_tree .
 *= require_self
 *= require fullcalendar /*Postscript*/

3. Modifiez ʻapplication.js`

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require moment //Postscript
//= require fullcalendar //Postscript
//= require_tree .

4. Créer / modifier un fichier JavaScript

Terminal

$ touch app/assets/javascripts/calendar.js

calendar.js

$(function() {
  function eventCalendar() {
    return $('#calendar').fullCalendar({});
  }

  function clearCalendar() {
    $('#calendar').html('');
  }

  $('#calendar').fullCalendar({
    events: '/events.json',

    titleFormat: 'AAAA M mois',
    dayNamesShort: ['journée', 'Mois', 'Feu', 'eau', 'bois', 'Argent', 'sol'],

    header: {
      left: '',
      center: 'title',
      right: 'today prev,next',
    },

    defaultTimedEventDuration: '03:00:00',
    buttonText: {
      prev: 'Avant',
      next: 'Suivant',
      prevYear: 'Année précédente',
      nextYear: 'l'année suivante',
      today: 'aujourd'hui',
      month: 'Mois',
      week: 'la semaine',
      day: 'journée',
    },
    timeFormat: 'HH:mm',
    eventColor: '#63ceef',
    eventTextColor: '#000000',
  });
});

[Explication]

(1) Pour lutter contre les turbolinks, préparez une fonction pour lire le calendrier et une fonction pour le supprimer.

function eventCalendar() {
  return $('#calendar').fullCalendar({});
}

function clearCalendar() {
  $('#calendar').html('');
}

② Affichage en japonais.

//Afficher le haut du calendrier par année et par mois
titleFormat: 'AAAA M mois',

//Afficher le jour en japonais
dayNamesShort: ['journée', 'Mois', 'Feu', 'eau', 'bois', 'Argent', 'sol'],

③ Organisez la disposition des boutons.

header: {
  left: '',
  center: 'title',
  right: 'today prev,next',
},

④ Réglez l'événement.

//Définir l'intervalle d'affichage des événements qui n'ont pas d'heure de fin
defaultTimedEventDuration: '03:00:00',
buttonText: {
  prev: 'Avant',
  next: 'Suivant',
  prevYear: 'Année précédente',
  nextYear: 'l'année suivante',
  today: 'aujourd'hui',
  month: 'Mois',
  week: 'la semaine',
  day: 'journée',
},

//Réglez l'affichage de l'heure de l'événement sur 24 heures
timeFormat: 'HH:mm',

//Changer la couleur de l'événement
eventColor: '#63ceef',

//Changer la couleur du texte de l'événement
eventTextColor: '#000000',

4. Créez un modèle

Terminal

$ rails g model Event user_id:integer title:string body:text start_date:datetime end_date:datetime

~_create_events.rb

class CreateEvents < ActiveRecord::Migration[5.2]
  def change
    create_table :events do |t|
      t.integer :user_id
      t.string :title
      t.text :body
      t.datetime :start_date
      t.datetime :end_date

      t.timestamps
    end
  end
end

Terminal

$ rails db:migrate

5. Créez un contrôleur

Terminal

$ rails g controller events new show edit my_calendar

events_controller.rb

class EventsController < ApplicationController
  before_action :set_event, only: [:show, :edit, :update, :destroy]

  def new
    @event = Event.new
  end

  def create
    @event = Event.new(event_params)
    @event.user_id = current_user.id
    @event.save ? (redirect_to event_path(@event)) : (render 'new')
  end

  def index
    @events = Event.where(user_id: current_user.id)
  end

  def show
  end

  def edit
    unless @event.user == current_user
      redirect_to root_path
    end
  end

  def update
    @event.update(event_params) ? (redirect_to event_path(@event)) : (render 'edit')
  end

  def destroy
    @event.destroy
    redirect_to my_calendar_path
  end

  def my_calendar
  end

  private

    def set_event
      @event = Event.find(params[:id])
    end

    def event_params
      params.require(:event).permit(:user_id, :title, :body, :start_date, :end_date)
    end
end

6. Ajouter un routage

routes.rb

#Postscript
resources :events
get 'my_calendar', to: 'events#my_calendar'

7. Créer / éditer le fichier json.jbuilder

ruby:index.json.jbuilder

json.array!(@events) do |event|
  json.extract! event, :id, :title, :body
  json.start event.start_date
  json.end event.end_date
  json.url event_url(event)
end

[Explication]

① ʻindex` Répète les enregistrements extraits par l'action pour créer un tableau.

json.array! @category_children do |children|

(2) Stockez chaque donnée dans le tableau créé par ①.

json.extract! event, :id, :title, :body
json.start event.start_date
json.end event.end_date
json.url event_url(event)

8. Modifier la vue

Editez new.html.slim

① Créez du HTML.

slim:new.html.slim

.row
  .col-xs-3

  .col-xs-6
    = form_with model: @event, url: events_path, local: true do |f|

      = f.label :title, 'Nom du programme'
      br
      = f.text_field :title, class: 'form-control'
      br

      = f.label :body, 'Contenu du calendrier'
      br
      = f.text_area :body, class: 'form-control'
      br

      = f.label :start_date, 'Date et heure de début'
      br
      = f.datetime_select :start_date, {}, class: 'form-control datetime-form'
      br
      br


      = f.label :end_date, 'Date et heure de fin'
      br
      = f.datetime_select :end_date, {}, class: 'form-control datetime-form'
      br
      br

      = f.submit 's'inscrire', class: 'btn btn-success btn-block'

  .col-xs-3

② Organisez la conception avec CSS.

application.scss

//Postscript
.datetime-form {
  display: inline-block;
  width: auto;
}

Modifiez show.html.slim

slim:show.html.slim

.row
  .page-header
    h3
      |Gestion des horaires

.row
  #calendar
  br

.row
  table.table.table-bordered
    tbody
      tr
        th.active
          |Nom du programme
        td
          = @event.title
      tr
        th.active
          |Contenu du calendrier
        td
          = @event.body
      tr
        th.active
          |Date et heure de début
        td
          = @event.start_date.to_s(:datetime_jp)
      tr
        th.active
          |Date et heure de fin
        td
          = @event.end_date.to_s(:datetime_jp)

.row
  - if @event.user === current_user
    .pull-right
      = link_to 'Programmer l'inscription', new_event_path, class: 'btn btn-success'
      = link_to 'Éditer', edit_event_path(@event), class: 'btn btn-primary'
      = link_to 'Effacer', event_path(@event), method: :delete, data: { confirm: '本当にEffacerしますか？' }, class: 'btn btn-danger'

Modifier ʻedit.html.slim`

slim:edit.html.slim

.row
  .col-xs-3

  .col-xs-6
    = form_with model: @event, url: event_path(@event), local: true do |f|

      = f.label :title, 'Nom du programme'
      br
      = f.text_field :title, class: 'form-control'
      br

      = f.label :body, 'Contenu du calendrier'
      br
      = f.text_area :body, class: 'form-control'
      br

      = f.label :start_date, 'Date et heure de début'
      br
      = f.datetime_select :start_date, {}, class: 'form-control datetime-form'
      br
      br


      = f.label :end_date, 'Date et heure de fin'
      br
      = f.datetime_select :end_date, {}, class: 'form-control datetime-form'
      br
      br

      = f.submit 'sauvegarder', class: 'btn btn-primary btn-block'

  .col-xs-3

Modifiez my_calendar.html.slim

slim:my_calendar.html.slim

.row
  .page-header
    h3
      |Mon agenda

.row
  = link_to 'Programmer l'inscription', new_event_path, class: 'btn btn-success'

  #calendar
  br

Mise en garde

Si vous ne désactivez pas turbolinks, le calendrier peut ne pas s'afficher, alors assurez-vous de le désactiver.

Comment désactiver les turbolinks