Vuetifyのカレンダーの内容表示

Vuetifyのカレンダーでカテゴリの表示をやっており、表記の変更方法を探しております。

標準の表示方法

このように表示されている内容で例えばトラベルであれば、
18:00-19:00
Travel

というような形で、
開始時間-終了時間
イベントの内容
＋それ以外の内容

表示させたいと考えております。

余計なプロパティは省略して記載しますと下記のようにすると近いものが出来ることが
他の方の質問で確認して同様にしております。

ts
1<v-calendar
2  :event-name="eventNameFormatter"
3/>
4// 型のエラーがでるのでとりあえずanyを設定
5eventNameFormatter (event: any, timedEvent: any): string {
6  return event.start.time + '-' + event.end.time + '<br>' + event.input.name
7}

ただ、この場合時間が重複して表示されてしまい、これの解消方法が見つかりません。

こちらの解決方法が分かる方ご教授お願い致します。

rubytomato

2020/08/03 01:02

v-calendarコンポーネントのeventsプロパティにイベントオブジェクトの配列を指定していると思いますが、具体的にはどのようなイベントオブジェクトを指定しているのか質問内容に追記ください。

tokada

2020/08/03 01:07

name: string 「Travel」 start: string 「2020-08-02 10:00:00」 end: string 「2020-08-02 10:30:00」 color: string 「#0000ff」 category: string「カテゴリ名」 contents: string「追加の情報」という形です。このような回答であってましたでしょうか。

rubytomato

2020/08/03 01:18

ありがとうございます。もう1点お聞きしたいのですがvuetify.jsのバージョンはいくつでしょうか。

tokada

2020/08/03 01:32 編集

vuetifyのバージョンです。 2.3.7

rubytomato

2020/08/03 01:37

ありがとうございます。回答できるかわかりませんが少し調べて見ようと思います。なお参考にされたという質問の回答を私がしていた場合、それは2.x 系の場合になりますのでその辺りに原因があるかもしれません。

tokada

2020/08/03 01:41

すいません、version最初にみたのがpackage.jsonのものでして、 npmで調べて見たら2.3.7で2系でした

行動規範の内容に同意します

回答1件

ベストアンサー

event-nameプロパティで期待通りの結果にならない理由

v-calendarコンポーネントのevent-nameプロパティに指定するファンクションでイベント名にイベント時間が重複して表示される件ですが、この原因はVuetify.jsが2.2.xから2.3.xへバージョンアップした際にv-calendarコンポーネントに変更が加えられたためです。

ソースコードにどのような変更が加えられたかご興味がある場合は、下記に当該ソースコードのリンクを提示しますのでご覧ください。
genEvent関数周りがイベント名の表示に関する処理です。

eventスロットを使う方法

v-calendarコンポーネントのeventスロットで、イベント名の表示方法をカスタマイズできます。
たとえば、カレンダーに

開始時間 - 終了時間
イベント名
【それ以外の内容】

のようにイベントを表記したい場合

下記のようなスロットを記述することで対応できます。
eventスロットにどのようなプロパティが渡されるかはオフィシャルドキュメントのAPIに記載されています。

vue
1<v-calendar ...省略... >
2  <template v-slot:event="props">
3    <div class="pl-1">
4      {{ props.eventParsed.start.time }} - {{ props.eventParsed.end.time }}
5      <br />
6      {{ props.event.name }}
7      <br />
8      【{{ props.event.xxxxx }}】
9    </div>
10  </template>
11</v-calendar>

注意点

ただし、この方法には2つ注意点があります。

1つ目

1つ目は、イベントの表示領域（高さ）が、イベントの開始時間－終了時間に関係している点です。
図は日表示のときのカレンダーですが、左側の時間軸にあわせてイベントが表示されていることがわかるとおもいます。

図の4つのイベントはすべて2行表示するようにしていますが、1,2番目のイベントは1行しか表示されていません。（改行以降も出力されているが隠れて見えない）
3番目は2行表示されていますが仮に3行目があった場合、やはり隠れて見えなくなります。（テキストの量に応じて高さが変わらない）
4番目は複数行表示できる余裕がありますが、どれくらいのテキストが表示できるかは事前に計算しておく必要があります。

2つ目

2つ目は、このスロットがカレンダーの表示タイプに関係なく使用される点です。
カレンダーの表示タイプには月表示、週表示、4日表示、日表示、カテゴリー表示がありますが、選択した表示タイプによって、イベントの表示領域が広くなったり狭くなったりします。
なので表示タイプによって、どのような情報を出力するかコントロールする必要があります。

上記の図は日表示のときですが、これを4日表示、週表示にすると下図のように横幅が狭くなります。