[JAVA] [Rails] Zeitplanverwaltung mit der Implementierung von Full Calendar Yesterday

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung ・ Einführung von Bootstrap 3 ・ Einführung von Font Awesome

• Implementierung der Anmeldefunktion ・ Implementierung der Posting-Funktion

Implementierung

1. Stellen Sie Gem vor

Gemfile

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

Terminal

$ bundle

2. Bearbeiten Sie application.scss

application.scss

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

3. Bearbeiten Sie application.js

application.js

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

4. Erstellen / bearbeiten Sie eine JavaScript-Datei

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: 'JJJJ M Monat',
    dayNamesShort: ['Tag', 'Mond', 'Feuer', 'Wasser', 'Holz', 'Geld', 'Boden'],

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

    defaultTimedEventDuration: '03:00:00',
    buttonText: {
      prev: 'Bisherige',
      next: 'Nächster',
      prevYear: 'Vorheriges Jahr',
      nextYear: 'nächstes Jahr',
      today: 'heute',
      month: 'Mond',
      week: 'Woche',
      day: 'Tag',
    },
    timeFormat: 'HH:mm',
    eventColor: '#63ceef',
    eventTextColor: '#000000',
  });
});

[Erläuterung]

(1) Bereiten Sie als Maßnahme gegen Turbolinks eine Funktion zum Lesen des Kalenders und eine Funktion zum Löschen des Kalenders vor.

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

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

② Anzeige auf Japanisch.

//Zeigen Sie den oberen Rand des Kalenders nach Jahr und Monat an
titleFormat: 'JJJJ M Monat',

//Anzeigetag auf Japanisch
dayNamesShort: ['Tag', 'Mond', 'Feuer', 'Wasser', 'Holz', 'Geld', 'Boden'],

③ Ordnen Sie das Tastenlayout an.

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

④ Stellen Sie das Ereignis ein.

//Legen Sie das Anzeigeintervall für Ereignisse ohne Endzeit fest
defaultTimedEventDuration: '03:00:00',
buttonText: {
  prev: 'Bisherige',
  next: 'Nächster',
  prevYear: 'Vorheriges Jahr',
  nextYear: 'nächstes Jahr',
  today: 'heute',
  month: 'Mond',
  week: 'Woche',
  day: 'Tag',
},

//Stellen Sie die Ereigniszeitanzeige auf 24 Stunden ein
timeFormat: 'HH:mm',

//Ändern Sie die Farbe des Ereignisses
eventColor: '#63ceef',

//Ändern Sie die Textfarbe des Ereignisses
eventTextColor: '#000000',

4. Erstellen Sie ein Modell

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. Erstellen Sie einen Controller

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. Routing hinzufügen

routes.rb

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

7. Erstellen / bearbeiten Sie die Datei "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

[Erläuterung]

(1) Wiederholen Sie die durch die Aktion "Index" extrahierten Datensätze, um ein Array zu erstellen.

json.array! @category_children do |children|

(2) Speichern Sie alle Daten in dem von ① erstellten Array.

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

8. Ansicht bearbeiten

Bearbeiten Sie new.html.slim

① HTML erstellen.

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, 'Zeitplanname'
      br
      = f.text_field :title, class: 'form-control'
      br

      = f.label :body, 'Inhalt planen'
      br
      = f.text_area :body, class: 'form-control'
      br

      = f.label :start_date, 'Startdatum und -zeit'
      br
      = f.datetime_select :start_date, {}, class: 'form-control datetime-form'
      br
      br


      = f.label :end_date, 'Enddatum und -zeit'
      br
      = f.datetime_select :end_date, {}, class: 'form-control datetime-form'
      br
      br

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

  .col-xs-3

② Ordnen Sie das Design mit CSS an.

application.scss

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

Bearbeiten Sie show.html.slim

slim:show.html.slim

.row
  .page-header
    h3
      |Zeitplanmanagement

.row
  #calendar
  br

.row
  table.table.table-bordered
    tbody
      tr
        th.active
          |Zeitplanname
        td
          = @event.title
      tr
        th.active
          |Inhalt planen
        td
          = @event.body
      tr
        th.active
          |Startdatum und -zeit
        td
          = @event.start_date.to_s(:datetime_jp)
      tr
        th.active
          |Enddatum und -zeit
        td
          = @event.end_date.to_s(:datetime_jp)

.row
  - if @event.user === current_user
    .pull-right
      = link_to 'Planen Sie die Registrierung', new_event_path, class: 'btn btn-success'
      = link_to 'Bearbeiten', edit_event_path(@event), class: 'btn btn-primary'
      = link_to 'Löschen', event_path(@event), method: :delete, data: { confirm: '本当にLöschenしますか？' }, class: 'btn btn-danger'

Bearbeiten Sie 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, 'Zeitplanname'
      br
      = f.text_field :title, class: 'form-control'
      br

      = f.label :body, 'Inhalt planen'
      br
      = f.text_area :body, class: 'form-control'
      br

      = f.label :start_date, 'Startdatum und -zeit'
      br
      = f.datetime_select :start_date, {}, class: 'form-control datetime-form'
      br
      br


      = f.label :end_date, 'Enddatum und -zeit'
      br
      = f.datetime_select :end_date, {}, class: 'form-control datetime-form'
      br
      br

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

  .col-xs-3

Bearbeiten Sie my_calendar.html.slim

slim:my_calendar.html.slim

.row
  .page-header
    h3
      |Mein Kalender

.row
  = link_to 'Planen Sie die Registrierung', new_event_path, class: 'btn btn-success'

  #calendar
  br

Hinweis

Wenn Sie "Turbolinks" nicht deaktivieren, wird der Kalender möglicherweise nicht angezeigt. Deaktivieren Sie ihn daher unbedingt.

So deaktivieren Sie Turbolinks