How to Create Custom Calendar in Android

OutPut

How to Create Custom Calendar in Android

Android  does not provide any calender view ,so its a very big draw back for developer but we can create our own custom calender using grid-view. This article is all about creating custom calender in Android.

Let’s get start by creating a project in Android ADT.

1. Create a new project by going to File ⇒ New Android Application. Fill all the details  As Application Name:AndroidCalender ,Project Name:AndroidCalender,Package Name:com.example.adroidcalender  and click on Next button to finish .

2 .Once the project is created open your activity_main.xml (res/layout) and paste the following code.

Add colors.xml and styles_calendar_events.xml under res/values folder.

colors.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>

<color name=”white”>#FFFFFF</color>
<color name=”black”>#000000</color>
<color name=”symptom_color_selected”>#003366</color>
<color name=”reaction_color_selected”>#003366</color>
<color name=”static_text_color”>#003366</color>
<color name=”journal_entry_listitem_text_color”>#003366</color>
<color name=”note_text_disabled”>#333333</color>
<color name=”blue”>#0000FF</color>
<color name=”navy”>#6699FF</color>
<color name=”sky”>#0099CC</color>
<color name=”gray”>#808080</color>
<color name=”lightgray”>#e7e7e7</color>
<color name=”lightgray02″>#bfbfbf</color>
<color name=”dark”>#000015</color>
<color name=”lightgreen”>#336666</color>
<color name=”orrange”>#e33d1b</color>
<color name=”darkorrange”>#cc2303</color>

</resources>

styles_calendar_events.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>

<style name=”calendar_event_style” parent=”@android:style/TextAppearance.Small”>
<item name=”android:textColor”>#FF6600</item>
<item name=”android:textStyle”>bold</item>
<item name=”android:textSize”>8sp</item>
</style>

</resources>

activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”@color/lightgray”
android:orientation=”vertical”
tools:ignore=”InefficientWeight,ContentDescription” >

<LinearLayout
android:id=”@+id/buttonlayout”
android:layout_width=”fill_parent”
android:layout_height=”60sp”
android:background=”@drawable/topbar”
android:gravity=”left|top”
android:height=”60sp”
android:orientation=”horizontal” >

<Button
android:id=”@+id/settings”
android:layout_width=”54sp”
android:layout_height=”60sp”
android:background=”@drawable/meenu” />

<ImageView
android:id=”@+id/prevMonth”
android:layout_width=”20sp”
android:layout_height=”fill_parent”
android:layout_gravity=”center”
android:layout_marginLeft=”10sp”
android:src=”@drawable/calendar_left_arrow_selector” >
</ImageView>

<TextView
android:id=”@+id/currentMonth”
android:layout_width=”fill_parent”
android:layout_height=”60sp”
android:layout_weight=”0.6″
android:gravity=”center”
android:textAppearance=”?android:attr/textAppearanceMedium”
android:textColor=”#FFFFFF” >
</TextView>

<ImageView
android:id=”@+id/nextMonth”
android:layout_width=”20sp”
android:layout_height=”fill_parent”
android:layout_gravity=”center”
android:layout_marginRight=”10sp”
android:src=”@drawable/calendar_right_arrow_selector” >
</ImageView>

<Button
android:id=”@+id/addEvent”
android:layout_width=”54sp”
android:layout_height=”60sp”
android:background=”@drawable/plus” />
</LinearLayout>

<Button
android:id=”@+id/selectedDayMonthYear”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:background=”@drawable/calendar_top_header”
android:textAppearance=”?android:attr/textAppearanceMedium”
android:textColor=”#FFFFFF” >
</Button>

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”center” >

<ImageView
android:id=”@+id/calendarheader”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:src=”@drawable/calendar_days” >
</ImageView>
</LinearLayout>

<GridView
android:id=”@+id/calendar”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:numColumns=”7″ >
</GridView>

</LinearLayout>

3.Create another Xml under res/layout as a screen_gridcell.xml and paste following code .

screen_gridcell.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/calendar_button_selector”
android:orientation=”vertical” >

<Button
android:id=”@+id/calendar_day_gridcell”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:background=”@drawable/calendar_button_selector”
android:textAppearance=”?android:attr/textAppearanceMedium”
android:textColor=”#FFFFFF” >
</Button>

<TextView
android:id=”@+id/num_events_per_day”
style=”@style/calendar_event_style”
android:layout_width=”10dip”
android:layout_height=”10dip”
android:layout_gravity=”right” >
</TextView>

