Amazon

2012年6月16日土曜日

Titaniumで使えるCalendarモジュール

Titaniumで自分のアプリ用のカレンダーを作りたい場合に使えそうなモジュール

Appcelerator-Calendar-Module
http://www.mountposition.co.jp/blog/?p=227

AGCalendar

https://github.com/Appgutta/AGCalendar
[document]
https://github.com/Appgutta/AGCalendar/blob/master/documentation/index.md

- 頑張って書いてみる
http://qiita.com/items/1398

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);

0 件のコメント:

コメントを投稿

Amazon3