Einführung

Ich wollte, dass meine App eine Funktion wie Google Kalender hat, also habe ich eine Mini-App mit vollem Kalender erstellt.

Inhaltsverzeichnis

Anwendungsvorlage
yarn add
MVC-Einstellungen

Landepunkt

スクリーンショット 2020-10-26 17.29.43.png

Umgebung

ruby 2.6.5 rails 6.0.0 FullCalendar v5.3.1

Implementierung

Lassen Sie es uns implementieren ~

Anwendungsvorlage Erstellen Sie zunächst eine Anwendungsvorlage.

% cd projects 
% rails _6.0.0_ new fullcalender_app -d mysql
% cd fullcalender_app 
% rails db:create

Die Rails-Version ist 6.0.0.

yarn add Es scheint, dass Sie automatisch "1-Monats-Kalender" oder "Ereigniserstellung" erstellen können, indem Sie die erforderlichen Dateien installieren, während das Garn im Terminal hinzugefügt wird.

`Terminal.`


% yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

@fullcalendar Nachfolgend sind die Namen der einzelnen Funktionen aufgeführt. Die Artikel, auf die ich verwiesen habe, sind unten aufgeführt. Wenn Sie möchten, lesen Sie sie bitte.

success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
├─ @fullcalendar/[email protected]
├─ @fullcalendar/[email protected]
└─ @fullcalendar/[email protected]
info All dependencies
├─ @fullcalendar/[email protected]
├─ @fullcalendar/[email protected]
├─ @fullcalendar/[email protected]
└─ [email protected]
✨  Done in 3.55s.

Wenn Sie dies sehen, sind Sie erfolgreich.

3 Zu JS hinzugefügt

Fügen Sie der JS-Anwendungsdatei hinzu und laden Sie das gerade installierte Garn.

Achtung: Bitte beachten Sie, dass die Position des Verzeichnisses unterschiedlich ist, wenn die Version unterschiedlich ist.

`app/javascript/packs/application.js`


//Kürzung

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)


//Die bisherige Beschreibung wird automatisch generiert.
//Fügen Sie Folgendes hinzu

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, interactionPlugin ]
  });

  calendar.render();
});

3. MVC-Einstellungen

Erstellen Sie dann das Routing, den Controller und die Ansicht.

% rails g controller events index

Erstellen Sie einen Ereignis-Controller. Durch Schreiben eines Index nach Ereignissen wird das Routing automatisch festgelegt und die Ansicht erstellt. Bearbeiten Sie, wenn Sie Ressourcen für das Routing verwenden möchten.

Running via Spring preloader in process 42254
      create  app/controllers/events_controller.rb　#Controller-Erstellung
       route  get 'events/index' #Routing-Einstellungen
      invoke  erb
      create    app/views/events
      create    app/views/events/index.html.erb #Erstellung anzeigen
      invoke  test_unit
      create    test/controllers/events_controller_test.rb
      invoke  helper
      create    app/helpers/events_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/events.scss

Ich werde es im Detail bearbeiten, während ich mir jedes einzelne ansehe.

`config/routes.rb`


Rails.application.routes.draw do
  # get 'events/index'← Dies kann gelöscht werden
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  
  #Dies ist die Standardeinstellung
  #Bearbeiten Sie unten
  root to: "events#index"
  resources :events 
end

`app/controllers/events_controller.rb`


class EventsController < ApplicationController
  def index
  end
end

`app/views/events/index.html.erb`


<h1>Events#index</h1>
<p>Find me in app/views/events/index.html.erb</p>
<%#Bis zu diesem Punkt wird die Beschreibung automatisch generiert.%>
<%#Unten ist der Zeichnungsteil des Kalenders%>
<div id='calendar'></div>

$ rails s

Starten Sie den Server und überprüfen Sie.

スクリーンショット 2020-10-26 17.29.43.png

Der minimale Look ist komplett! !!

Sie können es mithilfe eines Plug-Ins auf verschiedene Arten anpassen.

Allerdings ist nur der "Vollständige Kalender" nur mit dem Plug-In vollständig ausgestattet, und Sie können keine kleinen Änderungen vornehmen. (Es mag einen Weg geben, aber ...) Persönlich möchte ich die Spezifikationen etwas detaillierter ändern, also werde ich den "einfachen Kalender" ausprobieren!

[Rails] Ich habe eine einfache Kalender-Mini-App mit benutzerdefinierten Spezifikationen erstellt.

https://qiita.com/AKI3/items/109d54a35c98328d9155

Schließlich

Ich bin ein Anfänger in der Programmierung, aber ich poste einen Artikel in der Hoffnung, dass er Menschen hilft, die ähnlich in Schwierigkeiten sind. Bis zum nächsten Mal ~

Referenz

https://qiita.com/okayu_331/items/8c4ab42d27a8ac16da5b Offizielle Seite https://fullcalendar.io/docs/plugin-index

[JAVA] [Rails] Ich habe versucht, eine Mini-App mit FullCalendar zu erstellen