FullCalendar On Rails용 CDN!

입문

FullCalendar.gm로 js를 설치하는 분들이 많아요.
젬으로 JavaScript=FrontEnd를 넣는 의미를 모르기 때문에 CDN으로 하는 방법

github 줬어요.

단계

1. 모델 등 다양한 것을 만든다.

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

2. JavaScript 파일을 만듭니다.
app/assets/javascripts/fullcalendar.js

var g_calendar = null;

var date_now = new Date();
var date_start = new Date(date_now.getFullYear(), date_now.getMonth(), 1);
var date_end = new Date(date_now.getFullYear(), date_now.getMonth(), 1);
date_end.setMonth(date_end.getMonth()+12);

function createCalendar()
{
    return new FullCalendar.Calendar(document.getElementById("calendar"), {
        plugins: ["dayGrid", 'interaction', 'timeGrid', 'list'],

        header: {
            left: "prev",
            center: "title",
            right:" next"
        },

        buttonText: {
            prev: "前の月",
            next: "次の月"
        },

        defaultDate: new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000)),
        timeZone: 'JST',

        validRange: {
            start: date_start,
            end: date_end
        },

        // イベント情報をJSONファイルから読み込みます
        events: "events.json",

        dateClick: function(info) {
            $.ajax({
                type: 'GET',
                url: '/events/new',
                data: { time: moment(info.date).format() },
            }).done(function (res) {
            }).fail(function (result) {
                alert('エラー')
            });
        },
    });
}

function fullCalendar() {
    if (g_calendar == null) {
        g_calendar = createCalendar()
    }
    return g_calendar;
}

3. 뷰 업데이트
app/views/layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>FullcalendarTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales/ja.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js"></script>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

app/views/index.html.erb

<div id="calendar"></div>
<div id="inputScheduleForm" class="modal-dialog" role="document"></div>
<br>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var calendar = fullCalendar();
  calendar.render();
});
</script>

４．json.생성기 업데이트
app/views/index.json.builder

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, format: :html)
end

결과

Reference

이 문제에 관하여(FullCalendar On Rails용 CDN!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/juvenile-develop/items/e845358a648db3bd8d27

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다