こんにちは。
お世話になります。
kViewerのカレンダービューを利用した予約システムを作成しています。
タイトルのとおり、仕様上表示する必要のない土曜日・日曜日の列を非表示にしたいと考えています。
特にスマートフォンでの利用者が多い想定でして、カレンダービューをスマホ表示にすると選択できるレコードの表示幅が狭くなってしまうため、これを大きく表示できるようにするのが目的です。
どのように設定すればよいでしょうか。ご教示願います。
こんにちは。
お世話になります。
kViewerのカレンダービューを利用した予約システムを作成しています。
タイトルのとおり、仕様上表示する必要のない土曜日・日曜日の列を非表示にしたいと考えています。
特にスマートフォンでの利用者が多い想定でして、カレンダービューをスマホ表示にすると選択できるレコードの表示幅が狭くなってしまうため、これを大きく表示できるようにするのが目的です。
どのように設定すればよいでしょうか。ご教示願います。
オオタニショウゴさん
こんにちは。
CSSでできるような気がします。
ブラウザのデベロッパーツールでHTMLを確認ください。
土曜日と日曜日の列(あるいは日付セル)に特定のclassが付いているのではないかと思います。
そのclassを持つ要素に対して
display: none;
を当てれば消せると思います。
実環境を確認せずに回答してますので、誤ってたらすみません。
koichiさん
こんにちは。
コメントありがとうございます。
ご教示いただいた内容を参考に、土曜日・日曜日のclassを確認してみました。
後段、お見込みのとおり、日付セルにclassがついていました。
月表示・月曜日始まりのカレンダー上で、
2023年2月の土日を非表示にしたいので確認してみたところ、
2023年2月4日(土)のclassは、
.cv-day dow6 d2023-02-04 d02-04 d04 instace1 future
となっています。(日曜日は “dow0” で、5日のため"05")
デベロッパーツール上でこのclassに対して、
(変更前)display:flex;
(変更後)display:none;
としてみたところ、すべての日付セルが非表示となってしまいました。
他の類似するclassに対しても同様に試してみましたが、
「土曜日だけ」「日曜日だけ」非表示にすることはできませんでした。
個別の日付ごとに非表示にする方法があるのか、別に列のclassがあるのか特定できないです。
ユーザビリティに関する内容のため、対応必須ではないのですが何とかしたいな、と思っております。
また、参考情報があればご教示いただけると幸いです。
ご回答が遅くなり申し訳ありません。
既に解決されたかもしれませんが備忘録で残します。
日曜日は「.dow0」、土曜日は「.dow6」というclassがついています。
これらを「display: none;」で非表示にします。
.dow0 {
display: none;
}
.dow6 {
display: none;
}
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。