↓↓クリックして頂けると励みになります。
【32 | Ransack】 << 【ホーム】 >> 【34 | 予約ステータス】
フルカレンダー（FullCalendar）は、JavaScriptで作成されたオープンソースのカレンダーコンポーネントのことです。
Webアプリケーションやウェブサイトで、イベントや予定を視覚的に表示し、管理するために使用されます。
FullCalendarは、日付、週、月の表示モードをサポートし、ユーザーがカレンダー上でイベントを追加、編集、削除できる多くの機能を提供します。
Rails6.0ではフルカレンダーをyarnでインストールていましたが、Rails6.1ではCDN経由で使えるようにします。
「app/views/layouts/application.html.erb」ファイルのheadタグに以下の記述を追加します。
<!-- フルカレンダー --> <script src='https://cdn.jsdelivr.net/npm/moment@2.27.0/min/moment.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
記述追加 【app/views/layouts/application.html.erb】
<!DOCTYPE html> <html> <head> <title>VacationRental</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <!-- bootstrap5.3 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> <!-- noty3.1.4 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js" integrity="sha512-lOrm9FgT1LKOJRUXF3tp6QaMorJftUjowOWiDcG5GFZ/q7ukof19V0HKx/GWzXCdt9zYju3/KhBNdCLzK8b90Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css" integrity="sha512-0p3K0H3S6Q4bEWZ/WmC94Tgit2ular2/n0ESdfEX8l172YyQj8re1Wu9s/HT9T/T2osUw5Gx/6pAZNk3UKbESw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Kosugi+Maru&family=Rampart+One&display=swap" rel="stylesheet"> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/dd8c589546.js" crossorigin="anonymous"></script> <!-- Dropzone5.5.1 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js" integrity="sha512-jytq61HY3/eCNwWirBhRofDxujTCMFEiQeTe+kHR4eYLNTXrUq7kY2qQDKOUnsVAKN5XGBJjQ3TvNkIkW/itGw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" integrity="sha512-zoIoZAaHj0iHEOwZZeQnGqpU8Ph4ki9ptyHZFPe+BmILwqAksvwm27hR9dYH4WXjYY/4/mz8YDBCgVqzc2+BJA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- 日付ピッカー デザインsunny--> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/sunny/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script> <!-- 日付ピッカーの日本語化--> <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script> <!-- フルカレンダー --> <script src='https://cdn.jsdelivr.net/npm/moment@2.27.0/min/moment.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script> </head> <body> <!-- ナビゲーションバー --> <%= render "shared/navbar" %> <!-- noty --> <%= render 'shared/notification' %> <%= yield %> </body> </html>
「app\controllers」フォルダに「calendars_controller.rb」ファイルを新規作成します。
app\controllers\calendars_controller.rb(新規作成したファイル)
class CalendarsController < ApplicationController before_action :authenticate_user! include ApplicationHelper def host @rooms = current_user.rooms params[:start_date] ||= Date.current.to_s params[:room_id] ||= @rooms[0] ? @rooms[0].id : nil if params[:q].present? params[:start_date] = params[:q][:start_date] params[:room_id] = params[:q][:room_id] end @search = Reservation.ransack(params[:q]) if params[:room_id] @room = Room.find(params[:room_id]) start_date = Date.parse(params[:start_date]) first_of_month = (start_date - 1.months).beginning_of_month # 最初の月の1日から end_of_month = (start_date + 1.months).end_of_month # => 3ヶ月後の31まで @events = @room.reservations.joins(:user) .select('reservations.*, users.full_name, users.email') .where('(start_date BETWEEN ? AND ?) AND reservations.status <> ?', first_of_month, end_of_month, 2) else @room = nil @events = [] end end end
ルートを設定します。
記述追加 config\routes.rb
13行目に「get '/host_calendar' => "calendars#host"」の記述追加
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' # get get '/dashboard', to: 'users#dashboard' get 'pages/home' get '/users/:id', to: 'users#show', as: 'user' get '/your_trips' => 'reservations#your_trips' get '/your_reservations' => 'reservations#your_reservations' get 'search' => 'pages#search' get '/host_calendar' => "calendars#host" # post post '/users/edit', to: 'users#update' resources :rooms, except: [:edit] do member do get 'listing' get 'pricing' get 'description' get 'photo_upload' get 'amenities' get 'location' get 'preload' get 'preview' delete :delete_photo post :upload_photo end resources :reservations, only: [:create] end resources :guest_reviews, only: [:create, :destroy] resources :host_reviews, only: [:create, :destroy] # device devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
「app\views」フォルダに「calendars」フォルダを新規作成します。
作成した「calendars」フォルダに「host.html.erb」ファイルを新規作成します。
app\views\calendars\host.html.erb(新規作成したファイル)
<style> /*週*/ .fc-col-header-cell{ background: #d3d3d3; } /*日付*/ .fc-daygrid-day{ background: #fff; } /*日曜*/ .fc-daygrid-day.fc-day-sun{ background: #ededed; color: #ee827c; } .fc-col-header-cell-cushion, .fc-daygrid-day-number, .fc-event{ pointer-events: none; color: inherit; text-decoration: none; } </style> <div class="container mb-4 mt-4"> <% if !@rooms.blank? %> <div class="card"> <%= search_form_for @search, class: 'form-group', remote: true, url: host_calendar_path do |f| %> <div class="card-body"> <label>登録している部屋を選択</label> <div> <%= f.select :room_id, options_for_select(@rooms.collect {|u| [u.listing_name, u.id]}, params[:room_id]), {}, { onchange: "submit(this.form);", } %> </div> </div> <%= f.hidden_field :start_date, id: "start-date", value: params[:start_date], onchange: "submit(this.form);" %> <% end %> </div> <% end %> </div> <div class="container"> <div class="card"> <div class="card-body"> <div id="calendar"></div> </div> </div> </div> <script> window.reservations = <%= raw @events.to_json %> console.log(reservations); function showReservations(data) { return data.map(function (e) { if (e['start_date'] !== e['end_date']) { e['end_date'] = moment(e['end_date']).add(1, 'days').format(); } return { title: e.full_name , start: e['start_date'], end: e['end_date'], allDay: true, } }); } document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', locale: 'ja', timeZone: "Asia/Tokyo", eventColor: 'red', events: showReservations(reservations), headerToolbar: { right: 'prev,next', left: 'title', center: 'dayGridMonth,listMonth', }, dayCellContent: function(arg){ return arg.date.getDate(); }, height: "auto", navLinks: false, }); calendar.render(); }); $('.fc-prev-button').click(function() { var current = new Date($('#start-date').val()); var prev = new Date(current.getFullYear(), current.getMonth() - 1, 1) $('#start-date').val(moment(prev).format('YYYY-MM-DD')) $('#start-date').trigger('change') }); $('.fc-next-button').click(function() { var current = new Date($('#start-date').val()); var next = new Date(current.getFullYear(), current.getMonth() + 1, 1) $('#start-date').val(moment(next).format('YYYY-MM-DD')) $('#start-date').trigger('change') }); </script>
「app\views\calendars」フォルダに「host.js.erb」ファイルを新規作成します。
app\views\calendars\host.js.erb(新規作成したファイル)
reservations = <%= raw @events.to_json %> $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', showReservations(reservations)); $('#calendar').fullCalendar('rerenderEvents');
ブラウザを確認します。
ホストのアカウントで確認してください。
ブラウザ確認
http://localhost:3000/host_calendar
ナビゲーションバーにカレンダーへのリンクを追加します。
「app/views/shared/_navbar.html.erb」ファイルに以下の記述を追加します。
<li><%= link_to "カレンダー", host_calendar_path, class: "dropdown-item btn btn-light", data: { turbolinks: false} %></li>
記述追加 【app/views/shared/_navbar.html.erb】38行目
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="/"><span class="font1">Vacation Rental</span></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <li class="nav-item" style="margin-bottom: 0.1rem;"> <span style="margin-left: 1rem;"> <%= link_to "新規登録", new_user_registration_path, class: "btn btn-danger" %> </span> </li> <li class="nav-item"> <span style="margin-left: 1rem;"> <%= link_to "ログイン", new_user_session_path, class: "btn btn-success text-light" %> </span> </li> </ul> <!-- ログインしていたら --> <% else %> <ul class="navbar-nav" style="margin-left: 2rem;"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <figure style="position:relative; top: 0.2rem;" class="avatar <%= current_user.status ? "online" : "offline" %>"></figure> <%= image_tag avatar_url(current_user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 40px; height: 30px;" %> <%= current_user.full_name %> </a> <ul class="dropdown-menu"> <li><%= link_to "ダッシュボード", dashboard_path, class: "dropdown-item btn btn-lightt" %></li> <li><%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "dropdown-item btn btn-light" %></li> <li><hr class="dropdown-divider"><span class="badge bg-danger" style="margin-left: 1rem;">ホスト</span></li> <li><%= link_to "部屋を新規登録", new_room_path, class: "dropdown-item btn btn-light" %></li> <li><%= link_to "受注予約管理", your_reservations_path, class: "dropdown-item btn btn-light" %></li> <li><%= link_to "カレンダー", host_calendar_path, class: "dropdown-item btn btn-light", data: { turbolinks: false} %></li> <li><hr class="dropdown-divider"><span class="badge bg-primary" style="margin-left: 1rem;">ゲスト</span></li> <li><%= link_to "予約確認", your_trips_path, class: "dropdown-item btn btn-light" %></li> <li><hr class="dropdown-divider"></li> <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "dropdown-item btn btn-light" %></li> </ul> </li> </ul> <% end %> </div> </div> </nav>
ブラウザを確認します。
【32 | Ransack】 << 【ホーム】 >> 【34 | 予約ステータス】
↓↓クリックして頂けると励みになります。