</RelativeLayout>

4.Open MainActivity.java class and paste following code.

MainActivity.java

package com.test.androidcalender;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;
import java.util.HashMap;
import java.util.List;
import java.util.Locale;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.text.format.DateFormat;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

@TargetApi(3)
public class MainActivity extends Activity implements OnClickListener {
private static final String tag = “MyCalendarActivity”;

private TextView currentMonth;
private Button selectedDayMonthYearButton;
private ImageView prevMonth;
private ImageView nextMonth;
private GridView calendarView;
private GridCellAdapter adapter;
private Calendar _calendar;
@SuppressLint(“NewApi”)
private int month, year;
@SuppressWarnings(“unused”)
@SuppressLint({ “NewApi”, “NewApi”, “NewApi”, “NewApi” })
private final DateFormat dateFormatter = new DateFormat();
private static final String dateTemplate = “MMMM yyyy”;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

_calendar = Calendar.getInstance(Locale.getDefault());
month = _calendar.get(Calendar.MONTH) + 1;
year = _calendar.get(Calendar.YEAR);
Log.d(tag, “Calendar Instance:= ” + “Month: ” + month + ” ” + “Year: ”
+ year);

selectedDayMonthYearButton = (Button) this
.findViewById(R.id.selectedDayMonthYear);
selectedDayMonthYearButton.setText(“Selected: “);

prevMonth = (ImageView) this.findViewById(R.id.prevMonth);
prevMonth.setOnClickListener(this);

currentMonth = (TextView) this.findViewById(R.id.currentMonth);
currentMonth.setText(DateFormat.format(dateTemplate,
_calendar.getTime()));

nextMonth = (ImageView) this.findViewById(R.id.nextMonth);
nextMonth.setOnClickListener(this);

calendarView = (GridView) this.findViewById(R.id.calendar);

// Initialised
adapter = new GridCellAdapter(getApplicationContext(),
R.id.calendar_day_gridcell, month, year);
adapter.notifyDataSetChanged();
calendarView.setAdapter(adapter);
}

/**
*
* @param month
* @param year
*/
private void setGridCellAdapterToDate(int month, int year) {
adapter = new GridCellAdapter(getApplicationContext(),
R.id.calendar_day_gridcell, month, year);
_calendar.set(year, month – 1, _calendar.get(Calendar.DAY_OF_MONTH));
currentMonth.setText(DateFormat.format(dateTemplate,
_calendar.getTime()));
adapter.notifyDataSetChanged();
calendarView.setAdapter(adapter);
}

@Override
public void onClick(View v) {
if (v == prevMonth) {
if (month <= 1) {
month = 12;
year–;
} else {
month–;
}
Log.d(tag, “Setting Prev Month in GridCellAdapter: ” + “Month: ”
+ month + ” Year: ” + year);
setGridCellAdapterToDate(month, year);
}
if (v == nextMonth) {
if (month > 11) {
month = 1;
year++;
} else {
month++;
}
Log.d(tag, “Setting Next Month in GridCellAdapter: ” + “Month: ”
+ month + ” Year: ” + year);
setGridCellAdapterToDate(month, year);
}

}

@Override
public void onDestroy() {
Log.d(tag, “Destroying View …”);
super.onDestroy();
}

