KLWPでカレンダーその1:2種類の週間カレンダーを作ってみる

20161113-klwp-1

KLWPを使ってカレンダーを作ってみます。カレンダーと言ってもいろんな種類がありますが、今回は週間カレンダー、7日分のカレンダーです。
週間カレンダーも表示方法がいくつかあると思いますが、「今日を中心に前後3日を含めた7日間」と「今日を含む月曜始まりの7日間」という2種類を作ってみます。

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

今日を中心に前後3日を含めた7日間

20161113-klwp-2

まずこちらが完成形。「今日」は11月13日です。なので13日が中央にきて、その前後3日間が左右に並んでいます。

20161113-klwp-3

今回に限らないのですが、KLWPの「グループ化(並べる)」というのは、こういった複数の要素が規則正しく並ぶものを作る時に非常に便利です。
今回のカレンダーではカレンダー全体を赤枠のグループ化(並べる)で作成しており、その中に1日ごとに青のグループ化(並べる)が7日分あり、その中にそれぞれテキスト2つで日と曜日が収まっています。

今日の表示

20161113-klwp-420161113-klwp-5

1日分の要素は「日」と「曜日」のテキストでできています。まずは「今日」の表示です。
「日」については
$df(dd)$
でOK

「曜日」は英語で表記したいので
$if(df(f)=1,mon,df(f)=2,tue,df(f)=3,wed,df(f)=4,thu,df(f)=5,fri,df(f)=6,sat,sun)$
としました。

20161113-klwp-620161113-klwp-7

ここでポイントですが、「日」も「曜日」もタイプを「幅を固定する」にし、改行が起こらない程度にしておきます。これを揃えておかないと、各曜日で幅がバラバラになってかっこ悪くなってしまいます。

今日より前の日付

20161113-klwp-820161113-klwp-9

次に今日よりも前の日付3日分です。これらについては、日付を表示する$df(dd)$$df(dd, r1d)$と「,r1d」を付けることで1日前のものを表示できます。2日前なら$df(dd, r2d)$です。

曜日の方も同様で、「今日」で書いたものを修正すればOKです。
$if(df(f,r1d)=1,mon,df(f,r1d)=2,tue,df(f,r1d)=3,wed,df(f,r1d)=4,thu,df(f,r1d)=5,fri,df(f,r1d)=6,sat,sun)$

20161113-klwp-1020161113-klwp-12

これで1日前の表示ができたので、3日分作ります。基本的にはコピーして数字を修正するだけです。

今日より後の日付

20161113-klwp-1320161113-klwp-14

続いて今日よりあとの3日間です。これも簡単で、前日までで「,r1d」だったのを「,a1d」に変えます。rからaです。

日:

$df(dd,a1d)$

曜日:

$if(df(f,a1d)=1,mon,df(f,a1d)=2,tue,df(f,a1d)=3,wed,df(f,a1d)=4,thu,df(f,a1d)=5,fri,df(f,a1d)=6,sat,sun)$

完成

20161113-klwp-1520161113-klwp-16

これであとはそれぞれの余白を調整すれば完成です。一応コンポーネント化したものを置いておきますね。

zooper-iconWeek1
制作: orefolder
価格: 無料

ダウンロード

今日を含む月曜始まりの7日間

20161113-klwp-18

次に「今日を含む月曜始まりの7日間」です。こちらは曜日の位置は固定、数字が入れ替わるのも1週間ごとです。

今回のものは、7箇所の表示位置があり、それぞれが「今日の曜日」によって表示位置を変えます。

枠1
MON
枠2
TUE
枠3
WED
枠4
THU
枠5
FRI
枠6
SAT
枠7
SAN
今日の日付 dd ff,a1d ff,a2d ff,a3d ff,a4d ff,a5d ff,a6d
dd,r1d dd ff,a1d ff,a2d ff,a3d ff,a4d ff,a5d
dd,r2d dd,r1d dd ff,a1d ff,a2d ff,a3d ff,a4d
dd,r3d dd,r2d dd,r1d dd ff,a1d ff,a2d ff,a3d
dd,r4d dd,r3d dd,r2d dd,r1d dd ff,a1d ff,a2d
dd,r5d dd,r4d dd,r3d dd,r2d dd,r1d dd ff,a1d
dd,r6d dd,r5d dd,r4d dd,r3d dd,r2d dd,r1d dd

これをそれぞれの枠に設定していけばいいのです。

20161113-klwp-1920161113-klwp-20

枠1:

$if(df(f)=1,df(dd),df(f)=2,df(dd,r1d),df(f)=3,df(dd,r2d),df(f)=4,df(dd,r3d),df(f)=5,df(dd,r4d),df(f)=6,df(dd,r5d),df(dd,r6d))$

枠2:

$if(df(f)=1,df(dd,a1d),df(f)=2,df(dd),df(f)=3,df(dd,r1d),df(f)=4,df(dd,r2d),df(f)=5,df(dd,r3d),df(f)=6,df(dd,r4d),df(dd,r5d))$

枠(曜日)ごとに少しずつズレていくので、コピーして修正ということになります。ちょっと面倒ですね。

20161113-klwp-2120161113-klwp-22

これでまた余白の調整などでとりあえずは完成です。

図形を使って「今日」を示す

20161113-klwp-2320161113-klwp-24

表現の仕方はいくつかありますが、「今日」の日付を図形で囲ってみます。

20161113-klwp-2520161113-klwp-26

それぞれの曜日の枠(グループ化したもの)の幅をテキストのタイプで「幅を固定する」にしておけば、枠ごとの幅が分かります。なのであとは曜日ごとにその幅を移動するように今日を現す図形の位置余白を調整する式を書けばOKです。

こちらもコンポーネント化しているので、詳しく知りたい場合はダウンロードしてどうなっているのか見てみてください。

zooper-iconWeek2
制作: orefolder
価格: 無料

ダウンロード

まとめ

基本的には日付と、その過去未来を表示する方法(a1dとr1d)を使えば、あとはコピペで作業となります。簡単ですね。面倒ですけど。
今回はグループ化で並べてみましたけど、1つ1つバラバラにできるのでレイアウトも自由自在です。今回のものはあくまで基本ということで。

次は月間のカレンダーに挑戦して見たいと思います。これもまた少々ややこしい&実際に作ると面倒なのですが、まぁ勉強ですね。


KLWPの使い方についてはこちらのページにてまとめています。使い方に困ったときなど、こちらのページも参考にしてください。

  • 本記事に記載された内容は記事公開時点のものであり、必ずしも最新の情報とは限りません。記事をご覧いただく際には、最新の情報を確認するようお願いいたします。
OREFOLDERの最新情報をお届けします
author icon
orefolder

OREFOLDER編集長。
1979年静岡県清水市生まれ、現静岡市清水区在住。

様々な巡り合わせから、このサイト1本で生活してる氷河期世代の一人。ガジェットに限らず広く浅く様々なものに興味があります。

スマートフォンは2010年にXperia SO-01Bを買ったのが最初。同時にb-mobile U300で格安SIMも始めました。これまでに数百台のスマホを手にし、格安SIMも常時20種類以上契約しています。

⇨orefolderの記事一覧