JonasWanke / com.jonaswanke.calendar

📅 Material Design CalendarView for Android

❌❌❌ No longer supported ❌❌❌

Unfortunately, I no longer have the time to continue developing this library and my focus has shifted. If you are switching to Flutter, you might be interested in my timetable package as a replacement.

CalendarView

This library provides a Material Design CalendarView for Android (week and day view; more coming soon!). The default style is copied from the Google Calendar app, but almost everything is customizable.

Screenshot of the example app	Day view	Add event by tapping empty space

• CalendarView
  • Features
  • Usage
  • Sample
  • Customization
  • Changelog

Features

• Week and Day views
• Scroll and zoom
• All-day events (and events > 24h) shown at the top
• All colors and most spacings are customizable

Usage

1. Add the library to your gradle script

implementation 'com.jonaswanke.calendar:calendar:0.1.1'

2. Add CalendarView in you layout

<com.jonaswanke.calendar.CalendarView
    android:id="@+id/calendar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:range="week" />

Currently supported ranges are week and day. More coming soon!

3. Provide events to the view

calendar.eventRequestCallback = { week ->
    // Retrieve events synchronously or asynchronously
    val events: List<Event> = // ...
    calendar.setEventsForWeek(week, events)
}

CalendarView currently caches two views for either side of the current view (e.g. two weeks to the left and two to the right) for smooth swiping. When a new view is loaded, eventRequestCallback will be called with the new week.
You should then supply events starting in that week by calling calendar.setEventsForWeek() (multi-day and multi-week events are always stored where they begin and will then be distributed to where they are required).

You can call calendar.setEventsForWeek() anytime you want. The events will be cached and used when required. Old events starting in that week are overridden.

Events implement the following properties:

val title: String // Displayed in bold
val description: String? // Optional; shown in a second line
@get:ColorInt
val color: Int? // Optional background color
val start: Long // Start time
val end: Long // End time
val allDay: Boolean // Whether the event takes all day. If so, start and end are just used to determine the day

4. Add your listeners (optional)

calendar.onEventClickListener = { event ->
    // Event was clicked
    Toast.makeText(this, "${event.title} clicked", Toast.LENGTH_LONG).show()
}
calendar.onEventLongClickListener = { event ->
    // Event was long clicked
    Toast.makeText(this, "${event.title} long clicked", Toast.LENGTH_LONG).show()
}

As shown in screenshot 3 (above), the user can add events by tapping empty space inside CalendarView. This only works when an onAddEventListener is set.

calendar.onAddEventListener = { addEvent ->
    // User tried to create a new event. addEvent is an event with populated start and end.
    Toast.makeText(this, "Add event at ${start}", Toast.LENGTH_SHORT).show()
    // Return true to remove the placeholder
    true
}

Sample

There is also a sample app to get you started.

Customization

Following soon...

Changelog

See here for the changelog.