TimesSquare Calendar view for Android

12:55 PM 2 Comments

TimesSquare: a Calendar view for iOS and Android

Hello i am talking about how to integrate timesqaure calendar view today.There are few steps in order to integrate it in your project.
  1.  Download library from this link .
  2.  Include library in your project.
  3. Usage :
    Include CalendarPickerView in your layout XML.
    <com.squareup.timessquare.CalendarPickerView
    android:id="@+id/calendar_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
    This is a fairly large control so it is wise to give it ample space in your layout. On small devices it is recommended to use a dialog, full-screen fragment, or dedicated activity. On larger devices like tablets, displaying full-screen is not recommended. A fragment occupying part of the layout or a dialog is a better choice.
    In the onCreate of your activity/dialog or the onCreateView of your fragment, initialize the view with a range of valid dates as well as the currently selected date.
    Calendar nextYear = Calendar.getInstance();
nextYear.add(Calendar.YEAR, 1);

CalendarPickerView calendar = (CalendarPickerView) findViewById(R.id.calendar_view);
calendar.init(new Date(), new Date(), nextYear.getTime());
    To retrieve the currently selected date, call getSelectedDate() on the view.

Pros:

  1. This is very good option if you want to select single date and return to your activity.
  2. Very smooth scrolling.
  3. You can modify theme of calendar by changing colors in color.xml in library project.
    1 2



















    1.  <color name="calendar_active_month_bg">#1fc7fd</color>
        <color name="calendar_bg">#555555</color>
        <color name="calendar_divider">#fcc31f</color>
        <color name="calendar_inactive_month_bg">#6ddbfd</color>
        <color name="calendar_selected_day_bg">#555555</color>
        <color name="calendar_text_inactive">#fd7246</color>
        <color name="calendar_text_active">#fd7246</color>
        <color name="calendar_text_selected">#fd7246</color>
        <color name="calendar_text_unselectable">#fd7246</color>
    2.  <color name="calendar_active_month_bg">#014156</color>
        <color name="calendar_bg">#ffffffff</color>
        <color name="calendar_divider">#555555</color>
        <color name="calendar_inactive_month_bg">#027da3</color>
        <color name="calendar_selected_day_bg">#039aca</color>
        <color name="calendar_text_inactive">#ffffff</color>
        <color name="calendar_text_active">#FC541F</color>
        <color name="calendar_text_selected">#ffffff</color>
        <color name="calendar_text_unselectable">#c4c4c4</color>

Cons:

  1. It provides only one method getSelectedDate(). You can't get more information like selected cell position to do more with date cell.
  2. You can't get multi selection like you can't select all dates between first selected date to second selected date.
  3. You can't add symbol to notify special dates or can't add event symbol like birthdate.
    i.e 

 

Reference link:


    Karn Shah

    My name is Karn Shah, I am a software developer living in Ahmedabad,India and my job/hobby is Android. I have been working on the Android platform since 2011 and I hope that sharing what I have learned will help people get proficient in Android faster!

    2 comments:

    1. UnknownJune 11, 2013 at 5:36 PM

      This library show only 5 rows in a month, for June 2013 it is not showing the 30th June 2013 in calendar. How can i add one more row at the bottom of this month so it it can display 30th June 2013 too. Please reply ASAP...

      ReplyDelete
    2. UnknownJune 1, 2014 at 12:39 AM

      thanks man, do you have any idea to add a popup menu when a cell is selected ?

      ReplyDelete

    Subscribe to: Post Comments (Atom)