Rails7.1 | 仕事売買アプリ作成 | 47 | Full Calendar - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

フルカレンダー（FullCalendar）は、JavaScriptで作成されたオープンソースのカレンダーコンポーネントのことです。
Webアプリケーションやウェブサイトで、イベントや予定を視覚的に表示し、管理するために使用されます。
FullCalendarは、日付、週、月の表示モードをサポートし、ユーザーがカレンダー上でイベントを追加、編集、削除できる多くの機能を提供します。

Rails7.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】38行目

<!DOCTYPE html>
<html>
  <head>
    <title>GigHub7</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

    <!-- 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" />

    <!-- JQuery 3.7.1 -->
    <script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>

    <!-- ratyjs 3.1.1 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/jquery.raty.min.js" integrity="sha512-Isj3SyFm+B8u/cErwzYj2iEgBorGyWqdFVb934Y+jajNg9kiYQQc9pbmiIgq/bDcar9ijmw4W+bd72UK/tzcsA==" crossorigin="anonymous" referrerpolicy="no-referrer"></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
        params[:start_date] ||= Date.current.to_s
        start_date = Date.parse(params[:start_date])
        first_of_month = (start_date - 1.month).beginning_of_month
        end_of_month = (start_date + 1.month).end_of_month
        @orders = Order.where("seller_id = ? AND status = ? AND due_date BETWEEN ? AND ?", 
                              current_user.id,
                              Order.statuses[:inprogress],
                              first_of_month,
                              end_of_month)
    end  

end

ルートを設定します。
記述追加　config\routes.rb
22行目に「get '/host_calendar', to: "calendars#host"」の記述追加

Rails.application.routes.draw do

  # ルートを　app\views\pages\home.html.erb　に設定
  root 'pages#home'

  # get
  get 'pages/home'
  get '/dashboard', to: 'users#dashboard'
  get '/users/:id', to: 'users#show', as: 'user'
  get '/selling_orders', to: 'orders#selling_orders'
  get '/buying_orders', to: 'orders#buying_orders'
  get '/all_requests', to: 'requests#list'
  get '/request_offers/:id', to: 'requests#offers', as: 'request_offers'
  get '/my_offers', to: 'requests#my_offers'
  get '/search', to: 'pages#search'
  get 'settings/payment', to: 'users#payment', as: 'settings_payment'
  get 'settings/payout', to: 'users#payout', as: 'settings_payout'
  get '/gigs/:id/checkout/:pricing_type', to: 'gigs#checkout', as: 'checkout'
  get '/conversations', to: 'conversations#list', as: "conversations"
  get '/conversations/:id', to: 'conversations#show', as: "conversation_detail"
  get '/orders/:id', to: 'orders#show', as: "order_detail"
  get '/host_calendar', to: "calendars#host"

  # post
  post '/users/edit', to: 'users#update'
  post '/offers', to: 'offers#create'
  post '/reviews', to: 'reviews#create'
  post '/search', to: 'pages#search'
  post '/settings/payment', to: 'users#update_payment', as: "update_payment"
  post 'messages', to: 'messages#create'
  post '/comments', to: 'comments#create'

  # put
  put '/orders/:id/complete', to: 'orders#complete', as: 'complete_order'
  put '/offers/:id/accept', to: 'offers#accept', as: 'accept_offer'
  put '/offers/:id/reject', to: 'offers#reject', as: 'reject_offer'

  resources :gigs do
    member do
      delete :delete_photo
      post :upload_photo
    end
    resources :orders, only: [:create]
  end

  resources :requests
  resources :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'}
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
  # Can be used by load balancers and uptime monitors to verify that the app is live.
  get "up" => "rails/health#show", as: :rails_health_check

  # Defines the root path route ("/")
  # root "posts#index"
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 mt-4">
    <div class="card">
        <div class="card-body">
            <div id="calendar"></div>
        </div>
    </div>
</div>


<script>
    window.orders = <%= raw @orders.to_json %>
    console.log(orders);
    function showOrders(orders) {
        return orders?.map(function(o) {
            let code = '#ffdd57';
            if (new Date(o.due_date) < new Date()) {
                code = '#ff3860';
            } else if (new Date(o.due_date) > new Date(new Date().getTime() + (2*24*60*60*1000))) {
                code = '#23d160';
            }
            return {
                id: o.id,
                title: o.buyer_name,
                start: o.due_date,
                end: o.due_date,
                backgroundColor: code,
                color: code
            }
        });
    };


    var getQueryParam = function(param) {
        var found,
            item = window.location.search.substr(1).split("=");
        if (param == item[0]) {
            found = item[1]
        }
        return found;
    }

    
    document.addEventListener('DOMContentLoaded', function() {
        var start_date = getQueryParam('start_date') ? new Date(getQueryParam('start_date')) : new Date()
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'ja',
        timeZone: "Asia/Tokyo",
        eventColor: 'red',
        events: showOrders(orders),
        eventClick: function(info) {
                    window.location.href = "/orders/" + info.event.id
                },
        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>

ブラウザを確認します。
アカウントを切り替えて動作を確認してください。
ブラウザ確認
http://localhost:3000/host_calendar

ナビゲーションバーにカレンダーへのリンクを追加します。

「app/views/shared/_navbar.html.erb」ファイルに以下の記述を追加します。

<li><%= link_to  "カレンダー", host_calendar_path, class: "dropdown-item btn btn-light", data: { turbo: false} %></li>

記述追加　【app/views/shared/_navbar.html.erb】37行目

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="/" ><span class="font1">Gig Hub7</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><%= link_to  "リクエスト", all_requests_path, class: "dropdown-item btn btn-light" %></li>
          <li><%= link_to  "メッセージ", conversations_path, class: "dropdown-item btn btn-light", data: { turbo: false} %></li>
          <li><%= link_to  "カレンダー", host_calendar_path, class: "dropdown-item btn btn-light", data: { turbo: false} %></li>
          <li><hr class="dropdown-divider"><span class="badge bg-danger" style="margin-left: 1rem;">フリーランサー</span></li>
          <li><%= link_to  "仕事を新規登録", new_gig_path, class: "dropdown-item btn btn-light" %></li>
          <li><%= link_to  "仕事確認", selling_orders_path, class: "dropdown-item btn btn-light" %></li>
          <li><%= link_to  "申し込み確認", my_offers_path, class: "dropdown-item btn btn-light" %></li>
          <li><%= link_to  "振込口座登録", settings_payout_path, class: "dropdown-item btn btn-light", data: { turbo: false} %>
          <li><hr class="dropdown-divider"><span class="badge bg-primary" style="margin-left: 1rem;">クライアント</span></li>
          <li><%= link_to  "依頼確認", buying_orders_path, class: "dropdown-item btn btn-light" %></li>
          <li><%= link_to  "リクエスト登録", new_request_path, class: "dropdown-item btn btn-light" %></li>
          <li><%= link_to  "リクエスト確認", requests_path, class: "dropdown-item btn btn-light" %></li>
          <li><%= link_to  "クレジットカード登録", settings_payment_path, class: "dropdown-item btn btn-light", data: { turbo: false} %></li>
          <li><hr class="dropdown-divider"></li>
            <li><%= button_to  "ログアウト", destroy_user_session_path, method: :delete, class: "dropdown-item btn btn-light" %></li>
          </ul>
        </li>
      </ul>
      <% end %>

    </div>
  </div>
</nav>