Über diesen Beitrag

Einführung des vollständigen Anrufkalenders von jQurery zur Anzeige eines Kalenders, in den Termine in der gerade erstellten Rails-Anwendung geschrieben werden können. Ich hoffe, es hilft denen, die nach einer Möglichkeit suchen, den Kalender anzuzeigen.

Voraussetzungen

Die Ansicht ist in haml und SCSS geschrieben. Ich benutze Rails "5.0.7.2".

Befehl

Ich habe ein Event-Modell mit Gerüst erstellt. Wenn Sie einen Termin mit FullCalender schreiben, scheint dies nur zu funktionieren, wenn der Modellname ** Event ** </ font> lautet.

$ rails g scaffold event title:string body:string start_date:datetime end_date:datetime
$ rails db:migrate RAILS_ENV=development

GemFile wird eingeführt

Schreiben Sie die folgenden drei ** Bundle-Installation **

gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'

Füllen Sie das SCSS aus

Füllen Sie Folgendes in application.scss aus

`app/assets/stylesheets/application.scss`


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

JavaScript Bitte kopieren und einfügen wie es ist. Dadurch wird der Kalender auf Japanisch angezeigt.

`app/assets/javascripts/application.js`


//= require jquery
//= require moment
//= require fullcalendar

$(function () {
    //Bildschirmübergang erkennen
    $(document).on('turbolinks:load', function () {
        if ($('#calendar').length) {

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

            $(document).on('turbolinks:load', function () {
                Calendar();
            });
            $(document).on('turbolinks:before-cache', clearCalendar);

            //events: '/events.json',Unten hinzugefügt
            $('#calendar').fullCalendar({
                events: '/events.json',
                //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'],
                //Tastenlayout
                header: {
                    left: '',
                    center: 'title',
                    right: 'today prev,next'
                },
                //Anzeigeintervall für Ereignisse ohne Endzeit
                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'
                },
                // Drag & Drop & Resize
                editable: true,
                //Ereigniszeitanzeige bis 24 Stunden
                timeFormat: "HH:mm",
                //Ändern Sie die Farbe des Ereignisses
                eventColor: '#87cefa',
                //Ändern Sie die Textfarbe des Ereignisses
                eventTextColor: '#000000',
                eventRender: function(event, element) {
                    element.css("font-size", "0.8em");
                    element.css("padding", "5px");
                }
            });
        }
    });
});

So zeigen Sie den Kalender an

Es wird nur von "#calendar" angezeigt (wenn Sie in HTML schreiben, schreiben Sie das div-Element, dessen ID der Kalender ist).

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


%p#notice= notice
%h1 Events
%table
  %thead
    %tr
      %th Title
      %th Body
      %th Start date
      %th End date
      %th{:colspan => "3"}
  %tbody
    - @events.each do |event|
      %tr
        %td= event.title
        %td= event.body
        %td= event.start_date
        %td= event.end_date
        %td= link_to 'Show', event
        %td= link_to 'Edit', edit_event_path(event)
        %td= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' }
%br/
= link_to 'New Event', new_event_path
//Diesmal habe ich es unter dem vorhandenen Code geschrieben.
#calendar

※wichtiger Punkt Bitte schalten Sie die Turbolink-Funktion aus.

`app/views/layouts/application.html.haml`


%body{"data-turbolinks" => "false"}
    = yield

Routing-Einstellungen

Stellen Sie das Routing so ein, dass Sie es sofort nach dem Start überprüfen können.


Rails.application.routes.draw do
  root "events#index"
  resources :events
end

Wenn Sie die App mit "Rails s" starten, sollte der Kalender wie folgt angezeigt werden.

Klicken Sie auf Neue Ereignisse, um sie einzugeben. Die Ereignisse werden im Kalender angezeigt. Screenshot 2020-05-21 20.43.11.png Sie können die Details des Ereignisses überprüfen, indem Sie auf das Ereignis im Kalender klicken. スクリーンショット 2020-05-21 20.43.18.png

Impressionen

Mithilfe der jQurery-Bibliothek konnte ich den Kalender problemlos anzeigen. Ich möchte die Bibliothek auch in Zukunft aktiv nutzen.

Verweise

https://qiita.com/syukan3/items/68280ce4ff45aa336363

[RUBY] Einführung des vollständigen Kalenders in die Rails-Anwendung