// Inner Class
public class GridCellAdapter extends BaseAdapter implements OnClickListener {
private static final String tag = “GridCellAdapter”;
private final Context _context;

private final List<String> list;
private static final int DAY_OFFSET = 1;
private final String[] weekdays = new String[] { “Sun”, “Mon”, “Tue”,
“Wed”, “Thu”, “Fri”, “Sat” };
private final String[] months = { “January”, “February”, “March”,
“April”, “May”, “June”, “July”, “August”, “September”,
“October”, “November”, “December” };
private final int[] daysOfMonth = { 31, 28, 31, 30, 31, 30, 31, 31, 30,
31, 30, 31 };
private int daysInMonth;
private int currentDayOfMonth;
private int currentWeekDay;
private Button gridcell;
private TextView num_events_per_day;
private final HashMap<String, Integer> eventsPerMonthMap;
private final SimpleDateFormat dateFormatter = new SimpleDateFormat(
“dd-MMM-yyyy”);

// Days in Current Month
public GridCellAdapter(Context context, int textViewResourceId,
int month, int year) {
super();
this._context = context;
this.list = new ArrayList<String>();
Log.d(tag, “==> Passed in Date FOR Month: ” + month + ” ”
+ “Year: ” + year);
Calendar calendar = Calendar.getInstance();
setCurrentDayOfMonth(calendar.get(Calendar.DAY_OF_MONTH));
setCurrentWeekDay(calendar.get(Calendar.DAY_OF_WEEK));
Log.d(tag, “New Calendar:= ” + calendar.getTime().toString());
Log.d(tag, “CurrentDayOfWeek :” + getCurrentWeekDay());
Log.d(tag, “CurrentDayOfMonth :” + getCurrentDayOfMonth());

// Print Month
printMonth(month, year);

// Find Number of Events
eventsPerMonthMap = findNumberOfEventsPerMonth(year, month);
}

private String getMonthAsString(int i) {
return months[i];
}

private String getWeekDayAsString(int i) {
return weekdays[i];
}

private int getNumberOfDaysOfMonth(int i) {
return daysOfMonth[i];
}

public String getItem(int position) {
return list.get(position);
}

@Override
public int getCount() {
return list.size();
}

/**
* Prints Month
*
* @param mm
* @param yy
*/
private void printMonth(int mm, int yy) {
Log.d(tag, “==> printMonth: mm: ” + mm + ” ” + “yy: ” + yy);
int trailingSpaces = 0;
int daysInPrevMonth = 0;
int prevMonth = 0;
int prevYear = 0;
int nextMonth = 0;
int nextYear = 0;

int currentMonth = mm – 1;
String currentMonthName = getMonthAsString(currentMonth);
daysInMonth = getNumberOfDaysOfMonth(currentMonth);

Log.d(tag, “Current Month: ” + ” ” + currentMonthName + ” having ”
+ daysInMonth + ” days.”);

GregorianCalendar cal = new GregorianCalendar(yy, currentMonth, 1);
Log.d(tag, “Gregorian Calendar:= ” + cal.getTime().toString());

if (currentMonth == 11) {
prevMonth = currentMonth – 1;
daysInPrevMonth = getNumberOfDaysOfMonth(prevMonth);
nextMonth = 0;
prevYear = yy;
nextYear = yy + 1;
Log.d(tag, “*->PrevYear: ” + prevYear + ” PrevMonth:”
+ prevMonth + ” NextMonth: ” + nextMonth
+ ” NextYear: ” + nextYear);
} else if (currentMonth == 0) {
prevMonth = 11;
prevYear = yy – 1;
nextYear = yy;
daysInPrevMonth = getNumberOfDaysOfMonth(prevMonth);
nextMonth = 1;
Log.d(tag, “**–> PrevYear: ” + prevYear + ” PrevMonth:”
+ prevMonth + ” NextMonth: ” + nextMonth
+ ” NextYear: ” + nextYear);
} else {
prevMonth = currentMonth – 1;
nextMonth = currentMonth + 1;
nextYear = yy;
prevYear = yy;
daysInPrevMonth = getNumberOfDaysOfMonth(prevMonth);
Log.d(tag, “***—> PrevYear: ” + prevYear + ” PrevMonth:”
+ prevMonth + ” NextMonth: ” + nextMonth
+ ” NextYear: ” + nextYear);
}

int currentWeekDay = cal.get(Calendar.DAY_OF_WEEK) – 1;
trailingSpaces = currentWeekDay;

Log.d(tag, “Week Day:” + currentWeekDay + ” is ”
+ getWeekDayAsString(currentWeekDay));
Log.d(tag, “No. Trailing space to Add: ” + trailingSpaces);
Log.d(tag, “No. of Days in Previous Month: ” + daysInPrevMonth);

if (cal.isLeapYear(cal.get(Calendar.YEAR)))
if (mm == 2)
++daysInMonth;
else if (mm == 3)
++daysInPrevMonth;

// Trailing Month days
for (int i = 0; i < trailingSpaces; i++) {
Log.d(tag,
“PREV MONTH:= ”
+ prevMonth
+ ” => ”
+ getMonthAsString(prevMonth)
+ ” ”
+ String.valueOf((daysInPrevMonth
– trailingSpaces + DAY_OFFSET)
+ i));
list.add(String
.valueOf((daysInPrevMonth – trailingSpaces + DAY_OFFSET)
+ i)
+ “-GREY”
+ “-”
+ getMonthAsString(prevMonth)
+ “-”
+ prevYear);
}

// Current Month Days
for (int i = 1; i <= daysInMonth; i++) {
Log.d(currentMonthName, String.valueOf(i) + ” ”
+ getMonthAsString(currentMonth) + ” ” + yy);
if (i == getCurrentDayOfMonth()) {
list.add(String.valueOf(i) + “-BLUE” + “-”
+ getMonthAsString(currentMonth) + “-” + yy);
} else {
list.add(String.valueOf(i) + “-WHITE” + “-”
+ getMonthAsString(currentMonth) + “-” + yy);
}
}

// Leading Month days
for (int i = 0; i < list.size() % 7; i++) {
Log.d(tag, “NEXT MONTH:= ” + getMonthAsString(nextMonth));
list.add(String.valueOf(i + 1) + “-GREY” + “-”
+ getMonthAsString(nextMonth) + “-” + nextYear);
}
}

/**
* NOTE: YOU NEED TO IMPLEMENT THIS PART Given the YEAR, MONTH, retrieve
* ALL entries from a SQLite database for that month. Iterate over the
* List of All entries, and get the dateCreated, which is converted into
* day.
*
* @param year
* @param month
* @return
*/
private HashMap<String, Integer> findNumberOfEventsPerMonth(int year,
int month) {
HashMap<String, Integer> map = new HashMap<String, Integer>();

return map;
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
if (row == null) {
LayoutInflater inflater = (LayoutInflater) _context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(R.layout.screen_gridcell, parent, false);
}

// Get a reference to the Day gridcell
gridcell = (Button) row.findViewById(R.id.calendar_day_gridcell);
gridcell.setOnClickListener(this);

// ACCOUNT FOR SPACING

Log.d(tag, “Current Day: ” + getCurrentDayOfMonth());
String[] day_color = list.get(position).split(“-“);
String theday = day_color[0];
String themonth = day_color[2];
String theyear = day_color[3];
if ((!eventsPerMonthMap.isEmpty()) && (eventsPerMonthMap != null)) {
if (eventsPerMonthMap.containsKey(theday)) {
num_events_per_day = (TextView) row
.findViewById(R.id.num_events_per_day);
Integer numEvents = (Integer) eventsPerMonthMap.get(theday);
num_events_per_day.setText(numEvents.toString());
}
}

// Set the Day GridCell
gridcell.setText(theday);
gridcell.setTag(theday + “-” + themonth + “-” + theyear);
Log.d(tag, “Setting GridCell ” + theday + “-” + themonth + “-”
+ theyear);

if (day_color[1].equals(“GREY”)) {
gridcell.setTextColor(getResources()
.getColor(R.color.lightgray));
}
if (day_color[1].equals(“WHITE”)) {
gridcell.setTextColor(getResources().getColor(
R.color.lightgray02));
}
if (day_color[1].equals(“BLUE”)) {
gridcell.setTextColor(getResources().getColor(R.color.orrange));
}
return row;
}

@Override
public void onClick(View view) {
String date_month_year = (String) view.getTag();
selectedDayMonthYearButton.setText(“Selected: ” + date_month_year);
Log.e(“Selected date”, date_month_year);
try {
Date parsedDate = dateFormatter.parse(date_month_year);
Log.d(tag, “Parsed Date: ” + parsedDate.toString());

} catch (ParseException e) {
e.printStackTrace();
}
}

public int getCurrentDayOfMonth() {
return currentDayOfMonth;
}

private void setCurrentDayOfMonth(int currentDayOfMonth) {
this.currentDayOfMonth = currentDayOfMonth;
}

public void setCurrentWeekDay(int currentWeekDay) {
this.currentWeekDay = currentWeekDay;
}

public int getCurrentWeekDay() {
return currentWeekDay;
}
}
}

5. The final step is to  AndroidManifest.xml file. Open youAndroidManifest.xml file and modify the code as below

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
package=”com.test.androidcalender
android:versionCode=”1″
android:versionName=”1.0″ >

<uses-sdk
android:minSdkVersion=”8″
android:targetSdkVersion=”16″ />

<application
android:allowBackup=”true”
android:icon=”@drawable/ic_launcher”
android:label=”@string/app_name”
android:theme=”@style/AppTheme” >
<activity
android:name=”com.test.androidcalender.MainActivity
android:label=”@string/app_name” >
<intent-filter>
<action android:name=”android.intent.action.MAIN” />

<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
</application>

</manifest>

6. Finally run your project by right clicking on your project folder ⇒ Run As ⇒ 1 Android Application.

OutPutOutput

4 thoughts on “How to Create Custom Calendar in Android”

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s