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:

Comedy

You are looking for this ? #6080807 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/… – Flu

Please check below link i wants display like that create custom day view #6138465 – Comedy

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 – Flu

i want to implement android OS 1.6 and above. – Comedy

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

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. – Forrest

Answer 1

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>

Ignatzia

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

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 – Forrest

@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 – Ignatzia

@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? – Forrest

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

@Meaganmeager 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) – Ignatzia

@SherifelKhatib If you observe i.sstatic.net/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 ? – Meaganmeager

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 – Buckjump

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 . – Hookah

Answer 2

you can use google calendar in order to display your new calendar and over here you can create your own events. Below is the class for creating a new calendar.

public class CalendarMapper {
    private static final String ACCOUNT_NAME = "private";
    private static final String INT_NAME_PREFIX = "priv";

    @SuppressLint("NewApi")
    private static Uri buildCalUri() {
        return CalendarContract.Calendars.CONTENT_URI
                .buildUpon()
                .appendQueryParameter(CalendarContract.CALLER_IS_SYNCADAPTER, "true")
                .appendQueryParameter(Calendars.ACCOUNT_NAME, ACCOUNT_NAME)
                .appendQueryParameter(Calendars.ACCOUNT_TYPE, CalendarContract.ACCOUNT_TYPE_LOCAL)
                .build();
    }

    private static ContentValues buildContentValues(Calendar calendar) {
        String dispName = "TUM3";  //Calendar.getName() returns a String
        String intName = INT_NAME_PREFIX + dispName;
        final ContentValues cv = new ContentValues();
        cv.put(Calendars.ACCOUNT_NAME, ACCOUNT_NAME);
        cv.put(Calendars.ACCOUNT_TYPE, CalendarContract.ACCOUNT_TYPE_LOCAL);
        cv.put(Calendars.NAME, intName);
        cv.put(Calendars.CALENDAR_DISPLAY_NAME, dispName);
        //cv.put(Calendars.CALENDAR_COLOR, calendar.getColor());  //Calendar.getColor() returns int
        cv.put(Calendars.CALENDAR_ACCESS_LEVEL, Calendars.CAL_ACCESS_OWNER);
        cv.put(Calendars.OWNER_ACCOUNT, ACCOUNT_NAME);
        cv.put(Calendars.VISIBLE, 1);
        cv.put(Calendars.SYNC_EVENTS, 1);

        return cv;
    }

    @SuppressWarnings("deprecation")
    public static Uri addCalendar(Calendar calendar, ContentResolver cr) {
        if (calendar == null)
            throw new IllegalArgumentException();

        final ContentValues cv = buildContentValues(calendar);
        Uri calUri = buildCalUri();
        Uri cancelUri=cr.insert(calUri, cv);
        return cancelUri;
    }

}

In the main activity you can call add calendar to create a calendar and add an event into this calendar.

Uri cancelUri;
 @SuppressLint("NewApi")
    public void displayCal(View view){
           ContentResolver crv = getContentResolver();

           Calendar calendar = Calendar.getInstance();
           cancelUri= CalendarMapper.addCalendar(calendar, crv);

           long calID=2; //ID of the newly created calendar. You can query the calendars table to get the ID of your calendar
           long endMillis = 10100;     
           Calendar beginTime = Calendar.getInstance();
           beginTime.set(2012, 9, 14, 7, 30);
           long startMillis = beginTime.getTimeInMillis();
           Calendar endTime = Calendar.getInstance();
           endTime.set(2012, 9, 14, 8, 45);
           endMillis = endTime.getTimeInMillis();

           ContentResolver cr = getContentResolver();
           ContentValues values2 = new ContentValues();
           values2.put(Events.DTSTART, startMillis);
           values2.put(Events.DTEND, endMillis);
           values2.put(Events.TITLE, "Jazzercise");
           values2.put(Events.DESCRIPTION, "Group workout");
           values2.put(Events.CALENDAR_ID, calID);

           values2.put(Events.EVENT_TIMEZONE, "America/Los_Angeles");
           Uri uri = cr.insert(Events.CONTENT_URI, values2);

           Uri.Builder builder = CalendarContract.CONTENT_URI.buildUpon();
           builder.appendPath("time");

           ContentUris.appendId(builder, startMillis);
           Intent intent = new Intent(Intent.ACTION_VIEW)
               .setData(builder.build());
           startActivity(intent);
    }

In order to delete this calendar, you can do it like below

public void delCal(View view){
         ContentResolver crv = getContentResolver();
         crv.delete(cancelUri, null, null);
    }

Catrinacatriona

Answer 3

lateanswer for helping users that have same issue : You can use or customise this source for your implementing Calendar DayView https://github.com/r3za13/Android-Timeline-Schedule-View

Lailaibach

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

Reza, can you provide the example for this library? – Pasqualepasqueflower