FullCalendar 전체 달력의 background image 설정하는 방법

지난 포스팅에서 FullCalendar API를 사용하는 방법에 대하여 포스팅했다. 

여기에 FullCalendar에서 전체 달력의 background를 원하는 사진으로 설정하고 싶다면 어떻게 하면 될까?

간단히 css만 적용을 해주면 되는데, 원하는 파일을 프로젝트 경로 어딘가에 넣어두고 css에서 url만 잘 끌어다가 쓰면 된다. 

나는 이쁜 snowman 배경화면을 구글에서 다운받고, 12월 배경화면으로 설정하려고 했다. 

  #calendar1 {

    max-width: 1100px;

    margin: 0 auto;

  }

  #calendar1 .fc-view-harness-active>.fc-view{

    background: url("image/snowman.jpg") no-repeat;

    background-size: contain;

}

어렵지 않게 위와 같이 설정할 수 있다. 

background url은 현재 소스 파일에 대한 경로로 설정하면 된다. 

그리고 no-repeat으로 하면 사진 사이즈를 배경에 딱 맞출 수 있어 매우 유용하니 무조건 넣어주기! 넣지 않아주면 사진이 짤릴 가능성이 높다.

위 소스처럼 설정을 해주면 

이런식으로 전체 달력에 배경을 꽉 맞추어 사진을 넣어줄 수 있다. 

각 날짜별로 사진을 넣는 것은 또 다른 포스팅으로 올려보도록 하겠다.