How to manage Scriptaculous slider handle from input box value - prototypejs

I'm using Scriptaculous to create a price range slider with two handles. How can I manage slider handle from input box value. ie, slider handle moves according to input box values.
Tried as follows
http://jsfiddle.net/paHjV/1/
Any help please

I think what you want is:
var priceRange;
var validValues = [0, 50000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 450000, 500000, 550000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 1000000, 1050000, 1100000, 1150000, 1200000, 1250000, 1300000, 1350000, 1400000, 1450000, 1500000, 1550000, 1600000, 1650000, 1700000, 1750000, 1800000, 1850000, 1900000, 1950000, 2000000, 2050000, 2100000, 2150000, 2200000, 2250000, 2300000, 2350000, 2400000, 2450000, 2500000, 2550000, 2600000, 2650000, 2700000, 2750000, 2800000, 2850000, 2900000, 2950000, 3000000, 3050000, 3100000, 3150000, 3200000, 3250000, 3300000, 3350000, 3400000, 3450000, 3500000, 3550000, 3600000, 3650000, 3700000, 3750000, 3800000, 3850000, 3900000, 3950000, 4000000, 4050000, 4100000, 4150000, , 4200000, 4250000, 4300000, 4350000, 4400000, 4450000, , 4500000, 4550000, 4600000, 4650000, 4700000, 4750000, 4800000, 4850000, 4900000, 4950000, 5000000];
var loadPriceSlider = function () {
var handles = [$('price-min'), $('price-max')];
// horizontal slider control with preset values
priceRange = new Control.Slider(handles, 'price-range', {
range: $R(0, 5000000, false),
sliderValue: [50000, 5000000],
values: validValues,
restricted: true,
onSlide: function (v) {
$('priceMin').value = ((v[0] != null) ? v[0] : 0);
$('priceMax').value = ((v[1] != null) ? v[1] : 0);
},
onChange: function (v) {
if (v.length > 0) {
$('priceMin').value = ((v[0] != null) ? v[0] : 0);
$('priceMax').value = ((v[1] != null) ? v[1] : 0);
}
}
});
};
loadPriceSlider();
$('priceMin').observe('change', function(){
this.value = parseInt(this.value, 10);
priceRange.setValue(this.value, 0);
});
$('priceMax').observe('change', function(){
this.value = parseInt(this.value, 10);
priceRange.setValue(this.value, 1);
});

Related

ThreeJs / Mesh coordinates always 0 (glTF object)

i have this object and i have a problem...
Mesh coordinates are always 0 and i don't know how to fix it
I want to add multiple sprites to this one, but i can't with these coordinates (research from here)
THREE.DRACOLoader.setDecoderPath('Scripts/libs/draco/gltf/');
THREE.DRACOLoader.setDecoderConfig({ type: 'js' });
let loader = new THREE.GLTFLoader();
loader.setDRACOLoader(new THREE.DRACOLoader());
loader.load('/3D_Cars/Dacia_1410_Tuned/components/scene.gltf', function (gltf) {
carModel = gltf.scene.children[0];
gltf.scene.traverse(function (child) {
if (child.isMesh) {
console.log(child.name," ", child.matrixWorld.getPosition().x + ',' + child.matrixWorld.getPosition().y + ',' + child.matrixWorld.getPosition().z);
var v = new THREE.Vector3(0, 0, 0);
domEvents.addEventListener(carModel.getObjectByName(child.name), 'click', function (event) {
app.RenameAsCarParts(child.name)
console.log(child.name)
}, false)
//if (child.name == 'rim_RSL1_Aluminium_0') {
// child.position.set(100, 50, 3); //testing
// var spritey = makeTextSpriteNew(" Hello ",
// { fontsize: 15, textColor: { r: 0, g: 0, b: 0, a: 1.0 } });
// scene.add(spritey);
//}
}
});
carModel.getObjectByName('Body_paint_0').material = bodyMaterial;
carModel.rotation.set(Math.PI / 2, 0, 0);
carModel.rotateY(Math.PI);
scene.add(carModel);
});
Console screenshot:
Thanks!

