Best android open-source packages and libraries.

Calendar date range picker

Open source android library for date range selection
Updated 2 months ago

Calendar Date Range Picker

I made this calendar picker for work and thought it'd make an excellent standalone view, this is also my first published library so if you feel like it, please leave any feedback/issues, or submit a PR if you add something cool! There's definitely some things I want to add in the future and plan on updating this a bit. Thanks for checking it out!

UI by Sabrina Hong

Be sure to check the wiki before contributing and let me know if you have any questions!

Usage

Installation

Add the jitpack repository to your root build.gradle

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

Then add the dependency to your app build.gradle

dependencies {
  implementation 'com.github.JoshHalvorson:calendar-date-range-picker:current-version'
}

Code

Currently you can add the view through xml like so

<dev.joshhalvorson.calendar_date_range_picker.calendar.CalendarPicker
  android:id="@+id/calendarPicker"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
/>

and everything should be good to go.

Then in your view code you can get the selected dates by calling calendar.getSelectedDates()

binding.getDateRangeButton.setOnClickListener {
  val selectedDates = binding.calendarPicker.getSelectedDates()

  if (selectedDates != null) {
    val firstDate = DateFormat.getDateInstance().format(Date(selectedDates.first))
    val secondDate = DateFormat.getDateInstance().format(Date(selectedDates.second))
    ...
  }
}

This will return a Pair<Long, Long> with the two dates in millis for you to convert however you like.

You can also adjust the attributes through code, just make sure you call calendar.initCalendar() to apply your changes to the view!

binding.calendarPicker.eventDotColor = Color.CYAN
binding.calendarPicker.dayTextColor = Color.RED
...
binding.calendarPicker.initCalendar() // REFRESHES CALENDAR AFTER CHANGING ATTRIBUTES

You can use calendar.addEvents(vararg events: CalendarEvent) or calendar.addEvents(events: List<CalendarEvent>) if you need to mark important dates or show an event on specific dates (thanks @Xpjay 👍).

binding.calendarPicker.addEvents(
  CalendarEvent(
    eventName = "event  1",
    eventDescription = "event 1 desc",
    date = Calendar.getInstance().time
  ),
  CalendarEvent(
    eventName = "event  2",
    eventDescription = "event 2 desc",
    date = Calendar.Builder().setDate(2021, 8, 19).build().time
  ),
  CalendarEvent(
    eventName = "event  3",
    eventDescription = "event 3 desc",
    date = Calendar.Builder().setDate(2021, 8, 1).build().time
  ),
  CalendarEvent(
    eventName = "event  4",
    eventDescription = "event 4 desc",
    date = Calendar.Builder().setDate(2021, 11, 10).build().time
  ),
  CalendarEvent(
    eventName = "event  5",
    eventDescription = "event 5 desc",
    date = Calendar.Builder().setDate(2021, 0, 29).build().time
  ),
)

If you need to select dates programmatically the two functions calendar.setFirstSelectedDate(year: Int, month: Int, day: Int) and calendar.setSecondSelectedDate(year: Int, month: Int, day: Int) can do that for you.

binding.calendarPicker.setFirstSelectedDate(year = 2021, month = 8, day = 9)
binding.calendarPicker.setSecondSelectedDate(year = 2021, month = 8, day = 19)

binding.calendarPicker.initCalendar() // REFRESHES CALENDAR AFTER SELECTING DATES

The sample directory has some activity code and the xml for creating and using the calendar.

Attributes

Most of the attributes for the calendar are for changing the colors, almost every element's color can be changed, as well as a couple drawables. I wanted this to be pretty customizable while still having a fairly material feel to it. Here are all the attributes you can change:

<dev.joshhalvorson.calendar_date_range_picker.calendar.CalendarPicker
    android:id="@+id/calendarPicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:dayTextColor="@color/..."
    app:yearTextColor="@color/..."
    app:firstSelectedDateTextColor="@color/..."
    app:secondSelectedDateTextColor="@color/..."
    app:selectedDateCircleColor="@color/..."
    app:highlightedDatesBackgroundColor="@color/..."
    app:highlightedDatesTextColor="@color/..."
    app:titleColor="@color/..."
    app:nextMonthButtonColor="@color/..."
    app:previousMonthButtonColor="@color/..."
    app:yearSelectButtonColor="@color/..."
    app:yearSelectButtonIconColor="@color/..."
    app:yearSelectButtonTextColor="@color/..."
    app:dateRangeTextColor="@color/..."
    app:daysOfWeekTextColor="@color/..."
    app:eventDotColor="@color/..." 
    app:eventDotColorWhenHighlighted="@color/..."
    app:eventDotColorWhenSelected="@color/..."
    app:nextMonthButtonIcon="@drawable/..."
    app:previousMonthButtonIcon="@drawable/..."
    app:eventDotGravity="end" />

Images

Day mode
Night mode