【JavaScript】二次元配列で所属ごとの勤務カレンダーを表示

勤めている職場で、職員の出勤予定を見られるシステムが欲しいという要望がありました。

タイムカードのシステムを入れ替えたところで、入れ替え以前は誰でも予定を確認できたのが、現行のシステムでは管理者が自分の管理範囲内でしか見られないようになってしまったのです。

本来はその方がいいのかもしれませんが、出勤予定を確認してから電話連絡するというやり方を取っていた職員にとっては不便になってしまいました。

Excelだとデータを壊される可能性が高いですし、PDFだとフィルタがかけられないしどの日付の列かがわかりにくいです。そこでHTML上に表示してJavaScriptで所属ごとに表示するカレンダーを作りました。

カレンダーの本体はこちらで、勤務表からJS用のコードを出力するVBAマクロがこちらです。

スポンサーリンク

使い方

こんな感じに表示します。最初は何も表示されていませんが、表示ボタンをクリックすることでスクリプトが実行されます。

リストから所属を選択して実行するとその所属のみに絞り込まれ、「全員」で実行すると全員分表示されます。

この元データはJavaScriptの二次元配列を直接HTMLに入力しています。その方法は使っているシステムによっていろいろですが、今回はExcelの勤務表から出力します。

勤務表のサンプルを作るのに自動作成ツールが役立ちました。所属ごとの勤務表を作成します。

実行ボタンを用意していませんが、「JSコード出力」というマクロを実行します。

マクロのExcelブックと同じディレクトリに「export.txt」が作成されます。その中身は勤務表のデータに従って作成されたJavaScriptの二次元配列です。これをHTMLに入力してやります。

最初の行は1つでOKなので、2つ目以降の所属については2行目からコピペしてください。

コード

HTML

「// ここに出力したデータを入力」のコメントの下に二次元配列を入力します。これがそのままuserAllDataの中身になります。

実行時に選択されている所属のみuserDataに格納して、その配列を元にテーブルを作成します。所属のリストはHTMLで。

奇数行と偶数行で色を分けて見やすくするため、oddRowとevenRowというクラス名を付与し、CSSで色を変えています。

ヘッダー行・列を固定する

地味に苦労したのがスクリプトよりも、スクロール時にヘッダー行と列を固定するCSSの方でした。

https://qiita.com/orangain/items/6268b6528ab33b27f8f2

こちらの記事を参考にしました。stickyっていうプロパティを使います。迷ったのが行と列を固定しても左上のセルだけ動いてしまうところで、左上のセルだけは単独で指定する必要があるんですね。

あと、スクロールした時に罫線が消えてしまったり、そもそもFireFoxでは線が消えてしまうといった場合は、border-collapseプロパティをcollapseで指定していると起きるようで、separeteにしてborder-spacingを0pxにすると綺麗に見えます。

VBA

二次元配列の作り方は環境によって異なりますが、今回はExcelの勤務表を1行ずつテキストデータに出力していく方法を取りました。

コメント

タイトルとURLをコピーしました