OREFOLDER

Zooper勉強中:1ヶ月のカレンダーを作る

なにやら2chのZooperスレではカレンダーのことで盛り上がってました。
彼らが作ろうとしているカレンダーは次の月も表示できたり、Gooleカレンダーの予定があったら表示できたりと、ちょっと高度なようです。正直、私にはよくわからなかったので読み飛ばしてました。

とりあえず、元になっているのはここにあるカレンダーとそのスキン…なんでしょうか。

  • 本記事は広告およびアフィリエイトプログラムによる収益を得ています。

やってみた

たぶんアプローチの仕方は違うのですが、私も作ってみました。

その月の月間カレンダーが表示され、当日は背景みたいのが付きます。


全体的なモジュール構成はこんな感じです。

Rectが当日の背景
RichTextで曜日ごとに数字を表示
もう1つRichTextで一番上の日付表示です。これは、まぁ無くてもいいですけど。


1つのリッチテキストで1つの曜日分を縦に並べてます。

1つの曜日ごとの日付群


このリッチテキストの中身はこんなふうになってます。

Tu
$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=3?
7
14
21
28$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=4?
6
13
20
27$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=5?
5
12
19
26$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=6?
4
11
18
25$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=0&Dl#=31?
3
10
17
24
31$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=0&Dl#!=31?
3
10
17
24$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=1&Dl#>29?2
9
16
23
30$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=1&Dl#28?1
8
15
22
29
$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=2&Dl#

えーっと…ですね、まず「その月の最初の日が何曜日か」というのを調べました。以下のサイトを参考にしました。

このサイトによると

1日の曜日=(今日の曜日+8-今日の日付+7×(今日の日付を7で割った正数))を7で割った剰り

と表すことができるそうです。
これを参考に
(#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)
で1日の曜日を数字化しました。
そして1日が月曜日の場合は…と場合分けして、その月の火曜日の日付を表示しています。

29-31日の、月によって表示されるかどうか変わるものに関しては、Zooperには#Dl#という「その月の日数」というものがあるので、これを使ってまた場合分けしています。

当日の日付に付いてくるRect


Rectで当日の日付に背景を作っています。
RectのAdvanced Parametersで、[ox][/ox][oy][/oy]を使って移動させています。
[oy]$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=0&Df#!=1?(63+(22*#DW#))$
$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=0&Df#=1?(42+(22*#DW#))$
$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)!=0&Df#!=1?(63+(22*(#DW#-1)))$
$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)!=0&Df#=1?(41+(22*(#DW#-1)))$[/oy]
[ox]$#Df#!=1?(5+((#Df#-1)*40)):285$[/ox]

今回作ったカレンダーは月曜始まりとなっていますが、Zooperの#Df#は日曜が1となっており、また#DW#も日曜始まりで数えられます。これがなかなかクセモノです。

なので「日曜始まりの月で、今日が日曜日以外」「日曜始まりの月で、今日が日曜日」「日曜始まりの月以外で、今日が日曜日以外」「日曜始まりの月以外で、今日が日曜日」という4パターンにわけて数字を出し[oy][/oy]でまとめて囲っています。(自分がわかりやすいようにパターンごとに改行を入れていますが、無くても大丈夫です。)

[ox][/ox]は今日が日曜日かそれ以外かで場合分けしています。

ダウンロード

一応、このスキンは以下からダウンロードすることができます。よかったらどうぞ。
http://ux.getuploader.com/orefolder/download/164/calendar2.zw

まとめ

けっこう勢いで作ったので、どこか穴があるかもしれません。
また、フォントの大きさなどを変えると、いろいろ数値の微調整が必要になってきます。なので簡単に自分用にカスタマイズすることはできないかもしれませんが、まぁこんな感じで作れるよ、ということで。

モバイルバージョンを終了