index mismatch after column is hidden in Datatable

Hello I am using data table and as per some business logic certain columns in my table are shown or hidden for that I am sending the aoColumns as JSon from Java side, but the problem I am facing is in rowCallBack functions
I am manipulating columns on indexes which is miss-matched when I hide columns
This is how I am manipulating columns:
$('td:eq(0)', nRow).html(""+nameTrimmed+ "");
my guess is hidden columns are not counted in the index and rowCallBack just manipulates any column that is visible on that index
I can not write different rowCallBack for every case to keep it generic
Is there any way I can include the hidden column in index count?
or may be modify columns in some other way apart from indexes.
Here is the code
$('#myTable').DataTable({
"dom": 't<"pagecontrol"lip>',
"bJQueryUI": true,
"sPaginationType": "simple",
"bServerSide": true,
"sAjaxSource": "${ctx}/getData?",
"bProcessing": true,
"oLanguage":
{
"sInfo": "<fmt:message key="DataTable.key.DT_SHOWING_ENTRIES" />",
"sInfoEmpty": "<fmt:message key="DataTable.key.DT_SHOWING_ENTRIES_EMPTY" />",
"oPaginate":
{
"sNext": '<i class="fa fa-caret-right"></i>',
"sLast": '<<',
"sFirst": '>>',
"sPrevious": '<i class="fa fa-caret-left"></i>'
}
},
"lengthMenu": [[50, 100, 150, 200], [50, 100, 150, 200]],
"rowCallback": function( nRow, dtoObj, iDisplayIndex, iDisplayIndexFull ) {
if (dtoObj.firstName != '' && !showDownloadButton) {
$("#participantDownloadButton").removeClass('hide');
showDownloadButton = true;
}
if(searchStringCount == dtoObj.searchStringCounter || dtoObj.searchStringCounter == 0) {
var name = dtoObj.firstName +" "+ dtoObj.lastName;
var nameTrimmed = trimStringByCharacters(name, 25);
$('td:eq(0)', nRow).html("<label title='"+name.trim()+"'>"+nameTrimmed+ "</label>");
//column 2 email
if(dtoObj.email!='') {
var email = trimStringByCharacters(dtoObj.email,20) ;
$('td:eq(1)', nRow).html("<label title='" + email + "'>" + email + "</label>");
}else{
$('td:eq(1)', nRow).html("");
}
//column 3 List name
var listName = dtoObj.eligibilityListName;
var listNameTrimmed = "";
if(listName!=null) {
listNameTrimmed = trimStringByCharacters(listName, 20);
}
$('td:eq(2)', nRow).html("<label title='"+listName+"'>"+listNameTrimmed+ "</label>");
var packageLevel = dtoObj.packageLevel;
var packageLevelTrimmed = trimStringByCharacters(packageLevel, 15);
$('td:eq(3)', nRow).html("<label title='"+packageLevel+"' data-participant-id='"+dtoObj.userId+"'>"+packageLevelTrimmed+ "</label>");
var durationUnit ='<fmt:message key="reports.filter.months"/>';
if (dtoObj.packageDuration == 1) {
durationUnit = '<fmt:message key="reports.filter.month"/>';
}
$('td:eq(4)', nRow).html(dtoObj.packageDuration +" "+ durationUnit);
// Add icons before status
var status = dtoObj.status;
var iconLink = getIconLinkByStatus(status);
// Add icons ends
if(dtoObj.status != null) {
$('td:eq(6)', nRow).html(iconLink + dtoObj.status);
} else {
$('td:eq(6)', nRow).html("");
}
}
},
"drawCallback": function() {
$(".dataTables_wrapper").children(".pagecontrol").find("#participantsTable_length label").contents().eq(0).replaceWith('<fmt:message key="rows.per.page"/> ');
$("#participantsTable").find(".dataTables_empty").html('<fmt:message key="no.data.in.table"/>');
//Code to diaply participant details view
$('#participantsTable tbody tr').on('click',function () {
var $tds = $(this).find('td');
var userId = $tds.eq(2).find('label').attr("data-participant-id");;
var status = $tds.eq(5).text();
var listName = $tds.eq(1).text();
showParticipantDetails(userId, status, listName);
});
},
"aoColumns": columnData //coming from server side
});

