LoginSignup
0
2

More than 5 years have passed since last update.

Zabbixの日時入力カレンダーを日曜始まりにする

Last updated at Posted at 2017-10-24

Zabbixの日時入力カレンダーを日曜始まりにする

目的

Zabbixで日時入力する際のカレンダーポップアップが
月曜始まりになっていて使いにくさヘイトが爆発してしまったため
日曜始まりにしてやる。

理由

急なメンテナンス設定依頼をもらったが、入力にミスしてしまう。
(ミスしてしまって設定ができずにメンテナンス日時を変更してしまった。)

対象

確認したバージョンは
Zabbix 3.2 及び 3.4

実装

Zabbixフロントエンドを改造します。
フロントエンドを配置しているパスのjsディレクトリのファイルを触ります。

パッケージでインストールしている場合は
/usr/share/zabbix/js/
に入っているかもしれません。

手動インストールだと
/var/www/html/zabbix/js/
かもしれません。

カレンダーテーブル開始日付計算の変更

0-6 = 日曜~土曜
となっているgetDay()を何やら書き換えているため、やめさせます。
せっかくjavascriptでは日曜始まりになっているのに月曜始まりにしている仕様を
書き換えて使っているコードに対し勝手に憤りを感じています。

ユーザー毎にこの部分が設定できたらいいのですが、
今回はハードコーディングをいじります。

class.calendar.jsファイル内のcreateDaysTabを修正します。
diffはVer3.2ベース

462c462
<               var prev_days = this.cdt.getDay() - 1;
---
>               var prev_days = this.cdt.getDay();
class.calendar.js
        createDaysTab: function() {
                var tbody = this.clndr_days;
                tbody.update('');

                var cur_month = this.cdt.getMonth();

                // make 0 - Monday, not Sunday (as default)
                var prev_days = this.cdt.getDay() - 1;
                if (prev_days < 0) {
                        prev_days = 6;
                }
                if (prev_days > 0) {
                        this.cdt.setTime(this.cdt.getTime() - prev_days * 86400000);
                }

↓↓↓↓↓

class.calendar.js
        createDaysTab: function() {
                var tbody = this.clndr_days;
                tbody.update('');

                var cur_month = this.cdt.getMonth();

                // make 0 - Monday, not Sunday (as default)
                var prev_days = this.cdt.getDay();
                if (prev_days < 0) {
                        prev_days = 6;
                }
                if (prev_days > 0) {
                        this.cdt.setTime(this.cdt.getTime() - prev_days * 86400000);
                }

以下の部分はデッドコードになるので消しても消さなくてもよいかと思います。

if (prev_days < 0) {
        prev_days = 6;
}

カレンダーテーブルヘッダー並び変更

表示用テーブルを生成している部分の
曜日ヘッダーの順番を変更します。

class.calendar.jsファイル内のcalendarcreateを修正します。

577a578,581
>               td.appendChild(document.createTextNode(locale['S_SUNDAY_SHORT_BIG']));
> 
>               var td = document.createElement('th');
>               tr.appendChild(td);
599,602d602
< 
<               var td = document.createElement('th');
<               tr.appendChild(td);
<               td.appendChild(document.createTextNode(locale['S_SUNDAY_SHORT_BIG']));
class.calendar.js
                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_MONDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_TUESDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_WEDNESDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_THURSDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_FRIDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_SATURDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_SUNDAY_SHORT_BIG']));

↓↓↓↓↓

class.calendar.js
                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_SUNDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_MONDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_TUESDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_WEDNESDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_THURSDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_FRIDAY_SHORT_BIG']));

                var td = document.createElement('th');
                tr.appendChild(td);
                td.appendChild(document.createTextNode(locale['S_SATURDAY_SHORT_BIG']));

完成

image.png

image.png

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2