Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
403 lines (288 sloc) 13.1 KB

CalendarView doc

CalendarView Characteristics

  • Based on Canvas, Extreme speed
  • Hot plug UI customization
  • Support month view、 week view、year view、lunar calendar and so on
  • Support static or dynamic setting of week start
  • Support for static or dynamic setting of calendar item height
  • Support date interceptor and range
  • Support multi-touch, smooth scrolling calendar
  • Support like NestedScrolling
  • All UI depends on your drawing

1、Create a class extends the MonthView or RangeMonthViewMultiMonthView.

If you need WeekView, also create a class extends the WeekView or RangeWeekViewMultiWeekView.

  • Implement these three methods :onDrawSelected onDrawScheme onDrawText, like this
/**
 * CustomMonthView with canvas
 */
public class CustomMonthView extends MonthView {

    /**
     * draw select calendar
     *
     * @param canvas    canvas
     * @param calendar  select calendar
     * @param x         calendar item x start point
     * @param y         calendar item y start point
     * @param hasScheme is calendar has scheme?
     * @return if return true will call onDrawScheme again
     */
    @Override
    protected boolean onDrawSelected(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme) {
        canvas.drawRect(x , y , x + mItemWidth , y + mItemHeight, mSelectedPaint);
        return true;
    }

    /**
     * draw scheme if calendar has scheme
     *
     * @param canvas   canvas
     * @param calendar calendar has scheme
     * @param x        calendar item x start point
     * @param y        calendar item y start point
     */
    @Override
    protected void onDrawScheme(Canvas canvas, Calendar calendar, int x, int y) {
       canvas.drawCircle(x + mItemWidth / 2, y + mItemHeight - 3 * mPadding, mPointRadius, mPointPaint);
    }

    /**
     * draw text
     *
     * @param canvas     canvas
     * @param calendar   calendar
     * @param x          calendar item x start point
     * @param y          calendar item y start point
     * @param hasScheme  is calendar has scheme?
     * @param isSelected is calendar selected?
     */
    @Override
    protected void onDrawText(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme, boolean isSelected) {
        float baselineY = mTextBaseLine + y;
        int cx = x + mItemWidth / 2;
        canvas.drawText(String.valueOf(calendar.getDay()),
                            cx,
                            baselineY,
                            calendar.isCurrentDay() ? mCurDayTextPaint :
                                    calendar.isCurrentMonth() ? mSchemeTextPaint : mOtherMonthTextPaint);
    }
}
  • Add the class path in xml
<attr name="month_view" format="string" /><!--you MonthView.class path-->
<attr name="week_view" format="string" /> <!--you WeekView.class path-->

<com.haibin.calendarview.CalendarView
            android:id="@+id/calendarView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:month_view="com.haibin.calendarviewproject.meizu.MeiZuMonthView"
            app:week_view="com.haibin.calendarviewproject.meizu.MeizuWeekView" />
  • You can also use the hot plug feature, Quickly switch UI styles
mCalendarView.setWeekView(MeiZuWeekView.class);

mCalendarView.setMonthView(MeiZuMonthView.class);
  • Calendar has multiple view modes to choose depending on your needs
MonthView、WeekView,and select_mode="default_mode"
Same as mobile phone calendar,date interceptor is not supported
MonthView、WeekView,and select_mode="single_mode"
Single mode, support date interceptor
RangeMonthView、RangeWeekView,need set select_mode="range_mode"
support date intercept
MultiMonthView、MultiWeekView,need set select_mode="multi_mode"
support date intercept
  • If you need WeekView,Add parent layout CalendarLayout in CalendarView