SVG animation / TweenMax / Reverse animation

Here is the animation which is running with yoyo = true meaning the animation goes one way and then do the "reverse" animation.
I would like to be able to play the animation in mode reverse without having the yoyo mode.
In other words, I would like to have the second part (the reverse one)
https://codepen.io/chrisgannon/pen/greVXG
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
}
TweenMax.set('svg', {
visibility: 'visible',
transformOrigin:'50% 50%',
scale:1
})
var mainTl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:2});
var skySunTl = new TimelineMax({paused:true});
skySunTl.fromTo('#lower', 10, {
stopColor:'#020111'
},{
stopColor:'#CD82A0',
ease:Linear.easeNone
})
.fromTo('#upper', 10, {
stopColor:'#1F1F2B'
},{
stopColor:'#4B4A6A',
ease:Linear.easeNone
},'-=10')
.to('#lower', 10, {
stopColor:'#95DFFF',
ease:Linear.easeNone
})
.to('#upper', 10, {
stopColor:'#94DFFF',
ease:Linear.easeNone
},'-=10')
.to('#lower', 10, {
stopColor:'#f9b681',
ease:Linear.easeNone
})
.to('#upper', 10, {
stopColor:'#eb4a78',
ease:Linear.easeNone
},'-=10')
.fromTo('#sun', 10, {
fill:'#B30200'
},
{
fill:'#EC8323',
ease:Linear.easeNone
},'-=30')
.to('#sun', 10, {
fill:'#FFF',
ease:Linear.easeNone
},'-=20')
.to('#sun', 10, {
fill:'#fefdeb',
ease:Linear.easeNone
},'-=10')
.fromTo('#sun', 15, {
attr:{
cy:410,
r:105
}},{
attr:{
cy:0,
r:90
},
ease:Power1.easeInOut
},'-=30')
.to('#sun', 14, {
attr:{
cy:300,
r:105
},
ease:Sine.easeInOut
},'-=13')
.from('#mainCircleMask circle', 30, {
attr:{
r:500
},
ease:Power1.easeInOut
},'-=30')
var waterTl = new TimelineMax({paused:true});
waterTl.fromTo('#waterCircle', 30, {
fill:'#020111'
},{
fill:'#5DB3C6',
ease:Linear.easeNone
})
.fromTo('#waterRipple', 30, {
fill:'#020111'
},{
fill:'#A5DCE4',
ease:Linear.easeNone
},'-=30')
.fromTo('body', 30, {
backgroundColor:'#020111'
},{
backgroundColor:'#FFF',
ease:Linear.easeNone
},'-=30')
var skySunTween = TweenMax.to(skySunTl, 10, {
time:skySunTl.duration(),
ease:Power2.easeInOut
})
var waterTween= TweenMax.to(waterTl, 10, {
time:waterTl.duration(),
ease:Power2.easeInOut
})
mainTl.add(skySunTween, 0);
mainTl.add(waterTween, 0);
mainTl.timeScale(4);
mainTl.play(0)
//ScrubGSAPTimeline(mainTl)
//tl.timeScale(30)
Thank you
This should do the trick, using a mix of reversed:true in your TimelineMax() constructor. And also using progress(0.5) when you chain your timelines/tweens:
https://codepen.io/jonathan/pen/dNxgVK
I changed this:
var mainTl = new TimelineMax({
repeat:1,
yoyo:true,
repeatDelay:2
});
To this using reversed:true
var mainTl = new TimelineMax({
reversed:true
});
reversed is found in the TimelineMax Docs:
reversed ( value:Boolean ) : *
Gets or sets the animation's reversed state which indicates whether or
not the animation should be played backwards.
And i changed this
mainTl.add(skySunTween, 0);
mainTl.add(waterTween, 0);
mainTl.timeScale(4);
mainTl.play();
To this and added progress(0.5), which represents half way through the timeline
mainTl.add(skySunTween, 0);
mainTl.add(waterTween, 0);
mainTl.timeScale(4);
mainTL.progress(0.5); // added GSAP progress() method
mainTl.play();
.progress( value:Number, suppressEvents:Boolean ) : *
[override] Gets or sets the timeline's progress which is a value
between 0 and 1 indicating the position of the virtual playhead
(excluding repeats) where 0 is at the beginning, 0.5 is halfway
complete, and 1 is complete.
Resources:
progress(): https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/
TimelineMax: https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

