日历

一个用于compose-desktop的日历组件。

截图

image
image
image
image

feature

  • DayPicker的动画
  • 月份选择器错误提示
  • 点击非本月的时间会跳到上个月

todo

  • 年月份的滚动选择

使用

日历选择器目前有分为两部分：DayPicker 和 MonthPicker

CalendarState

保存日历显示时间和选择的时间。

DayPicker

fun DayPicker(
    modifier: Modifier = Modifier,
    state: CalendarState,
    fromSunday: Boolean = true, // 每周是否从周日开始
    contentColor: Color,
    primaryColor: Color,
    hoverColor: Color,
    content: @Composable DayPickerScope.() -> Unit
)

DayPickerScope

可以在content中获取下面的信息

interface DayPickerScope {
    val isSelected: Boolean
    val isHover: Boolean
    val date: LocalDate
}

例子

DayPicker(
            state = state,
            contentColor = Color.Black,
            primaryColor = Color(0xFFFEA52C),
            hoverColor = Color(0xFFE3E3E3),
        ){
            Text(
                text = "${date.dayOfMonth}", style = androidx.compose.ui.text.TextStyle(
                    fontWeight = FontWeight(600),
                    fontSize = 18.sp,
                ),
                modifier = Modifier.height(30.dp)
            )
            Text(text = "${date.month}")
        }

MonthPicker

fun MonthPicker(
    modifier: Modifier = Modifier,
    state: CalendarState,
    contentColor: Color,
    primaryColor: Color,
    hoverColor: Color,
    errorColor: Color,
)

使用这个例子

    val state:CalendarState = rememberCalendarState()

    Column {
        MonthPicker(
            state = state,
            contentColor = Color.Black,
            primaryColor = Color(0xFFFEA52C),
            hoverColor = Color(0xFFE3E3E3),
            errorColor = Color(0xFFFF6175),
        )
        DayPicker(
            state = state,
            contentColor = Color.Black,
            primaryColor = Color(0xFFFEA52C),
            hoverColor = Color(0xFFE3E3E3),
        ){
            Text(
                text = "${date.dayOfMonth}", style = androidx.compose.ui.text.TextStyle(
                    fontWeight = FontWeight(600),
                    fontSize = 18.sp,
                ),
                modifier = Modifier.height(30.dp)
            )
            Text(text = "${date.month}")
        }
    }

GitHub

View Github