입문

가게 홈페이지에는 이벤트를 달력으로 한눈에 볼 수 있다.
처음에는 fullcalendar를 사용할 계획이었으나 학교에도 교부 기한이 있고 학습 원가가 높지 않은 방법을 고려하여 마지막으로simlpe_현재calendar를 사용합니다.
몇 달 후의 자신을 위해서라도 Qiita의 첫 투고로 용기를 내십시오.

완료 이미지

전제 조건

・ 예정된 투고 기능 구현(글은 Schedule 모델)
· 언어는 이미 i18n을 통해 일본어화되었다.원래는 주, 월이 영어 표기였다.(나는 단지 잘못된 정보를 일본어화하고 싶었지만 뜻밖에도 이쪽도 변했다)

simple_calendar 설치

Gemfile

gem "simple_calendar", "~> 2.0"

$ bundle install

달력 보기

전제 조건에 사용된 Schedule 모델의 마이그레이션 파일이 여기에 있습니다.
t.string:content는 예정된 제목, 상세한 화면에 예정된 상세한 내용을 표시하고 싶어서 t.text:plan에 예정된 상세한 글을 추가했습니다.
시작 시간의 데이터도 원하기 때문에.datetime:start_시간이 걸리다.
db/migrate/..._create_schedules.rb

class CreateSchedules < ActiveRecord::Migration[5.2]
  def change
    create_table :schedules do |t|
      t.string :content
      t.text :plan
      t.datetime :start_time

      t.timestamps
    end
  end
end

달력의 외관을 조정하기 위해 다음을 수행하여view 파일을 만듭니다.

$ rails g simple_calendar:views

app/views/schedules/index.html.erb

<h1>Schedule</h1>
<%= month_calendar events: @schedules do |date, schedules| %>
　<%= date.day %>
　　<% schedules.each do |schedule| %><br />
　　　<%= schedule.start_time.strftime('%H:%M') %>　#スケジュールの開始時間を表示
　　　<%= link_to schedule.content,schedule_path(schedule) %>
　　<% end %>
<% end %>

계획 제목에서 계획 세부 정보로 링크되는 사양입니다.
simple_calendar CSS를 적용하기 위해 응용 프로그램입니다.scss에 추가합니다.
app/assets/stylesheets/application.scss

 *
 *= require simple_calendar #←ここに追記します
 *= require_tree .
 *= require_self
 */

월요일을 일본어로 해서 좀 어색해서 조금 수정했어요.
app/views/simple_calender/_month_calendar.html.erb

 <div class="simple-calendar">
  <div class="calendar-heading">
    <%= link_to t('simple_calendar.previous', default: '<<先月'),  calendar.url_for_previous_view %>　#Previousを先月に変更
    <font size="5"><span class="calendar-title"><%= start_date.year %> <%= t('date.month_names')[start_date.month] %></span></font>
    <%= link_to t('simple_calendar.next', default: '次月>>'), calendar.url_for_next_view %>　#Nextを次月に変更
  </div>

  <table class="table table-striped">
    <thead>
      <tr>
        <% date_range.slice(0, 7).each do |day| %>
          <th><%= t('date.abbr_day_names')[day.wday] %></th>
        <% end %>
      </tr>
    </thead>
・
・
・

이상은 simple_calendar 배치가 완료되었습니다!

참고 자료

https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0
https://github.com/excid3/simple_calendar
참고하도록 허락해 주세요.정말 감사합니다.

마지막

여기 보신 분들 감사합니다.
첫 투고지만 이상한 표현이 있으면 실례!
그럼 제가 다시 투고할 수 있도록 허락해 주세요!