<com.haibin.calendarview.CalendarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:default_status="shrink"
        app:calendar_content_view_id="@+id/recyclerView">

        <com.haibin.calendarview.CalendarView
             android:id="@+id/calendarView"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             app:month_view="com.haibin.calendarviewproject.simple.SimpleMonthView"
             app:week_view="com.haibin.calendarviewproject.simple.SimpleWeekView"
             app:week_bar_view="com.haibin.calendarviewproject.EnglishWeekBar"
             app:month_view_show_mode="mode_only_current" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff" />
    </com.haibin.calendarview.CalendarLayout>
  • You can use the listener to monitor the WeekView and MonthView switch
public void setOnViewChangeListener(OnViewChangeListener listener);
  • All off CalendarLayout attr,Smooth scrolling calendar. If used CalendarLayout,you need set calendar_content_view_id
<attr name="default_status">
      <enum name="expand" value="0" />
      <enum name="shrink" value="1" />
</attr>


<!-- gesture -->
<attr name="gesture_mode">
      <enum name="default_mode" value="0" />
      <enum name="disabled" value="2" />
</attr>

<attr name="calendar_show_mode">
      <enum name="both_month_week_view" value="0" />
      <enum name="only_week_view" value="1" />
      <enum name="only_month_view" value="2" />
</attr>

<attr name="calendar_content_view_id" format="integer" />
  • If you need a full style CalendarView, make app:calendar_match_parent="true", No need to use CalendarLayout

  • The CalendarView also provides a YearView if you need it

  • If you need to quick jump date

CalendarView.scrollToCalendar();

CalendarView.scrollToNext();

CalendarView.scrollToPre();

CalendarView.scrollToXXX();

  • Support static or dynamic setting of week start

app:week_start_with="mon、sun、sat"

mCalendarView.setWeekStarWithSun();

mCalendarView.setWeekStarWithMon();

mCalendarView.setWeekStarWithSat();

  • Set calendar range

<attr name="min_year" format="integer" />
<attr name="max_year" format="integer" />
<attr name="min_year_month" format="integer" />
<attr name="max_year_month" format="integer" />
<attr name="min_year_day" format="integer" />
<attr name="max_year_day" format="integer" />

CalendarView.setRange(int minYear, int minYearMonth, int minYearDay,
         int maxYear, int maxYearMonth, int maxYearDay)

  • Add OnCalendarInterceptListener to intercept calendar
mCalendarView.setOnCalendarInterceptListener(new CalendarView.OnCalendarInterceptListener() {
     @Override
     public boolean onCalendarIntercept(Calendar calendar) {

         return calendar.isWeekend();
     }

     @Override
     public void onCalendarInterceptClick(Calendar calendar, boolean isClick) {
         //todo 点击拦截的日期回调
     }
});
  • You can get interception and range results in month and week view
boolean isInRange = isInRange(calendar);

boolean isEnable = !onCalendarIntercept(calendar);

  • The CalendarView provides scheme setting, setSchemeDate(Map<String, Calendar> mSchemeDates)

  • class Calendar

boolean isWeekend();

int getWeek();

String getSolarTerm();

String getGregorianFestival();

String getTraditionFestival();

boolean isLeapYear();

int getLeapMonth();

boolean isSameMonth(Calendar calendar);

int compareTo(Calendar calendar);

long getTimeInMillis();

int differ(Calendar calendar);

All of CalendarView attr