Kendo UI Slider / how to disable keyboard input?

Is there a way to disable the keyboard events on Kendo UI Slider? Basically, I want to prevent changing the value of the slider when pressing left and right arrow keys. Is this possible at all?
Please note that slider is being dynamically inserted into the DOM as part of a KO custom binding handler.
ko.bindingHandlers.tone = {
init: function(element, valueAccessor) {
if (valueAccessor().settingToneEnabled) {
var $el = $(element);
var tag = '<span class="dropdown mrgn-tp-md"><ul class="dropdown-menu dropdown-menu-right text-center pddng-sm" aria-labelledby="tonedropdownMenu"><li class="pddng-lft-md pddng-rght-sm"><span id="tone-slider" title="tone"></span></li><li class="pddng-rght-sm"><i class="icon icon-delete"></i> ' + i18n['ps-deleteArticleToneLabel'] + '</li></ul></span>';
$(tag).appendTo($el);
var $slider = $('#tone-slider', $el);
var $delLink = $('a.del', $el);
var $dropdown = $('span.dropdown', $el);
$('a.dropdown-toggle', $dropdown).on('click', function() {
$('.dropdown-menu', $dropdown).toggle();
});
$slider.kendoSlider({
change: function(e) {
var va = valueAccessor();
va.value(e.value);
if ($.isFunction(va.handleUserInput)) {
va.handleUserInput();
}
},
showButtons: false,
min: -1,
max: 1,
smallStep: 1,
value: valueAccessor().value() || 0,
tickPlacement: 'none',
tooltip: {
enabled: false
}
});
$('.k-draghandle', $el).off('keydown');
$delLink.on('click', function(e) {
e.preventDefault();
if ($delLink.attr('disabled')) {
return;
}
var va = valueAccessor();
va.value(null);
if ($.isFunction(va.handleUserInput)) {
va.handleUserInput();
}
});
$el.data('slider', $slider.data("kendoSlider"));
$el.data('deleteButton', $delLink);
$el.data('dropdown', $dropdown);
} else {
$('<span href="" data-tone></span>').appendTo(element);
}
},
update: function(element, valueAccessor) {
var toneValues = {
'1': {
name: i18n['ps-tonePositive'],
val: 1,
css: 'icon-tone-positive'
},
'0': {
name: i18n['ps-toneNeutral'],
val: 0,
css: 'icon-tone-neutral'
},
'-1': {
name: i18n['ps-toneNegative'],
val: 0,
css: 'icon-tone-negative'
},
};
var $tone = $('*[data-tone]', element);
var val = valueAccessor().value() || 0;
var tone = toneValues[val.toString()] || toneValues['0'];
$tone.removeClass()
.addClass('icon').addClass(tone.css)
.attr('title', tone.name);
if (valueAccessor().settingToneEnabled) {
$('#tone-slider', element).data("kendoSlider").value(val);
}
},
};
You can try to remove the keydown handler.
See demo.

