Android Kotlin Java custom calendar control CalendarView, supports single selection, multiple selection, selection by week, cross-month date range selection, style setting, setting non-selectable dates, setting only selectable dates

GitHub source code download

https://github.com/hdev0225/CalendarView

CalendarView calendar control

CalendarView is developed using kotlin language and supports single selection, multiple selection, selection by week, cross-month date range selection, style setting, setting non-selectable dates, and setting only selectable dates.

Settings cannot select dates, settings can only select certain dates

Operating environment

AS version: Android Studio Dolphin | 2021.3.1

Android Gradle Plugin Version: 7.3.0

Gradle Version: 7.5

Example

Demo

Install

1. Add the JitPack repository to build.gradle in the root path

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

2. Add dependencies to build.gradle in the module

dependencies {
    
    
    implementation 'com.github.hdev0225:CalendarView:v1.0.6'
}

Introduction to calendar function

Simple application

Single Calendar SingleCalendarView

Multi-select calendar MultiCalendarView

Select calendar by week WeekCalendarView

Date range selection RangeCalendarView

Set style

Set a list of non-selectable dates

Set up a list where only certain dates can be selected

Simple example

By default: the start date is 1970-1-1, the end date is the mobile phone time, and the current time is selected

<com.hdev.calendar.view.SingleCalendarView
    android:id="@+id/calendar_view"
    android:layout_width="match_parent"
    android:layout_height="400dp"
    android:layout_margin="15dp"
    android:background="@drawable/bg" />

radio calendar

<com.hdev.calendar.view.SingleCalendarView
    android:id="@+id/calendar_view"
    android:layout_width="match_parent"
    android:layout_height="400dp"
    android:layout_margin="15dp"
    android:background="@drawable/bg" />

val calendarView: SingleCalendarView = findViewById(R.id.calendar_view)
// 事件监听        
calendarView.setOnSingleDateSelectedListener {
    
    
_, dateInfo ->
Toast.makeText(this@SingleActivity, dateInfo.toString(), Toast.LENGTH_LONG).show()}
// 开始日期        
var startDate = DateInfo(2023, 1, 15)
// 结束日期        
val endDate = DateInfo(2023, 4, 15)
// 选中2023-1-1
val selectedDate = DateInfo(2023, 1, 1)
// 初始化，设置日期范围
calendarView.setDateRange(
    startDate.timeInMillis(),
    endDate.timeInMillis(),
    selectedDate.timeInMillis()
)

Multiple selection calendar

<com.hdev.calendar.view.MultiCalendarView
    android:id="@+id/calendar_view"
    android:layout_width="wrap_content"
    android:layout_height="400dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@drawable/bg" />

val dateList = mutableListOf<DateInfo>()
dateList.add(DateInfo(2023, 5, 3))
dateList.add(DateInfo(2023, 5, 8))
dateList.add(DateInfo(2023, 5, 5))

val calendarView: MultiCalendarView = findViewById(R.id.calendar_view)
calendarView.setOnMultiDateSelectedListener {
    
    
_, clickedDate, dateList ->
}
// 设置选中日期列表
calendarView.selectedDateList = dateList

Select by week

<com.hdev.calendar.view.WeekCalendarView
    android:id="@+id/calendar_view"
    android:layout_width="match_parent"
    android:layout_height="420dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp" />

// 开始日期
val startDate = DateInfo(2021, 12, 30)
// 结束日期        
val endDate = DateInfo(2023, 4, 15)
// 设置某一天，该星期会选中
val selectedDate = DateInfo(2022, 1, 1)

val calendarView: WeekCalendarView = findViewById(R.id.calendar_view)
// 事件监听        
calendarView.setOnDateRangeSelectedListener {
    
    
_, selecteDate, startDate, endDate ->
Toast.makeText(this@WeekActivity, "start: $startDate, end:$endDate", Toast.LENGTH_LONG).show()
}

Date range selection

 <com.hdev.calendar.view.RangeCalendarView
       android:id="@+id/calendar_view"
       android:layout_width="match_parent"
       android:layout_height="400dp"
       android:layout_marginLeft="10dp"
       android:layout_marginRight="10dp"
       android:background="#ffffff"
       app:header_view="com.hdev.calendar.view.DefaultRangeHeaderView"
       app:selected_bg_color="#0078D7"
       app:selected_end_bg_color="#ff0000"
       app:selected_end_day_color="#ffffff"
       app:selected_range_bg_color="#88ff0000"
       app:selected_range_day_color="#ffffff"
       app:selected_start_bg_color="#ff0000"
       app:selected_start_day_color="#ffffff" />

val calendarView: RangeCalendarView = findViewById(R.id.calendar_view)
// 设置日期范围        
calendarView.setSelectedDateRange(DateInfo(2023, 2, 21), DateInfo(2023, 5, 13))
// 事件监听
calendarView.setOnDateRangeSelectedListener {
    
    
_, // 日历控件
_, // 选中的日期
startDate: DateInfo, // 开始日期
endDate: DateInfo -> // 结束日期
Toast.makeText(this@RangeActivity, "${startDate.format()}---${endDate.format()}", Toast.LENGTH_SHORT).show()
}

Set calendar style

<com.hdev.calendar.view.SingleCalendarView
    android:id="@+id/calendar_view"
    android:layout_width="350dp"
    android:layout_height="335dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@drawable/bg"
    app:day_font_size="16sp"
    app:default_color="#000000"
    app:default_dim_color="#AAAAAA"
    app:header_view="com.calendar.app.view.CustomHeaderView"
    app:selected_bg_color="#0078D7"
    app:selected_day_color="#EFEFEF"
    app:week_title_color="#ff0000"
    app:week_title_font_size="12sp"
    app:week_title_label="M、T、W、T、F、S、S"
    app:weekend_color="#F96A31" />

