GitHub 源碼地下載
https://github.com/hdev0225/CalendarView
CalendarView 日歷控件
CalendarView 使用kotlin語言開發(fā),支持單選,多選,按星期選,跨月份日期范圍選擇,樣式設置,設置不可選日期,設置只可選日期
設置不可選擇日期,設置只可選擇某些日期
運行環(huán)境
AS 版本: Android Studio Dolphin | 2021.3.1
Android Gradle Plugin Version: 7.3.0
Gradle Version: 7.5
示例
Demo
安裝
1、添加JitPack倉庫到根路徑下的build.gradle
allprojects {
repositories {
// ...
maven { url 'https://jitpack.io' }
}
}
2、添加依賴到模塊中的build.gradle
dependencies {
implementation 'com.github.hdev0225:CalendarView:v1.0.6'
}
日歷功能簡介
簡單應用
單選日歷 SingleCalendarView
多選日歷 MultiCalendarView
按星期選擇日歷 WeekCalendarView
日期范圍選擇 RangeCalendarView
設置樣式
設置不可選擇日期列表
設置只可選擇某些日期列表
簡單示例
默認情況下:開始日期為1970-1-1,結束日期為手機時間,并選中當前時間
<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" />
單選日歷
<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)
// 事件監(jiān)聽
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()
)
多選日歷
<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
按星期選擇
<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)
// 事件監(jiān)聽
calendarView.setOnDateRangeSelectedListener {
_, selecteDate, startDate, endDate ->
Toast.makeText(this@WeekActivity, "start: $startDate, end:$endDate", Toast.LENGTH_LONG).show()
}
日期范圍選擇
<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))
// 事件監(jiān)聽
calendarView.setOnDateRangeSelectedListener {
_, // 日歷控件
_, // 選中的日期
startDate: DateInfo, // 開始日期
endDate: DateInfo -> // 結束日期
Toast.makeText(this@RangeActivity, "${startDate.format()}---${endDate.format()}", Toast.LENGTH_SHORT).show()
}
設置日歷樣式
<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" />
通用屬性
header_view:頭部,包名+類型,需要繼承BaseHeaderView類,自定義頭部
day_font_size:日期字體大小,eg: 16sp
week_title_color: 星期標題顏色,類型:顏色碼或者顏色引用, eg:#ffff00或者R.color.red;
week_title_font_size:星期標題字體大小, eg: 12sp;
week_title_label:星期標題,以頓號分割,如:一、二、三、四、五、六、日。起始星期為星期一;
注?。。。涸O置了first_day_of_week,需要同時設置week_title_label
first_day_of_week:一周的第一天,1表示星期一,2表示星期二,7表示星期天;
default_color:默認文字顏色,類型:顏色碼或者顏色引用, eg:#ffff00或者R.color.red;
default_dim_color:默認文字灰色,類型:顏色碼或者顏色引用, eg:#ffff00或者R.color.red;
weekend_color:周未字體顏色,類型:顏色碼或者顏色引用, eg:#ffff00或者R.color.red;
selected_bg_color:選中背景色,類型:顏色碼或者顏色引用, eg:#ffff00或者R.color.red;
selected_day_color:選中日子顏色,類型:顏色碼或者顏色引用, eg:#ffff00或者R.color.red;
selected_day_dim_color:范圍選擇或者按星期選擇的日歷時,該日期不能選擇,但在范圍或者星期之間, eg:#ffff00或者R.color.red;
日期范圍屬性
selected_range_bg_color:選中區(qū)間背景色,開始與結束之間的日期(不包括開始和結束日期), eg:#ffff00或者R.color.red;
selected_range_day_color:選中區(qū)間字體顏色,開始與結束之間的日期(不包括開始和結束日期), eg:#ffff00或者R.color.red;
selected_start_bg_color:開始日期背景色, eg:#ffff00或者R.color.red;
selected_start_day_color:開始日期字體顏色, eg:#ffff00或者R.color.red;
selected_end_bg_color:結束日期背景色, eg:#ffff00或者R.color.red;
selected_end_day_color:結束日期字體顏色, eg:#ffff00或者R.color.red;
設置不可選擇日期
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
設置只可選擇某些日期
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方法說明
通用方法
unClickableDateList 設置不可點擊的日期列表
clickableDateList 設置只能點擊的日期列表
setDateRange 設置日期范圍,參數(shù):開始日期,結束日期,當前選中的日期
單先日歷
setSelectedDate 設置選中某一天,如:點擊按鈕后,跳轉到某一個日期
多選日歷
selectedDateList 設置選中的日期列表/獲取選中的日期列表
事件監(jiān)聽
/**
* 單選接口回調(diào)
*/
OnSingleDateSelectedListener(
view: SingleCalendarView, // 日歷控件
selectedDate: DateInfo // 選中的日期
)
/**
* 按星期選,區(qū)域選擇接口回調(diào)
*/
OnDateRangeSelectedListener(
view: BaseCalendarView, // 日歷控件
selectedDate: DateInfo, // 選中的日期
startDate: DateInfo, // 開始日期
endDate: DateInfo // 結束日期
)
/**
* 多選
*/
OnMultiDateSelectedListener(
view: MultiCalendarView, // 日歷控件
clickedDate: DateInfo, // 當前當點的日期,選中或者取消選中
dateList: List<DateInfo>, // 日期列表
)
DateInfo類說明
提供將dateInfo轉calendar
將calendar轉成dateInfo
將dateInfo轉毫秒
BaseHeaderView說明
自定義頭部,需要繼承BaseHeaderView,更新標題,顯示或者隱藏上下面,然后在xml布局文件中設置header_view,如下文章來源:http://www.zghlxwxcb.cn/news/detail-705930.html
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 接口說明
日期范圍選擇RangeCalendarView,如果自定義headerView實現(xiàn)該接口,可更新headerView日期范圍,可參考DefaultRangeHeaderView類文章來源地址http://www.zghlxwxcb.cn/news/detail-705930.html
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)
}
}
到了這里,關于Android Kotlin Java 自定義日歷控件 CalendarView ,支持單選,多選,按星期選,跨月份日期范圍選擇,樣式設置,設置不可選日期,設置只可選日期的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!