Is there a 'native' cross platform calendar GUI view example available for Titanium?

As usual, the Q&A section of Appcelerator's developer website isn't being very helpful with this question (unless I'm going blind). It seems that this question is largely asked but never answered.
Is there an example of a calendar view (the GUI - e.g. day, week and month view) that can be deployed to both iOS AND Android? Integration into the built-in calendar (or events) isn't a must (it's not required now but may be in the future).
I've seen stelford and smontgomerie's modules for iOS and pec1985's web view one, however, I'm after one that would result with native (cancels out pec1985's one) GUI objects so that disability assistive technologies are enabled for it.
I Google a lot for showing Month View / Calendar View in my Titanium application but unable to find it out which work on IPhone and Android (Almost all the screens) Both.
After that I tried to implement it by my own and got the good implementation.
To achieve this, Create project which support Android & IPhone.
Open app.js and replace the following code with the existing code and after that Press Command + Shift + F to format the code.
// Taking Screen Width
var screenWidth = 322;
var needToChangeSize = false;
var screenWidthActual = Ti.Platform.displayCaps.platformWidth;
if (Ti.Platform.osname === 'android') {
if (screenWidthActual >= 641) {
screenWidth = screenWidthActual;
needToChangeSize = true;
}
}
// Main Window of the Month View.
var win = Ti.UI.createWindow({
backgroundColor : '#FF000000',
navBarHidden : true
});
// Button at the buttom side
var backButton = Ti.UI.createButton({
bottom : '20dp',
height : '40dp',
width : '200dp'
});
// Previous Button - Tool Bar
var prevMonth = Ti.UI.createButton({
left : '15dp',
width : 'auto',
height : 'auto',
title : '<'
});
// Next Button - Tool Bar
var nextMonth = Ti.UI.createButton({
right : '15dp',
width : 'auto',
height : 'auto',
title : '>'
});
// Month Title - Tool Bar
var monthTitle = Ti.UI.createLabel({
width : '200dp',
height : '24dp',
textAlign : 'center',
color : '#3a4756',
font : {
fontSize : 20,
fontWeight : 'bold'
}
});
// Tool Bar
var toolBar = Ti.UI.createView({
top : '0dp',
width : '322dp',
height : '50dp',
backgroundColor : '#FFFFD800',
layout : 'vertical'
});
// Tool Bar - View which contain Title Prev. & Next Button
var toolBarTitle = Ti.UI.createView({
top : '3dp',
width : '322dp',
height : '24dp'
});
toolBarTitle.add(prevMonth);
toolBarTitle.add(monthTitle);
toolBarTitle.add(nextMonth);
// Tool Bar - Day's
var toolBarDays = Ti.UI.createView({
top : '2dp',
width : '322dp',
height : '22dp',
layout : 'horizontal',
left : '-1dp'
});
toolBarDays.sunday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Sun',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.monday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Mon',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.tuesday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Tue',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.wednesday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Wed',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.thursday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Thu',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.friday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Fri',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.saturday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Sat',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.add(toolBarDays.sunday);
toolBarDays.add(toolBarDays.monday);
toolBarDays.add(toolBarDays.tuesday);
toolBarDays.add(toolBarDays.wednesday);
toolBarDays.add(toolBarDays.thursday);
toolBarDays.add(toolBarDays.friday);
toolBarDays.add(toolBarDays.saturday);
// Adding Tool Bar Title View & Tool Bar Days View
toolBar.add(toolBarTitle);
toolBar.add(toolBarDays);
// Function which create day view template
dayView = function(e) {
var label = Ti.UI.createLabel({
current : e.current,
width : '46dp',
height : '44dp',
backgroundColor : '#FFDCDCDF',
text : e.day,
textAlign : 'center',
color : e.color,
font : {
fontSize : 20,
fontWeight : 'bold'
}
});
return label;
};
monthName = function(e) {
switch(e) {
case 0:
e = 'January';
break;
case 1:
e = 'February';
break;
case 2:
e = 'March';
break;
case 3:
e = 'April';
break;
case 4:
e = 'May';
break;
case 5:
e = 'June';
break;
case 6:
e = 'July';
break;
case 7:
e = 'August';
break;
case 8:
e = 'September';
break;
case 9:
e = 'October';
break;
case 10:
e = 'November';
break;
case 11:
e = 'December';
break;
};
return e;
};
// Calendar Main Function
var calView = function(a, b, c) {
var nameOfMonth = monthName(b);
//create main calendar view
var mainView = Ti.UI.createView({
layout : 'horizontal',
width : '322dp',
height : 'auto',
top : '50dp'
});
//set the time
var daysInMonth = 32 - new Date(a, b, 32).getDate();
var dayOfMonth = new Date(a, b, c).getDate();
var dayOfWeek = new Date(a, b, 1).getDay();
var daysInLastMonth = 32 - new Date(a, b - 1, 32).getDate();
var daysInNextMonth = (new Date(a, b, daysInMonth).getDay()) - 6;
//set initial day number
var dayNumber = daysInLastMonth - dayOfWeek + 1;
//get last month's days
for ( i = 0; i < dayOfWeek; i++) {
mainView.add(new dayView({
day : dayNumber,
color : '#8e959f',
current : 'no',
dayOfMonth : ''
}));
dayNumber++;
};
// reset day number for current month
dayNumber = 1;
//get this month's days
for ( i = 0; i < daysInMonth; i++) {
var newDay = new dayView({
day : dayNumber,
color : '#3a4756',
current : 'yes',
dayOfMonth : dayOfMonth
});
mainView.add(newDay);
if (newDay.text == dayOfMonth) {
newDay.color = 'white';
// newDay.backgroundImage='../libraries/calendar/pngs/monthdaytiletoday_selected.png';
newDay.backgroundColor = '#FFFFF000';
var oldDay = newDay;
}
dayNumber++;
};
dayNumber = 1;
//get remaining month's days
for ( i = 0; i > daysInNextMonth; i--) {
mainView.add(new dayView({
day : dayNumber,
color : '#8e959f',
current : 'no',
dayOfMonth : ''
}));
dayNumber++;
};
// this is the new "clicker" function, although it doesn't have a name anymore, it just is.
mainView.addEventListener('click', function(e) {
if (e.source.current == 'yes') {
// reset last day selected
if (oldDay.text == dayOfMonth) {
oldDay.color = 'white';
// oldDay.backgroundImage='../libraries/calendar/pngs/monthdaytiletoday.png';
oldDay.backgroundColor = '#FFFFF000';
} else {
oldDay.color = '#3a4756';
// oldDay.backgroundImage='../libraries/calendar/pngs/monthdaytile-Decoded.png';
oldDay.backgroundColor = '#FFDCDCDF'
}
oldDay.backgroundPaddingLeft = '0dp';
oldDay.backgroundPaddingBottom = '0dp';
// set window title with day selected, for testing purposes only
backButton.title = nameOfMonth + ' ' + e.source.text + ', ' + a;
// set characteristic of the day selected
if (e.source.text == dayOfMonth) {
// e.source.backgroundImage='../libraries/calendar/pngs/monthdaytiletoday_selected.png';
e.source.backgroundColor = '#FFFF00FF';
} else {
// e.source.backgroundImage='../libraries/calendar/pngs/monthdaytile_selected.png';
e.source.backgroundColor = '#FFFF0000';
}
e.source.backgroundPaddingLeft = '1dp';
e.source.backgroundPaddingBottom = '1dp';
e.source.color = 'white';
//this day becomes old :(
oldDay = e.source;
}
});
return mainView;
};
// what's today's date?
var setDate = new Date();
a = setDate.getFullYear();
b = setDate.getMonth();
c = setDate.getDate();
// add the three calendar views to the window for changing calendars with animation later
var prevCalendarView = null;
if (b == 0) {
prevCalendarView = calView(a - 1, 11, c);
} else {
prevCalendarView = calView(a, b - 1, c);
}
prevCalendarView.left = (screenWidth * -1) + 'dp';
var nextCalendarView = null;
if (b == 0) {
nextCalendarView = calView(a + 1, 0, c);
} else {
nextCalendarView = calView(a, b + 1, c);
}
nextCalendarView.left = screenWidth + 'dp';
var thisCalendarView = calView(a, b, c);
if (needToChangeSize == false) {
thisCalendarView.left = '-1dp';
}
monthTitle.text = monthName(b) + ' ' + a;
backButton.title = monthName(b) + ' ' + c + ', ' + a;
// add everything to the window
win.add(toolBar);
win.add(thisCalendarView);
win.add(nextCalendarView);
win.add(prevCalendarView);
win.add(backButton);
// yeah, open the window, why not?
win.open({
modal : true
});
var slideNext = Titanium.UI.createAnimation({
// left : '-322',
duration : 500
});
slideNext.left = (screenWidth * -1);
var slideReset = Titanium.UI.createAnimation({
// left : '-1',
duration : 500
});
if (needToChangeSize == false) {
slideReset.left = '-1';
} else {
slideReset.left = ((screenWidth - 644) / 2);
}
var slidePrev = Titanium.UI.createAnimation({
// left : '322',
duration : 500
});
slidePrev.left = screenWidth;
// Next Month Click Event
nextMonth.addEventListener('click', function() {
if (b == 11) {
b = 0;
a++;
} else {
b++;
}
thisCalendarView.animate(slideNext);
nextCalendarView.animate(slideReset);
setTimeout(function() {
thisCalendarView.left = (screenWidth * -1) + 'dp';
if (needToChangeSize == false) {
nextCalendarView.left = '-1dp';
} else {
nextCalendarView.left = ((screenWidth - 644) / 2);
}
prevCalendarView = thisCalendarView;
thisCalendarView = nextCalendarView;
if (b == 11) {
nextCalendarView = calView(a + 1, 0, c);
} else {
nextCalendarView = calView(a, b + 1, c);
}
monthTitle.text = monthName(b) + ' ' + a;
nextCalendarView.left = screenWidth + 'dp';
win.add(nextCalendarView);
}, 500);
});
// Previous Month Click Event
prevMonth.addEventListener('click', function() {
if (b == 0) {
b = 11;
a--;
} else {
b--;
}
thisCalendarView.animate(slidePrev);
prevCalendarView.animate(slideReset);
setTimeout(function() {
thisCalendarView.left = screenWidth + 'dp';
if (needToChangeSize == false) {
prevCalendarView.left = '-1dp';
} else {
prevCalendarView.left = ((screenWidth - 644) / 2);
}
nextCalendarView = thisCalendarView;
thisCalendarView = prevCalendarView;
if (b == 0) {
prevCalendarView = calView(a - 1, 11, c);
} else {
prevCalendarView = calView(a, b - 1, c);
}
monthTitle.text = monthName(b) + ' ' + a;
prevCalendarView.left = (screenWidth * -1) + 'dp';
win.add(prevCalendarView);
}, 500);
});
Tested Environment
Titanium Studio - 2.1.2.201208301612
Titanium SDK - 2.1.0.GA
Android - 2.2 Emulator
iOS Version - 5.0
Reference - http://titaniumexplorers.blogspot.in/2012/09/titanium-calendar-month-view.html
no.
the implementations of the calendar UI on the two platforms is so drastically different and complex that the probability of finding one implementation to meet all of your requirements is highly unlikely.
You are not going blind, your requirements are just very specific.

Resources