<declare-styleable name="CalendarView">

        <attr name="calendar_padding" format="dimension" /><!--CalendarView left and right padding-->

        <attr name="month_view" format="color" /> <!--Custom class path-->
        <attr name="week_view" format="string" /> <!--Custom class path-->
        <attr name="week_bar_height" format="dimension" /> <!--WeekBar height-->
        <attr name="week_bar_view" format="string" /> <!--Custom WeekBar class path -->
        <attr name="week_line_margin" format="dimension" /><!--line margin-->

        <attr name="week_line_background" format="color" /><!--line color-->
        <attr name="week_background" format="color" /> <!--WeekBar background-->
        <attr name="week_text_color" format="color" /> <!--WeekBar text color-->
        <attr name="week_text_size" format="dimension" /><!--WeekBar text size-->

        <attr name="current_day_text_color" format="color" /> <!--current day text color-->
        <attr name="current_day_lunar_text_color" format="color" /><!--current day lunar text color-->

        <attr name="calendar_height" format="string" /> <!--calendar item height-->
        <attr name="day_text_size" format="string" /> <!--calendar day text size-->
        <attr name="lunar_text_size" format="string" /> <!--calendar lunar text size-->

        <attr name="scheme_text_color" format="color" /> <!--calendar scheme text color-->
        <attr name="scheme_month_text_color" format="color" /> <!--calendar has scheme month text color-->
        <attr name="scheme_lunar_text_color" format="color" /> <!--calendar has scheme lunar text color-->

        <attr name="scheme_theme_color" format="color" /> <!-- calendar scheme background theme color-->

        <attr name="selected_theme_color" format="color" /> <!--selected calendar theme color-->
        <attr name="selected_text_color" format="color" /> <!--selected calendar text color-->
        <attr name="selected_lunar_text_color" format="color" /> <!--selected calendar lunar text color-->

        <attr name="current_month_text_color" format="color" /> <!--current month text color-->
        <attr name="other_month_text_color" format="color" /> <!--other month text color-->

        <attr name="current_month_lunar_text_color" format="color" /> <!--current month lunar text color-->
        <attr name="other_month_lunar_text_color" format="color" /> <!--other month lunar text color-->

        <!-- YearView -->
        <attr name="year_view_month_text_size" format="dimension" /> <!-- year view month text size -->
        <attr name="year_view_day_text_size" format="dimension" /> <!-- year_view_day_text_size -->
        <attr name="year_view_month_text_color" format="color" /> <!-- year_view_month_text_color -->
        <attr name="year_view_day_text_color" format="color" /> <!-- year_view_day_text_color -->
        <attr name="year_view_scheme_color" format="color" /> <!-- year_view_scheme_color -->

        <attr name="min_year" format="integer" />  <!--min_year-->
        <attr name="max_year" format="integer" />  <!--max_year-->
        <attr name="min_year_month" format="integer" /> <!--min_year_month-->
        <attr name="max_year_month" format="integer" /> <!--max_year_month-->

        <!--MonthView can scrollable-->
        <attr name="month_view_scrollable" format="boolean" />
        <!--WeekView can scrollable-->
        <attr name="week_view_scrollable" format="boolean" />
        <!--YearView can scrollable-->
        <attr name="year_view_scrollable" format="boolean" />
        
        <!--MonthView show mode-->
        <attr name="month_view_show_mode">
             <enum name="mode_all" value="0" /> <!--show pre cur next month calendar-->
             <enum name="mode_only_current" value="1" /> <!--show only current month-->
             <enum name="mode_fix" value="2" /> <!--fix current month-->
        </attr>

        <!-- WeekStar -->
        <attr name="week_start_with">
             <enum name="sun" value="1" />
             <enum name="mon" value="2" />
             <enum name="sat" value="7" />
        </attr>

        <!-- select_mode -->
        <attr name="select_mode">
              <enum name="default_mode" value="0" />
              <enum name="single_mode" value="1" />
              <enum name="range_mode" value="2" />
              <enum name="multi_mode" value="3" />
        </attr>

        <!-- when select_mode = multi_mode -->
        <attr name="max_multi_select_size" format="integer" />

        <!-- when select_mode=range_mode -->
        <attr name="min_select_range" format="integer" />
        <attr name="max_select_range" format="integer" />
        
        <!-- auto select day -->
        <attr name="month_view_auto_select_day">
              <enum name="first_day_of_month" value="0" />
              <enum name="last_select_day" value="1" />
              <enum name="last_select_day_ignore_current" value="2" />
        </attr>
</declare-styleable>

Better use with Demo when using.The calendar is very simple to customize

You can’t perform that action at this time.