[ Gem ] simple_calendar

Gem - Simple_calendar

---

Github link ☞☞ [  https://github.com/excid3/simple_calendar  ]

'Simple_calendar' 란?

웹상에 달력을 만들어주는 Gem(루비 프로젝트) 입니다. 월 또는 한주 단위로 화면에 표현할 수 있으며  더 나아가 원하는 일수 만큼 화면에 달력을 그려낼 수 있습니다. 뿐만아니라, 이잼은 Meeting이라는 모델로 달력에다가 일정을 추가 또는 삭제를 할 수 있도록 지원해 줍니다.

Home파일 작성

---

미리 home을 만들고 시작하는것이 좋겠죠?

우선 프로젝트 폴더안에 home 컨트롤러와 home html 파일을 생성합니다.

$ rails g controller home index

Gemfile의 작성

---

레일스 프로젝트의 루트에 위치한 Gemfile을 열어 아래와 같이 추가한 후,

 다음문구 추가   |   gem "simple_calendar"  | 

부트스트랩 readme를 읽어보게 되면 다음 문구가 있는걸 확인 할 수 있습니다.

If you're using Bootstrap, the calendar should already have a border and nice spacing for days.

(부트스트랩을 사용할 경우, 달력이 날자를 위한 테두리와 좋은 간격을 가질 수 있습니다.)

부트스트랩을 설치 안하셨다면! [ 클릭 Gem 'bootstrap' ] 

들어가서 설정해 주시기 바랍니다.

젬파일을 추가 했다면, [ 번들 인스톨 ]을 해줍니다.

$ bundle install

여기까지 잘 따라하셨다면 

달력을 화면에 띄우는 기능을 사용하실 수 있습니다.

참 쉽죠?

어떻게 사용하는지 다음의 내용에서 살펴보겠습니다.

Calendar 사용법

---

Month Calendar

기본달력 ( 한달 단위 )

You can generate a calendar for the month with the month_calendar method.

<%= month_calendar do |date| %>
  <%= date %> 
<% end %>

---

Week Calendar

기본달력 ( 한주 단위 )

You can generate a week calendar with the week_calendar method.

<%= week_calendar number_of_weeks: 2 do |date| %>
  <%= date %>
<% end %>

Setting number_of_weeks is optional and defaults to 1.

(옵션으로 몇주씩 화면에 띄울지 정할 수 있습니다.)

---

Custom Length Calendar

기본달력 ( 일단위 - 설정 )

You can generate calendars of any length by passing in the number of days you want to render.

<%= calendar number_of_days: 4 do |date| %>
  <%= date %>
<% end %>

Setting number_of_days is optional and defaults to 4.

(옵션으로 몇일씩 화면에 띄울지 정할 수 있습니다.)

이번에는 달력에 자신의 일정을 추가해 보겠습니다.

먼저 scaffold를 이용해서 일정관리CRUD를 생성하고,

그 다음에 생성된 일정을 달력에 그려보겠습니다.

어떻게 사용하는지 다음의 내용에서 살펴보겠습니다.

Scaffold (일정관리 생성)

---

아래의 Scaffold라는 명령문을 이용해

 Meeting이라는 이름으로 CRUD를 모두 생성합니다.

Here's an example model:

# single day events
$ rails g scaffold Meeting name start_time:datetime

# multi-day events 
$ rails g scaffold Meeting name start_time:datetime end_time:datetime

위처럼 생성이 되었다면,

 홈 화면에 일정추가 페이지로 가는 링크를 만들어 줍니다.

페이지 주소를 어떻게 찾는지 궁금하다면

콘솔창에 rake routes라고 아래와 같이 입력해주면 찾으실 수 있습니다.

$ rake routes

경로를 찾은 후 아래와 같이 소스를 수정해 줍시다.

홈화면에 추가된 일정추가하기 링크를 클릭해 접속하게 되면,

다음과 같이 일정을 추가 및 수정, 제거 기능을

사용하실 수 있게 됩니다.

이렇게 추가된 일정을 저희가 앞서 만든 달력에 표시하고 싶다면,

다음의 내용을 따라주시면 됩니다.

달력을 추가한 페이지의 컨트롤러 즉, 이번 예제에서는

Home 이라는 페이지에 달력을 만들었으니 home 컨트롤러가 되겠네요.

컨트롤러에 들어가서 다음의 내용처럼 소스를 수정해 줍니다.

def index
  @meetings = Meeting.all
end

완료 되셨다면, 이전의 달력소스

Month Calendar

기본달력 ( 한달 단위 )

You can generate a calendar for the month with the month_calendar method.

<%= month_calendar do |date| %>
  <%= date %> 
<% end %>

대신에 다음의 소스로 다시 작성해 줍니다.

<%= month_calendar events: @meetings do |date, meetings| %>
  <%= date %>

  <% meetings.each do |meeting| %>
    <div>
      <%= meeting.name %>
    </div>
  <% end %>
<% end %>

이렇게 수정하게 되면 

다음의 화면처럼 일정관리 페이지에서 작성한

일정들이 화면에 표시되어지게 됩니다.