今回のTipsでは、Cobos4i（SmartPad4i）の日付入力項目で表示されるカレンダーについて、表示・非表示（終了）の挙動を JavaScript でカスタマイズする方法を、3 つのパターンに分けてご紹介します。あわせて、日付セルや文字サイズを CSS で大きくする方法もご紹介します。
はじめに
Cobos4i の日付入力項目では、カレンダーを表示して日付を選択できます。標準の動作では、カレンダーの枠外をクリックするとカレンダーが閉じます。
しかし業務の運用によっては、「日付を選ぶまでカレンダーを表示したままにしたい」「別の入力項目へ移ったときだけ閉じたい」といったご要望をいただくことがあります。
本記事では、お客様からいただいたお問い合わせを基に、Cobos4i のカレンダーの表示・非表示（終了）の挙動をカスタマイズする方法をご紹介します。あわせて、タッチ操作などでも日付を選びやすくなるよう、カレンダーの日付セル（クリック可能エリア）や文字サイズを CSS で大きくする方法もご紹介します。
前提条件
- Cobos4i アプリケーションの JavaScript ファイル・CSS ファイルを編集できる環境であること
- JavaScript および CSS の基本的な知識があること
- 本記事のカスタマイズは、Cobos4i の既存機能（SP4i オブジェクト）の関数を上書きして実装します
カスタマイズコードの適用方法
各パターンのコードは、次の手順で適用します。
手順1. カスタマイズ用のコードを追加するファイルを開きます。対象画面で共通して読み込まれる JS ファイル、または次の Cobos4i の JS ファイルのいずれかを使用します。
[DocumentRoot]\cobos4i\exec\sp4iapp.min.js手順2. ファイルの最下部に、「カスタマイズパターン別の実装例」から目的に合うコードを追加して保存します。
手順3. ブラウザのキャッシュをクリアするか、開発者ツール（F12）で [キャッシュを無効化] を有効にした状態で対象画面を開き、カレンダーの動作を確認します。
※ コードを追加した後も、ブラウザに古い JS ファイルがキャッシュされていると変更が反映されない場合があります。動作確認の際は必ずキャッシュ対策を行ってください。
カスタマイズパターン別の実装例
パターンA：他の入力項目をクリックしたときだけカレンダーを閉じる
カレンダーの枠外をクリックしてもすぐには閉じず、別の入力欄（input）やコンボボックス（select）、テキストエリア（textarea）を選択・操作したタイミングでカレンダーを終了させる設定です。SP4i.doHide を上書きし、クリックされた要素が入力項目の場合のみ endCalendar を呼び出します。
※このコードは「Click on icon」を使用する場合にはご使用いただけません。
// 2026-09-24 Customize
SP4i.doHide = function(e) {
let x = null;
if (x = this.Date) {
const tag = event.target.tagName.toLowerCase();
if (['input', 'select', 'textarea'].includes(tag)) {
x.endCalendar(e);
}
}
if (x = this.Gen) {
x.RGHideBox();
}
if (x = this.Help) {
x.hide();
}
};パターンB：日付が選択されるまでカレンダーを表示し続ける
枠外クリック等による非表示処理（endCalendar の呼び出し）を SP4i.doHide から除外することで、日付が選択されるまでカレンダーを表示し続ける設定です。
// 2026-09-24 Customize
SP4i.doHide = function(e) {
let x = null;
if (x = this.Gen) {
x.RGHideBox();
}
if (x = this.Help) {
x.hide();
}
};パターンC：カレンダー内の日付以外をクリックしても終了しないようにする
SP4i.Date.getCalendar を上書きし、カレンダーオブジェクトの onclick イベントを解除（null を設定）することで、カレンダー内の日付以外の要素をクリックした際にカレンダーが終了しないようにする設定です。元の getCalendar の処理は apply で呼び出したうえで、その後に onclick を解除しています。
// 2026-10-13
const getCalendar_origin = SP4i.Date.getCalendar;
SP4i.Date.getCalendar = function() {
const retobj = getCalendar_origin.apply(this, arguments);
if (SP4i.Date.CALNDR) {
SP4i.Date.CALNDR.onclick = null;
}
return retobj;
};パターンの比較
本記事で紹介した 3 つのパターンの違いは次のとおりです。
| パターン | 変更される挙動 | 上書きする関数 |
|---|---|---|
| A | カレンダーの枠外をクリックしても閉じず、他の入力項目（input / select / textarea）をクリックしたときに閉じる | SP4i.doHide |
| B | 枠外クリック等では閉じず、日付が選択されるまでカレンダーを表示し続ける | SP4i.doHide |
| C | カレンダー内の日付以外の要素をクリックしてもカレンダーが終了しない | SP4i.Date.getCalendar |
カレンダーの日付セル・文字サイズを大きくする
カレンダーの表示・非表示の挙動に加えて、日付セル（クリック可能エリア）や日付の文字サイズを CSS で大きく調整できます。日付が押しにくい、文字が小さく読みにくいといった場合にお試しください。
CSS の設定例
プロジェクトで読み込まれている共通 CSS ファイルに、次の記述を追加します。
/* カレンダーの日付セル（マス目）のサイズと文字サイズ変更 */
div.CA_FRM table.CA_LIB2 td {
padding: 8px 12px; /* セルの余白を広げてクリック可能エリアを拡大 */
font-size: 14pt; /* 日付の文字サイズを大きく変更 */
min-width: 35px; /* セルの最小幅 */
height: 35px; /* セルの高さ */
text-align: center;
vertical-align: middle;
}
/* カレンダー全体の外枠サイズ自動調整（崩れ防止） */
div.CA_FRM {
width: auto !important;
height: auto !important;
}
/* 曜日ヘッダー部分のフォントサイズ・余白調整（必要に応じて） */
div.CA_FRM table.CA_LIB td,
div.CA_FRM table.CA_LIB2 th {
font-size: 11pt;
padding: 6px 0;
}日付セルのサイズを大きくするとカレンダー全体も大きくなるため、外枠（div.CA_FRM）の幅・高さを auto にして表示崩れを防いでいます。曜日ヘッダー部分の調整は、必要に応じて追加してください。
主な調整項目
各値は、利用する端末や画面サイズに合わせて調整してください。主な調整項目は次のとおりです。
| 設定項目 | CSS プロパティ | 説明 |
|---|---|---|
| クリック範囲 | padding | 内側の余白を増やすことで、日付の押しやすさ（クリック可能エリア）が向上します。 |
| 文字の大きさ | font-size | 日付の数字を大きく表示します。 |
| マスの大きさ | min-width / height | 日付 1 日あたりの縦横サイズを指定します。 |
補足・注意事項
- いずれのパターンも、Cobos4i の既存機能（SP4i オブジェクト）の関数を上書きして実装しています。
- パターンA とパターンB はどちらも SP4i.doHide を上書きするため、同時には適用できません。後から読み込まれた定義が有効になりますので、どちらか一方を選んで追加してください。
- ファイル修正後は、古い JS ファイル・CSS ファイルがブラウザに保持されている可能性があります。キャッシュのクリア、または開発者ツールでのキャッシュ無効化を行ったうえで動作を確認してください。
- コードの先頭に日付や「Customize」などのコメントを残しておくと、後からカスタマイズ箇所を見つけやすくなります。
おわりに
Cobos4i のカレンダーは、SP4i オブジェクトの関数を上書きすることで、表示・非表示（終了）のタイミングを運用に合わせて調整できます。また、CSS を追加することで日付セルや文字の大きさも変更できます。いずれも数行のコードを追加するだけで適用できますので、カレンダーの操作性についてご要望がある場合はぜひお試しください。