Calendar 使用事件Appcelerator创建日历

我有JSON文件和事件，我想显示每月的事件日历，但我不能这样做。Android SDK 1.7.5 Tianium Appcelerator在我的Tianium应用程序中显示月视图/日历视图，我在谷歌上搜索了很多，但无法找到在IPhone和Android（几乎所有屏幕）上都能工作的视图

之后我试着自己去实现它，并且得到了很好的实现

要实现这一点，请创建支持Android和IPhone的项目。 打开app.js并用现有代码替换以下代码，然后按Command+Shift+F格式化代码

//测量屏幕宽度
var屏幕宽度=322；
var needToChangeSize=false；
var screenWidthActual=Ti.Platform.displayCaps.platformWidth；
如果（Ti.Platform.osname==='android'）{
如果（屏幕宽度实际值>=641）{
屏幕宽度=屏幕宽度实际值；
needToChangeSize=true；
}
}
//月视图的主窗口。
var win=Ti.UI.createWindow({
背景颜色：'#FF000000'，
navBarHidden：真的
});
//按钮在按钮侧
var backButton=Ti.UI.createButton({
底部：“20dp”，
高度：'40dp'，
宽度：“200dp”
});
//上一个按钮-工具栏
var prevMonth=Ti.UI.createButton({
左：“15dp”，
宽度：“自动”，
高度：“自动”，
标题：“”
});
//月份标题-工具栏
var monthTitle=Ti.UI.createLabel({
宽度：“200dp”，
高度：“24dp”，
textAlign:'中心'，
颜色：“#3a4756”，
字体：{
尺寸：20，
fontWeight:“粗体”
}
});
//工具条
var toolBar=Ti.UI.createView({
顶部：“0dp”，
宽度：“322dp”，
高度：'50dp'，
背景颜色：“#FFFFD800”，
布局：“垂直”
});
//工具栏-包含上一个标题和下一个按钮
var toolBarTitle=Ti.UI.createView({
顶部：“3dp”，
宽度：“322dp”，
高度：“24dp”
});
工具栏标题.添加（上个月）；
工具栏标题。添加（蒙蒂特尔）；
工具栏标题。添加（下个月）；
//工具栏-一天的
var toolBarDays=Ti.UI.createView({
顶部：“2dp”，
宽度：“322dp”，
高度：'22dp'，
布局：“水平”，
左：'-1dp'
});
toolBarDays.sunday=Ti.UI.createLabel({
左：“0dp”，
高度：“20dp”，
文字：'太阳'，
宽度：“46dp”，
textAlign:'中心'，
字体：{
尺寸：12，
fontWeight:“粗体”
},
颜色：“#3a4756”
});
toolBarDays.monday=Ti.UI.createLabel({
左：“0dp”，
高度：“20dp”，
文本：“周一”，
宽度：“46dp”，
textAlign:'中心'，
字体：{
尺寸：12，
fontWeight:“粗体”
},
颜色：“#3a4756”
});
toolBarDays.周二=Ti.UI.createLabel({
左：“0dp”，
高度：“20dp”，
正文：“星期二”，
宽度：“46dp”，
textAlign:'中心'，
字体：{
尺寸：12，
fontWeight:“粗体”
},
颜色：“#3a4756”
});
toolBarDays.周三=Ti.UI.createLabel({
左：“0dp”，
高度：“20dp”，
文本：“Wed”，
宽度：“46dp”，
textAlign:'中心'，
字体：{
尺寸：12，
fontWeight:“粗体”
},
颜色：“#3a4756”
});
toolBarDays.星期四=Ti.UI.createLabel({
左：“0dp”，
高度：“20dp”，
文本：“Thu”，
宽度：“46dp”，
textAlign:'中心'，
字体：{
尺寸：12，
fontWeight:“粗体”
},
颜色：“#3a4756”
});
toolBarDays.friday=Ti.UI.createLabel({
左：“0dp”，
高度：“20dp”，
文本：“星期五”，
宽度：“46dp”，
textAlign:'中心'，
字体：{
尺寸：12，
fontWeight:“粗体”
},
颜色：“#3a4756”
});
toolBarDays.saturday=Ti.UI.createLabel({
左：“0dp”，
高度：“20dp”，
文本：“Sat”，
宽度：“46dp”，
textAlign:'中心'，
字体：{
尺寸：12，
fontWeight:“粗体”
},
颜色：“#3a4756”
});
添加（toolBarDays.sunday）；
添加（toolBarDays.monday）；
添加（toolBarDays.周二）；
toolBarDays.add（toolBarDays.周三）；
添加（toolBarDays.星期四）；
添加（toolBarDays.friday）；
工具栏天。添加（工具栏天。星期六）；
//添加工具栏标题视图和工具栏天数视图
工具栏。添加（工具栏标题）；
工具栏。添加（工具栏天数）；
//创建日视图模板的函数
dayView=功能（e）{
var label=Ti.UI.createLabel({
电流：e.current，
宽度：“46dp”，
高度：'44dp'，
背景颜色：“#ffdcdf”，
文本：e.day，
textAlign:'中心'，
颜色：即颜色，
字体：{
尺寸：20，
fontWeight:“粗体”
}
});
退货标签；
};
monthName=函数（e）{
开关（e）{
案例0：
e=‘一月’；
打破
案例1：
e=‘二月’；
打破
案例2：
e=‘三月’；
打破
案例3：
e=‘四月’；
打破
案例4：
e=‘五月’；
打破
案例5：
e=‘六月’；
打破
案例6：
e＝‘七月’；
打破
案例7：
e=‘八月’；
打破
案例8：
e＝‘九月’；
打破
案例9：
e＝‘十月’；
打破
案例10：
e＝‘十一月’；
打破
案例11：
e＝‘十二月’；
打破
};
返回e；
};
//日历主功能
var calView=函数（a、b、c）{
var nameOfMonth=月份名称（b）；
//创建主日历视图
var mainView=Ti.UI.createView({
布局：“水平”，
宽度：“322dp”，
高度：“自动”，
顶部：“50dp”
});
//定时间
var daysInMonth=32-新日期（a、b、32）.getDate（）；
var dayOfMonth=新日期（a、b、c）.getDate（）；
var dayOfWeek=新日期（a、b、1）.getDay（）；
var daysinastmonth=32-新日期（a，b-1，32）.getDate（）；
var daysinextmonth=（新日期（a、b、daysInMonth）.getDay（））-6；
//设置初始日数
var dayNumber=daysInLastMonth-dayOfWeek+1；
//得到上个月的天数
对于（i=0；idayxtmonth；i--）{
mainView.add（新的日视图({
日期：日数，
颜色：“#8e959f”，
当前：'否'，
月日：“”
}));
dayNumber++；
};
//这是一个新的“clicker”功能，虽然它没有名字了，但它只是一个名字。
mainView.addEventLis
// 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);
});