[JAVA] [Rails] J'ai essayé de créer une mini application avec FullCalendar

introduction

Je voulais que mon application ait une fonction comme Google Agenda, j'ai donc créé une mini application avec un calendrier complet.

table des matières

1. Modèle de candidature
2. yarn add
3. Paramètres MVC

Point d'atterrissage

environnement

ruby 2.6.5 rails 6.0.0 FullCalendar v5.3.1

la mise en oeuvre

Implémentons-le ~

1. Modèle de candidature Tout d'abord, créez un modèle d'application.

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

La version rails est 6.0.0.

2. yarn add Il semble que vous puissiez créer automatiquement un "calendrier 1 mois" ou une "création d'événements" en installant les fichiers nécessaires en tant que fil ajouté dans le terminal.

Terminal.

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

@fullcalendar Voici les noms de chaque fonction. Les articles auxquels j'ai fait référence sont énumérés ci-dessous, veuillez donc vous y référer si vous le souhaitez.

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.

Si vous voyez cela, vous réussissez.

3 Ajouté à JS

Ajoutez au fichier d'application JS et chargez le fil que vous venez d'installer.

• Attention: Veuillez noter que la position du répertoire sera différente si la version est différente.

app/javascript/packs/application.js

//réduction

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)


//La description à ce jour est générée automatiquement.
//Ajoutez ce qui suit

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. Paramètres MVC

Créez ensuite le routage, le contrôleur et la vue.

% rails g controller events index

Créez un contrôleur d'événements. En écrivant l'index après les événements, le routage sera défini automatiquement et la vue sera créée. Modifiez si vous souhaitez utiliser des ressources pour le routage.

Running via Spring preloader in process 42254
      create  app/controllers/events_controller.rb　#Création de contrôleur
       route  get 'events/index' #Paramètres de routage
      invoke  erb
      create    app/views/events
      create    app/views/events/index.html.erb #Voir la création
      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

Je vais l'éditer en détail en regardant chacun d'eux.

config/routes.rb

Rails.application.routes.draw do
  # get 'events/index'← Cela peut être supprimé
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  
  #C'est la valeur par défaut
  #Modifier ci-dessous
  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>
<%#Jusqu'à ce point, la description est générée automatiquement.%>
<%#Ci-dessous, la partie dessin du calendrier%>
<div id='calendar'></div>

$ rails s

Démarrez le serveur et vérifiez.

Le look minimum est complet! !!

Vous pouvez le personnaliser de différentes manières en utilisant un plug-in.

Cependant, seul le "Calendrier complet" est entièrement équipé avec uniquement le plug-in et vous ne pouvez pas apporter de petites modifications. (Il y a peut-être un moyen, mais ...) Personnellement, j'aimerais changer les spécifications un peu plus en détail, donc je vais essayer le "Simple Calendar"!

[Rails] J'ai créé une mini-application de calendrier simple avec des spécifications personnalisées.

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

finalement

Je suis un débutant en programmation, mais je publie un article dans l'espoir qu'il aidera les gens qui sont également en difficulté. A la prochaine fois ~

référence

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