Ti.SQ

The TiSQ project allows you to use Square's open source TimeSquare calendar picker in your Titanium app.

Before you start

• These are iOS and Android native modules designed to work with Titanium SDK 3.1.1.GA
• Before using this module you first need to install the package. If you need instructions on how to install a 3rd party module please read this installation guide.

Download the compiled release

Download the platform you wish to use:

• iOS Dist
• Android Dist Coming soon...

Building from source?

If you are building from source you will need to do the following:

Import the project into Xcode:

• Modify the titanium.xcconfig file with the path to your Titanium installation

Import the project into Eclipse:

• Update the .classpath
• Update the build properties

Setup

• Download the latest release from the releases folder ( or you can build it yourself )
• Install the ti.sq module. If you need help here is a "How To" guide.
• You can now use the module via the commonJS require method, example shown below.

Importing the module using require

var square = require('ti.sq');

Creating the View Object

The Ti.SQ view supports a majority of the standard Ti.UI.View properties. The below listed properties are specific to the Ti.SQ calendar view.

Parameters

value : Dictionary

The selection value on the Ti.SQ calendar View

min : Dictionary

The minimum date that will be shown and allowed to be selected on the Ti.SQ calendar view.

max : Dictionary

The maximum date that will be shown and allowed to be selected on the Ti.SQ calendar view.

PagingEnabled : Boolean

Enabled by default, this property determines if the Ti.SQ calendar view allows for scrolling

BackgroundColor : String/Color

The color of the calendar view month headings

Additional Properties

dateValue : Date

Once the Calendar View has been created and added to your Ti.UI.Window, the dateValue property can be used to obtain a JavaScript date object with the selected date of the Calendar View.

Example

//Require the square module into your project
var square = require('ti.sq');

var calendarView = square.createView({
  height:Ti.UI.FILL,
    width:Ti.UI.FILL,
    pagingEnabled:true,
    value:{
        month:4,day:15,year:2013
    },    

    min:{
        month:2,day:15,year:2013
    },
    max:{
        month:10,day:15,year:2013
    }
});

Events

dateChanged

This event is called when a date is selected by the user.

Callback Property Values

dateValue : Date

A JavaScript date object with the selected date of the Calendar View

value : Dictionary

A dictionary object with the day, month, and year of the selected date of the Calendar View.

For exampe:

{
    month:4,day:15,year:2013
}

Example

calendarView.addEventListener('dateChanged',function(d){
    Ti.API.info(JSON.stringify(d));
    Ti.API.info(JSON.stringify(d.dateValue));
    Ti.API.info(JSON.stringify(d.value));
    Ti.API.info(JSON.stringify(calendarView.value));
});

Learn More

Examples

Please check the module's example folder or

• iOS
• Android

for samples on how to use this project.

Twitter

Please consider following the @benCoding Twitter for updates and more about Titanium.

Blog

For module updates, Titanium tutorials and more please check out my blog at benCoding.Com.