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] (https://github.com/benbahrenburg/Ti.SQ/tree/master/Android/dist)

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](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.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.

• On Android this is a creation time only property. You will always be able to read this value, but on Android you can only set property this on creation.

max : Dictionary

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

• On Android this is a creation time only property. You will always be able to read this value, but on Android you can only set property this on creation.

PagingEnabled : Boolean

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

• On Android this property will always be true.

selectedDates : Array

Array containing Dictionaries with dates that should be marked as selected within the Ti.SQ calendar View.

• On Android this property will be ignored.

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
	},
	selectedDates: [
		{month:2,day:17,year:2014},
		{month:4,day:21,year:2014},
		{month:4,day:26,year:2014},
		{month:6,day:1,year:2014}
	]
});

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.