Home

Getting started

Add the JitPack repository to your project-level build.gradle file and the dependency to the app-level build.gradle file.

// build.gradle (project-level)
allprojects {
 repositories {
  // ...
  maven { url 'https://jitpack.io' }
 }
}

// build.gradle (app-level)
implementation 'com.github.thellmund:Android-Week-View:3.4.2'

Usage

First, become familiar with the WeekView nomenclature.

You need to add a WeekView in your XML layout file. You can find a list of all available attributes under Attributes.

<com.alamkanak.weekview.WeekView
    android:id="@+id/weekView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultEventColor="@color/primaryColor"
    app:eventTextColor="@color/white"
    app:timeColumnTextSize="12sp"
    app:hourHeight="60dp"
    app:timeColumnPadding="8dp"
    app:timeColumnTextColor="@color/light_blue"
    app:timeColumnBackgroundColor="@color/white"
    app:headerRowPadding="12dp"
    app:columnGap="8dp"
    app:numberOfVisibleDays="3"
    app:headerRowBackgroundColor="@color/light_gray"
    app:dayBackgroundColor="@color/white"
    app:todayBackgroundColor="@color/light_blue"/>

Next, you need to prepare the class of objects that you want to display in WeekView. Imagine you’re fetching a list of Events from a database. This class needs to implement WeekViewDisplayable, which describes elements that can be displayed in WeekView. For WeekView to work correctly, you need to pass the original class to WeekViewDisplayable as the generic class. The final result will look like this:

class Event(
        val id: Long,
        val title: String,
        val startTime: Calendar,
        val endTime: Calendar,
        val location: String,
        val color: Int,
        val isAllDay: Boolean,
        val isCanceled: Boolean
) : WeekViewDisplayable<Event> {

    override fun toWeekViewEvent(): WeekViewEvent<Event> {
        val style = WeekViewEvent.Style.Builder()
                .setBackgroundColor(color)
                .setTextStrikeThrough(isCanceled)
                .build()

        return WeekViewEvent.Builder<Event>()
                .setId(id)
                .setTitle(title)
                .setStartTime(startTime)
                .setEndTime(endTime)
                .setLocation(location)
                .setAllDay(isAllDay)
                .setStyle(style)
                .setData(this) // This is necessary for onEventClick(data) to work
                .build()
    }

}

Lastly, you can attach various listeners to a WeekView. The example code below highlights the most common ones. For a full list of available listeners, check out Listeners.

val weekView = findViewById<WeekView>(R.id.weekView)
weekView.setOnEventClickListener { calendarItem, eventRect ->
    // ...
}

// WeekView has infinite horizontal scrolling. Therefore, you need to provide the events 
// of a month whenever that the currently displayed month changes.
weekView.setMonthChangeListener { startDate, endDate ->
    database.getCalendarItemsInRange(startDate, endDate)
}