はじめに
FullCalendar.jsをgemでインストールしている方が多いのですが、
JavaScript=FrontEndをgemで入れる意味がわからないのでCDNでやる方法を
githubにあげました。
手順
１．Modelとか諸々を作る。
rails g scaffold event title:string body:string start_date:datetime end_date:datetime
rails db:migrate RAILS_ENV=development
２．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;
}
３．Viewを更新
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.builderを更新
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
結果
