본문 바로가기

개발/Android 오픈소스

[안드로이드] 유용한 라이브러리 - AirCalendar ( 리스트뷰 형태의 에어비앤비 스타일 달력 )

Android 달력 라이브러리 - AirCalendar


현재는 업데이트 되어 바뀌어버렸지만, 그전 에어비앤비 달력은 많은 서비스에서 참고했던 달력이였습니다.

리스트뷰 스타일로 위/아래 무한스크롤 형태의 달력이죠


주로 호텔/펜션등 숙박 예약 서비스에서 많이 사용되어진 달력인데요

그 이유는 예약현황 + 단일 + 다중 날짜 선택이 가능하기 때문입니다( 숙박의 경우 최소 1박 2일 이죠 )


달력 자체가 만들때마다 귀찮고 손이 많이 가는 부분입니다.

그 때문에 "예약현황 + 단일 + 다중" 선택이 모두 가능한 달력 라이브러리를 만들어보았습니다.



  


< 스크린샷 >



1. app.gradle 에 아래 라인을 추가합니다.( 라이브러리 import )

jitpack.io 저장소 추가


allprojects { repositories { ...     maven { url 'https://jitpack.io' } }

}

dependencies 추가

implementation 'com.github.yongbeam:AirCalendar:x.x.x'



2. 프로젝트의 AndroidManifest.xml 에 아래 구문을 추가합니다.

    프로젝트에서 AirCalendar View 를 띄우기 위함입니다.

<activity android:name="com.yongbeom.aircalendar.AirCalendarDatePickerActivity"
            android:theme="@style/Theme.AppCompat.NoActionBar" />



3. 프로젝트에서 AirCalendar 를 호출합니다.

AirCalendarIntent intent = new AirCalendarIntent(this); intent.isBooking(false); intent.isSelect(false); intent.setBookingDateArray('Array Dates( format: yyyy-MM-dd'); intent.setStartDate(yyyy , MM , dd); // int intent.setEndDate(yyyy , MM , dd); // int intent.isMonthLabels(false);

intent.setActiveMonth(3);

intent.setMaxYear(2030);

startActivityForResult(intent, REQUEST_CODE);

호출시 사용되는 옵션은 아래와 같습니다.


intent.isBooking(false);     :  예약현황(특정날짜를 막는경우) 사용여부( true : 사용 / false : 비사용 )

intent.isSelect(false);        : 

intent.setBookingDateArray();  : 예약현황을 사용하는 경우 선택을 막을 날짜를 넘겨줍니다 Array<String> 타입의 yyyy-MM-dd 정보 

intent.setStartDate();  : 초기 시작 날짜를 지정합니다. ( 지정시 선택되저여 있으며, setEndDate() 설정시 중간 날짜도 선택됩니다 )

intent.setEndDate();    : 초기 종료 날짜를 지정합니다.( 지정시 선택되어져 있습니다 )

intent.isMonthLabels(false);  : false 시 라벨이 보여지지 않습니다.

intent.setActiveMonth(3);  : 달력에 활성화할 월을 지정합니다. 3으로 설정시 3개월만 활성화되고 이후 날짜는 비활성화 됩니다.

intent.setMaxYear(2030);  : 달력에 표시할 최대 년도를 설정합니다( 2030 설정시 달력에 2030년까지 노출 )

intent.setStartYear(2016)  : 달력 시작 년도를 지정합니다. 이 날짜를 지정할경우 모든 날짜가 선택이 가능해집니다.( 미지정시 현재 년도 )

 


4. AirCalendar 에서 선택한 날짜를 받아오기 위해 onActivityResult를 사용합니다.

( TODO: 차후 자체 콜백으로 변경될 예정입니다 )

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (resultCode == RESULT_OK && requestCode == REQUEST_CODE) {
            if(data != null){
                Toast.makeText(this, "Select Date range : " + data.getStringExtra(AirCalendarDatePickerActivity.RESULT_SELECT_START_DATE) + " ~ " + data.getStringExtra(AirCalendarDatePickerActivity.RESULT_SELECT_END_DATE), Toast.LENGTH_SHORT).show();
            }
        }
    }


선택된 날짜를 받아올때는 단일/다중 요청에 따라 달라집니다.

AirCalendarDatePickerActivity.RESULT_SELECT_START_DATE AirCalendarDatePickerActivity.RESULT_SELECT_END_DATE AirCalendarDatePickerActivity.RESULT_SELECT_START_VIEW_DATE // Day of the week AirCalendarDatePickerActivity.RESULT_SELECT_END_VIEW_DATE // Day of the week AirCalendarDatePickerActivity.RESULT_FLAG AirCalendarDatePickerActivity.RESULT_TYPE AirCalendarDatePickerActivity.RESULT_STATE


RESULT_SELECT_START_DATE : 시작 날짜를 사용합니다.

RESULT_SELECT_END_DATE : 종료 날짜를 사용합니다.

RESULT_SELECT_START_VIEW_DATE : 형식이 지정된 시작 날짜입니다.

RESULT_SELECT_END_VIEW_DATE : 형식이 지정된 종료 날짜입니다.

RESULT_FLAG : 현재는 사용하지 않습니다.

RESULT_TYPE : 결과 타입입니다( 단일/다중 )

RESULT_STATE : 성공/실패 여부 입니다.




단순하게 날짜 선택기능을 사용하는 경우 위처럼만 하시면 쉽게 달력을 사용하실 수 있습니다.

만약 스타일의 커스마이징이 필요한 경우 아래 스타일을 별도로 정의해주시면 됩니다.


  • app:colorCurrentDay [color def:#ff999999] 
  • app:colorSelectedDayBackground [color def:#E75F49] 
  • app:colorSelectedDayText [color def:#fff2f2f2] 
  • app:colorPreviousDay [color def:#ff999999] 
  • app:colorNormalDay [color def:#ff999999] 
  • app:colorMonthName [color def:#ff999999]
  • app:colorDayName [color def:#ff999999]
  • app:textSizeDay [dimension def:16sp]
  • app:textSizeMonth [dimension def:16sp] 
  • app:textSizeDayName [dimension def:10sp] 
  • app:headerMonthHeight [dimension def:50dip] 
  • app:drawRoundRect [boolean def:false]
  • app:selectedDayRadius [dimension def:16dip] 
  • app:calendarHeight [dimension def:270dip]
  • app:enablePreviousDay [boolean def:true] 
  • app:currentDaySelected [boolean def:false] 
  • app:firstMonth [enum def:-1] 
  • app:lastMonth [enum def:-1] 





지속적인 업데이트를 통해 다양한 기능이 추가될 예정입니다.

 위 스타일외의 커스마이징을 원하시면 아래 GitHub 에서 코드를 내려받아 직접 개발하실 수 있습니다.


AirCalendar GitHub 바로가기 

       

호출 샘플 바로보기



궁금한 점이나 의견등은 블로그나 github를 통해 언제든 주시면 됩니다 :)

감사합니다.