Custom calendar dayview in android

Question

I want to develop a custom calendar day view for android OS 1.5 and later on.

Similar to android day calendar and event add & display in day view.

If you have example or source of it then please give me.

I have no idea how to start. Please guide me.

I have done month view as per below link:

http://w2davids.wordpress.com/android-simple-calendar/

but I have to also create day view so please help me.

I want to display this:

Solution

I just worked on this:

You could consider it a blueprint to start.

/**
 * @author Sherif
 * 
 * Copyright 2011
 *
 * Sample Day Viewer that will show entries of each hour with ability to 
 * add events and stuff
 * You should find a way to keep a container that will keep track of added events
 *
 */
public class DayViewActivity extends ListActivity {
/** Called when the activity is first created. */
private static int HOURS_PER_DAY = 24;

Context mContext = this;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //getListView().setBackgroundColor(Color.rgb(12, 12, 12));
    getListView().setDividerHeight(0);
    setListAdapter(new ListAdapter(){

        @Override
        public boolean areAllItemsEnabled() {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public boolean isEnabled(int arg0) {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return HOURS_PER_DAY;
        }

        @Override
        public Object getItem(int arg0) {
            // TODO Auto-generated method stub
            return null;
        }

        @Override
        public long getItemId(int arg0) {
            // TODO Auto-generated method stub
            return 0;
        }

        @Override
        public int getItemViewType(int arg0) {
            // TODO Auto-generated method stub
            return 0;
        }

        @Override
        public View getView(int position, View arg1, ViewGroup arg2) {
            // TODO Auto-generated method stub
            LayoutInflater inflater = getLayoutInflater();
            View listItem = (View) inflater.inflate(R.layout.list_item, getListView(),false);
            TextView hourTV = (TextView) listItem.findViewById(R.id.hourTV);
            TextView amTV = (TextView) listItem.findViewById(R.id.amTV);
            hourTV.setTextColor(Color.BLUE);
            amTV.setTextColor(Color.BLUE);
            final LinearLayout eventsLL = (LinearLayout) listItem.findViewById(R.id.eventsLL);
            hourTV.setText(String.valueOf((position+9)%24));
            //I set am/pm for each entry ... you could specify which entries
            if(((position>=0)&&(position<=2))||((position>=15)&&(position<=23)))
                amTV.setText("am");
            else
                amTV.setText("pm");
            eventsLL.setOnClickListener(new OnClickListener(){

                @Override
                public void onClick(View arg0) {
                    // TODO Auto-generated method stub
                    AlertDialog.Builder alert = new AlertDialog.Builder(mContext); 

                    alert.setTitle("New Event"); 
                    alert.setMessage("Event:"); 

                    // Set an EditText view to get user input 
                    final EditText input = new EditText(mContext); 
                    alert.setView(input); 

                    alert.setPositiveButton("Add", new DialogInterface.OnClickListener() { 
                        public void onClick(DialogInterface dialog, int whichButton) { 
                            TextView A = new TextView(mContext);
                            A.setText(input.getText());
                            A.setTextColor(Color.BLACK);
                            eventsLL.addView(A);
                        } 
                    }); 

                    alert.setNegativeButton("Cancel", new DialogInterface.OnClickListener() { 
                        public void onClick(DialogInterface dialog, int whichButton) {
                        } 
                    }); 
                    alert.show();
                }

            });
            return listItem;
        }

        @Override
        public int getViewTypeCount() {
            // TODO Auto-generated method stub
            return 1;
        }

        @Override
        public boolean hasStableIds() {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public boolean isEmpty() {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public void registerDataSetObserver(DataSetObserver arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void unregisterDataSetObserver(DataSetObserver arg0) {
            // TODO Auto-generated method stub

        }

    });
}

/drawable/eventbg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="5px"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> 
</shape>

/layout/list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:paddingTop="5dip"
  android:paddingBottom="5dip"
  android:background="#CCC">
    <LinearLayout 
        android:id="@+id/linearLayout1" 
        android:layout_height="fill_parent" 
        android:layout_width="wrap_content" 
        android:orientation="vertical">
        <TextView 
            android:id="@+id/hourTV" 
            android:text="" 
            android:textAppearance="?android:attr/textAppearanceSmall" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content"/>
        <TextView 
            android:id="@+id/amTV" 
            android:text="" 
            android:textAppearance="?android:attr/textAppearanceSmall" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content"/>
    </LinearLayout>
    <LinearLayout 
        android:id="@+id/LLdesign" 
        android:orientation="horizontal"
        android:layout_height="fill_parent" 
        android:layout_width="fill_parent"
        android:padding="3dip">
        <LinearLayout 
            android:id="@+id/eventsLL"
            android:orientation="vertical"
            android:layout_height="fill_parent" 
            android:layout_width="fill_parent"
            android:background="@drawable/eventbg"></LinearLayout>
        </LinearLayout>

</LinearLayout>

Comments

[Dharmendra]

You are looking for this ? stackoverflow.com/questions/6080307/… This way you can customize your Calendar View. EDIT Also you can make a custom day piker like this code.google.com/p/android-wheel/downloads/list or code.google.com/p/android-wheel/source/browse/…

[Nikhil]

Please check below link i wants display like that create custom day view stackoverflow.com/questions/6137965/…

[Dharmendra]

code.google.com/p/iosched is the link in this question so you can get source from here code.google.com/p/iosched/source/browse/#hg%2Fandroid

[Nikhil]

i want to implement android OS 1.6 and above.

[Sherif elKhatib]

can you tick the answer please :$? just for the sake of the green tick :P

[Google]

Hiiii Nik i seen your question and got the ans from that..i have to make same day view which is like given first screenshot.if u have successfully made this then plz share with me.i also cant understand for this calander.

[SERPRO]

good answer! About your question about sharing your tutorials and code.. you can use androidsnippets[dot]com

[Google]

thanks for sharing tutorials and if you dont mind then i want to ask questions i am not getting white row after writing the event.just simply write only in listview.i have added eventbg.xml into drwable

[Sherif elKhatib]

@Patel this is really old back when I started android development :( the code is also bad hehehe. Anyway I will check it out after work and come back to you

[Google]

@SherifelKhatib hey man can u tell me how can i add row like google calendar day view in your given sample?i am trying lot of changes but cant get anything.hv u any suggestion for that?

[Harish]

@SherifelKhatib If the schedule is b/w 13:30 to 14:20 then how to set this kind of schedules in this Day view?

[Sherif elKhatib]

@Harish I suppose you can change the way you list the left indices according to the date/time. Of course when some one adds an event, you could allow him to choose a specific time (interval)

[Harish]

@SherifelKhatib If you observe i.stack.imgur.com/mdzta.png this in it one schedule is b/w 1:30 to 3:00 in that case the indices is not changed the schedule is scheduled b/w that interval of time.So how should we do this type of View ?

[Ashish Mishra]

Its good for time Ruler view.If you want to implement it with the good features please see this link code.google.com/p/iosched

[jad]

This code is working very well on the emulator but when i am running it on a real device , the even is not getting feeded back in the list view item . unable to figure out the problem .

[Sid]

Reza, Do you have an example for this library usage, by any chance?

[Manikandan]

Reza, can you provide the example for this library?