Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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);
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away