Titaniumでmy365風なカレンダーアプリを作る（1）

my365がすごいいい感じだったので、Titaniumで簡略に作れるレベルでパクってみる。
目指してるところは、写真とってカレンダーに表示するってだけの簡単なもの。my365はコミュニケーション、カメラフィルタ、SNS連携など高機能でデザインも良い神アプリなのでここのとは全然違います。

javascriptでカレンダーを実現するスクリプトはここを参考にしました。

今回はカレンダー状にLabelを並べただけ。写真保存、写真挿入とか作って続くかも

＊マジックナンバー多用注意!!

calendar_view.js

var win = Ti.UI.currentWindow;

//今日という日
var now = new Date();
now.setHours(12);
var Y = now.getYear()+1900;
var M = now.getMonth()+1;

//表示している画面の年と月
var whenLabel = Ti.UI.createLabel({
    font:{
        fontFamily:'Helvetica Neue',
        fontSize:25
    },
    textAlign:'center',
    text:Y+"年"+M+"月",
    top:5, left:'auto', height:25, width:'auto'
});
win.add(whenLabel);

//月を戻すボタン
var backMonthButton = Ti.UI.createLabel({
    backgroundColor:"green",
    top:35, left:30, height:25, width:120,
    textAlign:'center',
    text:'back'
});
backMonthButton.addEventListener('click', function(){
    var date = new Date(Y,parseInt(M)-1-1)
    var Y_ = date.getYear()+1900;
    var M_ = date.getMonth()+1;
    whenLabel.text = Y_+"年"+M_+"月";
    cal(date);
});
win.add(backMonthButton);

//月を進めるボタン
var forwardMonthButton = Ti.UI.createLabel({
    backgroundColor:"green",
    top:35, left:170, height:25, width:120,
    textAlign:'center',
    text:'forward'
});
forwardMonthButton.addEventListener('click', function(){
    var date = new Date(Y,parseInt(M)-1+1)
    var Y_ = date.getYear()+1900;
    var M_ = date.getMonth()+1;
    whenLabel.text = Y_+"年"+M_+"月";
    cal(date);
});
win.add(forwardMonthButton);

//ここにカレンダーの各日付を表示。スクロールさせる。
var scrollView = Titanium.UI.createScrollView({
    contentWidth:'auto',
    contentHeight:'auto',
    top:70,
    height:300,
    width:320,
    backgroundColor:'#fff'
});
win.add(scrollView);

//カレンダー表示関数
var cal = function(date){
    var year = date.getFullYear();
    var month = date.getMonth();

    var leap_year=false;
    if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)) leap_year=true;
    var lom = new Array(31,28+leap_year,31,30,31,30,31,31,30,31,30,31);
    var w = new Array("red","gray","gray","gray","gray","gray","blue"); //曜日の見分けは色のみ
    var days=0;
    for (var i=0; i < month; i++) days+=lom[i];
    var week=Math.floor((year*365.2425+days)%7); //その月の開始曜日を取得
    var cols = 0;
    var rows = 0;
    var width = 80;
    var height = 80;
    for(var i=0; i<lom[month]; i++){
        var top = 0 + height * rows;  //各日付の表示位置制御
        var left = 0 + width * cols;
        var calLabel = Ti.UI.createLabel({
            backgroundColor:w[week],
            borderColor:"black",
            top:top, left:left, height:height, width:width
        });
        scrollView.add(calLabel);
        var dayLabel = Ti.UI.createLabel({
            color:'white',
            font:{fontSize:20},
            width:'auto',
            textAlign:'center',
            height:'auto',
            text:i+1
        });
        calLabel.add(dayLabel);
        if(cols != 3){  //各日付は横4列まで
            cols++;
        } else {
            cols = 0;
            rows++;
        }
        if(week != 6){
            week++;
        } else {
            week = 0;
        }
    }
}

cal(now);