Calendar view instead of UIDatePicker [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise,开发者_开发技巧 but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 10 years ago.

Does anyone know of a view controller for iPhone/iPad that shows a monthly calendar?

---

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 monthTi.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 toolBarTi.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.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.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

---

There is no in-built view controller for that. You will need to create your own. There are projects in Github for that exact purpose.

Check these out.

1. Titanium Calendar
2. Klazuka

---

Check out the new calendar module which seems to do exactly what you're asking for.