Common properties

header_view: header, package name + type, you need to inherit the BaseHeaderView class and customize the header

day_font_size: Date font size, eg: 16sp

week_title_color: week title color, type: color code or color reference, eg: #ffff00 or R.color.red;

week_title_font_size: Week title font size, eg: 12sp;

week_title_label: Week title, separated by commas, such as: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Day. The starting week is Monday;

Note! ! ! : first_day_of_week is set, week_title_label needs to be set at the same time

first_day_of_week: the first day of the week, 1 means Monday, 2 means Tuesday, 7 means Sunday;

default_color: default text color, type: color code or color reference, eg: #ffff00 or R.color.red;

default_dim_color: The default text is gray, type: color code or color reference, eg: #ffff00 or R.color.red;

weekend_color: weekend font color, type: color code or color reference, eg: #ffff00 or R.color.red;

selected_bg_color: selected background color, type: color code or color reference, eg: #ffff00 or R.color.red;

selected_day_color: selected day color, type: color code or color reference, eg: #ffff00 or R.color.red;

selected_day_dim_color: When selecting a range or calendar by week, the date cannot be selected, but it is between the range or the week, eg: #ffff00 or R.color.red;

date range attribute

selected_range_bg_color: selected range background color, date between start and end (excluding start and end dates), eg: #ffff00 or R.color.red;

selected_range_day_color: font color of the selected range, date between start and end (excluding start and end dates), eg: #ffff00 or R.color.red;

selected_start_bg_color: start date background color, eg: #ffff00 or R.color.red;

selected_start_day_color: start date font color, eg: #ffff00 or R.color.red;

selected_end_bg_color: End date background color, eg: #ffff00 or R.color.red;

selected_end_day_color: End date font color, eg: #ffff00 or R.color.red;

Set unselectable dates

val dateList = mutableListOf<DateInfo>()
dateList.add(DateInfo(2023, 4, 8))
dateList.add(DateInfo(2023, 4, 11))
dateList.add(DateInfo(2023, 3, 31))
val calendarView: WeekCalendarView = findViewById(R.id.calendar_view)
// setup un-clickable date
calendarView.unClickableDateList = dateList

Set up to select only certain dates

val dateList = mutableListOf<DateInfo>()
dateList.add(DateInfo(2023, 4, 8))
dateList.add(DateInfo(2023, 4, 11))
dateList.add(DateInfo(2023, 3, 31))
val calendarView: WeekCalendarView = findViewById(R.id.calendar_view)
calendarView.clickableDateList = dateList

CalendarView method description

Common method

unClickableDateList sets a non-clickable date list

clickableDateList sets a clickable date list

setDateRange sets the date range, parameters: start date, end date, currently selected date

Single first calendar

setSelectedDate sets a selected day, such as: after clicking the button, jump to a certain date

Multiple selection calendar

selectedDateList sets the selected date list/gets the selected date list

event listening

/**
 * 单选接口回调
 */
OnSingleDateSelectedListener(
     view: SingleCalendarView, // 日历控件
     selectedDate: DateInfo // 选中的日期
)

/**
 * 按星期选，区域选择接口回调
 */
 OnDateRangeSelectedListener(
     view: BaseCalendarView, // 日历控件
     selectedDate: DateInfo, // 选中的日期
     startDate: DateInfo, // 开始日期
     endDate: DateInfo // 结束日期
)

/**
 * 多选
 */
OnMultiDateSelectedListener(
    view: MultiCalendarView, // 日历控件
    clickedDate: DateInfo, // 当前当点的日期，选中或者取消选中
    dateList: List<DateInfo>, // 日期列表
) 

DateInfo class description

Provides the ability to convert dateInfo to calendar

Convert calendar to dateInfo

Convert dateInfo to milliseconds

BaseHeaderView description

To customize the header, you need to inherit BaseHeaderView, update the title, show or hide the top and bottom, and then set header_view in the xml layout file, as follows

app:header_view="com.calendar.app.view.CustomHeaderView"

/**
 * 获取布局id，如：R.layout.default_header_view
 */
protected abstract fun getLayoutId(): Int

/**
 * 更新标题
 */
open fun updateTitle(year: Int, month: Int) {
    
    }

/**
 * 处理上、下按钮
 * @param hasPrev 是否有上一页
 * @param hasNext 是否有下一页
 */
open fun handlePrevNext(hasPrev: Boolean, hasNext: Boolean) {
    
    }

IDateRange interface description

Select RangeCalendarView for the date range. If the custom headerView implements this interface, the date range of the headerView can be updated. Please refer to the DefaultRangeHeaderView class.

class DefaultRangeHeaderView(
        context: Context
) : DefaultHeaderView(context), IDateRange {
    
    

	private lateinit var dateRangeLabel: TextView

	override fun dateRange(startDate: DateInfo?, endDate: DateInfo?) {
    
    
        if (startDate == null && endDate == null) {
    
    
        	dateRangeLabel.text = ""
        } else if (startDate != null && endDate != null) {
    
    
        	dateRangeLabel.text = "${startDate.format()} -- ${endDate.format()}"
        } else if (startDate != null) {
    
    
        	dateRangeLabel.text = startDate.format()
        }
    }

    override fun getLayoutId(): Int {
    
    
        return R.layout.default_range_header_view
    }

    override fun init() {
    
    
		super.init()
        dateRangeLabel = findViewById(R.id.date_range_label)
   }
}