Android Week View is an android library to display calendars (week view or day view) within the app. It supports custom styling.
Features
- Week view calendar
- Day view calendar
- Custom styling
- Horizontal and vertical scrolling
- Infinite horizontal scrolling
- Live preview of custom styling in xml preview window
Step 1: Grab it
Import the library into your project.
-
Grab via maven
<dependency> <groupId>com.github.alamkanak</groupId> <artifactId>android-week-view</artifactId> <version>1.2.6</version> <type>aar</type> </dependency>
Grab via gradle
implementation 'com.github.alamkanak:android-week-view:1.2.6'Step 2: Add to Layout
Then Add WeekView in your xml layout.
```xml
<com.alamkanak.weekview.WeekView
android:id="@+id/weekView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:eventTextColor="@android:color/white"
app:textSize="12sp"
app:hourHeight="60dp"
app:headerColumnPadding="8dp"
app:headerColumnTextColor="#8f000000"
app:headerRowPadding="12dp"
app:columnGap="8dp"
app:noOfVisibleDays="3"
app:headerRowBackgroundColor="#ffefefef"
app:dayBackgroundColor="#05000000"
app:todayBackgroundColor="#1848adff"
app:headerColumnBackground="#ffffffff"/>
```<h3>Step 3: Use in code</h3>
<p>Write the following code in your java file.</p>
<pre><code>!!x60;!_!x60;!_!_x60;java
// Get a reference for the week view in the layout.
mWeekView = (WeekView) findViewById(R.id.weekView);
// Set an action when any event is clicked.
mWeekView.setOnEventClickListener(mEventClickListener);
// The week view has infinite scrolling horizontally. We have to provide the events of a
// month every time the month changes on the week view.
mWeekView.setMonthChangeListener(mMonthChangeListener);
// Set long press listener for events.
mWeekView.setEventLongPressListener(mEventLongPressListener);
<ol start="4">
<li>
Implement <code>WeekView.MonthChangeListener</code>, <code>WeekView.EventClickListener</code>, <code>WeekView.EventLongPressListener</code> according to your need.
</li>
<li>
Provide the events for the <code>WeekView</code> in <code>WeekView.MonthChangeListener.onMonthChange()</code> callback. Please remember that the calendar pre-loads events of three consecutive months to enable lag-free scrolling.
<pre><code class="language-java">MonthLoader.MonthChangeListener mMonthChangeListener = new MonthLoader.MonthChangeListener() {
@Override
public List<WeekViewEvent> onMonthChange(int newYear, int newMonth) {
// Populate the week view with some events.
List<WeekViewEvent> events = getEvents(newYear, newMonth);
return events;
}
};</code></pre>
</li>
</ol>
<h3>Customization</h3>
You can customize the look of the <code>WeekView</code> in xml. Use the following attributes in xml. All these attributes also have getters and setters to enable you to change the style dynamically.
<ul>
<li><code>allDayEventHeight</code></li>
<li><code>columnGap</code></li>
<li><code>dayBackgroundColor</code></li>
<li><code>dayNameLength</code></li>
<li><code>eventMarginVertical</code></li>
<li><code>eventPadding</code></li>
<li><code>eventTextColor</code></li>
<li><code>eventTextSize</code></li>
<li><code>firstDayOfWeek</code></li>
<li><code>headerColumnBackground</code></li>
<li><code>headerColumnPadding</code></li>
<li><code>headerColumnTextColor</code></li>
<li><code>headerRowBackgroundColor</code></li>
<li><code>headerRowPadding</code></li>
<li><code>hourHeight</code></li>
<li><code>hourSeparatorColor</code></li>
<li><code>hourSeparatorHeight</code></li>
<li><code>noOfVisibleDays</code></li>
<li><code>overlappingEventGap</code></li>
<li><code>textSize</code></li>
<li><code>todayBackgroundColor</code></li>
<li><code>todayHeaderTextColor</code></li>
<li><code>showDistinctPastFutureColor</code></li>
<li><code>futureBackgroundColor</code></li>
<li><code>pastBackgroundColor</code></li>
<li><code>showDistinctWeekendColor</code></li>
<li><code>futureWeekendBackgroundColor</code></li>
<li><code>pastWeekendBackgroundColor</code></li>
<li><code>showNowLine</code></li>
<li><code>nowLineColor</code></li>
<li><code>nowLineThickness</code></li>
<li><code>scrollDuration</code></li>
</ul>
<h3>Interfaces</h3>
Use the following interfaces according to your need.
<ul>
<li><code>mWeekView.setWeekViewLoader()</code> to provide events to the calendar</li>
<li><code>mWeekView.setMonthChangeListener()</code> to provide events to the calendar by months</li>
<li><code>mWeekView.setOnEventClickListener()</code> to get a callback when an event is clicked</li>
<li><code>mWeekView.setEventLongPressListener()</code> to get a callback when an event is long pressed</li>
<li><code>mWeekView.setEmptyViewClickListener()</code> to get a callback when any empty space is clicked</li>
<li><code>mWeekView.setEmptyViewLongPressListener()</code> to get a callback when any empty space is long pressed</li>
<li><code>mWeekView.setDateTimeInterpreter()</code> to set your own labels for the calendar header row and header column</li>
<li><code>mWeekView.setScrollListener()</code> to get an event every time the first visible day has changed</li>
</ul>
<h3>Full Example</h3>
<pre><code class="language-xml"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BaseActivity"
android:background="#fff">
<com.alamkanak.weekview.WeekView
android:id="@+id/weekView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:eventTextColor="@android:color/white"
app:textSize="12sp"
app:hourHeight="60dp"
app:headerColumnPadding="8dp"
app:headerColumnTextColor="@color/toolbar_text"
app:headerRowPadding="12dp"
app:columnGap="8dp"
app:noOfVisibleDays="3"
app:headerRowBackgroundColor="@color/toolbar"
app:dayBackgroundColor="#05000000"
app:todayBackgroundColor="#1848adff"
app:headerColumnBackground="#ffffffff"
app:todayHeaderTextColor="@color/accent" />
</RelativeLayout>
</code></pre>
<strong>BasicActivity.java</strong>
A basic example of how to use week view library.
<pre><code class="language-java">package com.alamkanak.weekview.sample;
import com.alamkanak.weekview.WeekViewEvent;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;
public class BasicActivity extends BaseActivity {
@Override
public List<? extends WeekViewEvent> onMonthChange(int newYear, int newMonth) {
// Populate the week view with some events.
List<WeekViewEvent> events = new ArrayList<WeekViewEvent>();
Calendar startTime = Calendar.getInstance();
startTime.set(Calendar.HOUR_OF_DAY, 3);
startTime.set(Calendar.MINUTE, 0);
startTime.set(Calendar.MONTH, newMonth - 1);
startTime.set(Calendar.YEAR, newYear);
Calendar endTime = (Calendar) startTime.clone();
endTime.add(Calendar.HOUR, 1);
endTime.set(Calendar.MONTH, newMonth - 1);
WeekViewEvent event = new WeekViewEvent(1, getEventTitle(startTime), startTime, endTime);
event.setColor(getResources().getColor(R.color.event_color_01));
events.add(event);
startTime = Calendar.getInstance();
startTime.set(Calendar.HOUR_OF_DAY, 3);
startTime.set(Calendar.MINUTE, 30);
startTime.set(Calendar.MONTH, newMonth-1);
startTime.set(Calendar.YEAR, newYear);
endTime = (Calendar) startTime.clone();
endTime.set(Calendar.HOUR_OF_DAY, 4);
endTime.set(Calendar.MINUTE, 30);
endTime.set(Calendar.MONTH, newMonth-1);
event = new WeekViewEvent(10, getEventTitle(startTime), startTime, endTime);
event.setColor(getResources().getColor(R.color.event_color_02));
events.add(event);
startTime = Calendar.getInstance();
startTime.set(Calendar.HOUR_OF_DAY, 4);
startTime.set(Calendar.MINUTE, 20);
startTime.set(Calendar.MONTH, newMonth-1);
startTime.set(Calendar.YEAR, newYear);
endTime = (Calendar) startTime.clone();
endTime.set(Calendar.HOUR_OF_DAY, 5);
endTime.set(Calendar.MINUTE, 0);
event = new WeekViewEvent(10, getEventTitle(startTime), startTime, endTime);
event.setColor(getResources().getColor(R.color.event_color_03));
events.add(event);
startTime = Calendar.getInstance();
startTime.set(Calendar.HOUR_OF_DAY, 5);
startTime.set(Calendar.MINUTE, 30);
startTime.set(Calendar.MONTH, newMonth-1);
startTime.set(Calendar.YEAR, newYear);
endTime = (Calendar) startTime.clone();
endTime.add(Calendar.HOUR_OF_DAY, 2);
endTime.set(Calendar.MONTH, newMonth-1);
event = new WeekViewEvent(2, getEventTitle(startTime), startTime, endTime);
event.setColor(getResources().getColor(R.color.event_color_02));
events.add(event);
startTime = Calendar.getInstance();
startTime.set(Calendar.HOUR_OF_DAY, 5);
startTime.set(Calendar.MINUTE, 0);
startTime.set(Calendar.MONTH, newMonth - 1);
startTime.set(Calendar.YEAR, newYear);
startTime.add(Calendar.DATE, 1);
endTime = (Calendar) startTime.clone();
endTime.add(Calendar.HOUR_OF_DAY, 3);
endTime.set(Calendar.MONTH, newMonth - 1);
event = new WeekViewEvent(3, getEventTitle(startTime), startTime, endTime);
event.setColor(getResources().getColor(R.color.event_color_03));
events.add(event);
startTime = Calendar.getInstance();
startTime.set(Calendar.DAY_OF_MONTH, 15);
startTime.set(Calendar.HOUR_OF_DAY, 3);
startTime.set(Calendar.MINUTE, 0);
startTime.set(Calendar.MONTH, newMonth-1);
startTime.set(Calendar.YEAR, newYear);
endTime = (Calendar) startTime.clone();
endTime.add(Calendar.HOUR_OF_DAY, 3);
event = new WeekViewEvent(4, getEventTitle(startTime), startTime, endTime);
event.setColor(getResources().getColor(R.color.event_color_04));
events.add(event);
startTime = Calendar.getInstance();
startTime.set(Calendar.DAY_OF_MONTH, 1);
startTime.set(Calendar.HOUR_OF_DAY, 3);
startTime.set(Calendar.MINUTE, 0);
startTime.set(Calendar.MONTH, newMonth-1);
startTime.set(Calendar.YEAR, newYear);
endTime = (Calendar) startTime.clone();
endTime.add(Calendar.HOUR_OF_DAY, 3);
event = new WeekViewEvent(5, getEventTitle(startTime), startTime, endTime);
event.setColor(getResources().getColor(R.color.event_color_01));
events.add(event);
startTime = Calendar.getInstance();
startTime.set(Calendar.DAY_OF_MONTH, startTime.getActualMaximum(Calendar.DAY_OF_MONTH));
startTime.set(Calendar.HOUR_OF_DAY, 15);
startTime.set(Calendar.MINUTE, 0);
startTime.set(Calendar.MONTH, newMonth-1);
startTime.set(Calendar.YEAR, newYear);
endTime = (Calendar) startTime.clone();
endTime.add(Calendar.HOUR_OF_DAY, 3);
event = new WeekViewEvent(5, getEventTitle(startTime), startTime, endTime);
event.setColor(getResources().getColor(R.color.event_color_02));
events.add(event);
//AllDay event
startTime = Calendar.getInstance();
startTime.set(Calendar.HOUR_OF_DAY, 0);
startTime.set(Calendar.MINUTE, 0);
startTime.set(Calendar.MONTH, newMonth-1);
startTime.set(Calendar.YEAR, newYear);
endTime = (Calendar) startTime.clone();
endTime.add(Calendar.HOUR_OF_DAY, 23);
event = new WeekViewEvent(7, getEventTitle(startTime),null, startTime, endTime, true);
event.setColor(getResources().getColor(R.color.event_color_04));
events.add(event);
events.add(event);
startTime = Calendar.getInstance();
startTime.set(Calendar.DAY_OF_MONTH, 8);
startTime.set(Calendar.HOUR_OF_DAY, 2);
startTime.set(Calendar.MINUTE, 0);
startTime.set(Calendar.MONTH, newMonth-1);
startTime.set(Calendar.YEAR, newYear);
endTime = (Calendar) startTime.clone();
endTime.set(Calendar.DAY_OF_MONTH, 10);
endTime.set(Calendar.HOUR_OF_DAY, 23);
event = new WeekViewEvent(8, getEventTitle(startTime),null, startTime, endTime, true);
event.setColor(getResources().getColor(R.color.event_color_03));
events.add(event);
// All day event until 00:00 next day
startTime = Calendar.getInstance();
startTime.set(Calendar.DAY_OF_MONTH, 10);
startTime.set(Calendar.HOUR_OF_DAY, 0);
startTime.set(Calendar.MINUTE, 0);
startTime.set(Calendar.SECOND, 0);
startTime.set(Calendar.MILLISECOND, 0);
startTime.set(Calendar.MONTH, newMonth-1);
startTime.set(Calendar.YEAR, newYear);
endTime = (Calendar) startTime.clone();
endTime.set(Calendar.DAY_OF_MONTH, 11);
event = new WeekViewEvent(8, getEventTitle(startTime), null, startTime, endTime, true);
event.setColor(getResources().getColor(R.color.event_color_01));
events.add(event);
return events;
}
}
</code></pre>
There is full code <a href="https://github.com/alamkanak/Android-Week-View/tree/master/sample">here</a> to get you started.
<h3>Reference</h3>
<blockquote>
Read more <a href="https://github.com/alamkanak/Android-Week-View/">here</a>.
Download code <a href="https://github.com/alamkanak/Android-Week-View/archive/refs/heads/develop.zip">here</a>.
Follow code author <a href="https://github.com/alamkanak/">here</a>.
</blockquote>