問題タブ [primeng-calendar]

私はPrimeNGフルカレンダーコンポーネントを使用してAngularアプリケーションに取り組んでいます。これはhttps://primefaces.org/primeng/showcase/#/fullcalendarです。

これは、Angular FullCalendar コンポーネントに基づいています。これはhttps://fullcalendar.io/です。

ここで私のコード全体を見つけることができます: https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

カレンダーに表示されるイベントの背景色を動的に変更しようとすると、いくつかの問題が発生します。さまざまなイベント情報に基づいて、さまざまなイベントの背景色を使用する必要があります (開始イベント時間、たとえば、07:00 に開始するイベントは緑、15:00 に開始する場合は赤、23 に開始する場合: 00 は青色ですが、このロジックは現時点では重要ではありません)。

私のプロジェクトでは、次のような外部イベントをカレンダーにドラッグしています: https://fullcalendar.io/docs/external-dragging-demo

したがって、私の BitBucket リポジトリでわかるように、この FullcalendarComponent で、外部コンポーネントからイベントを受信するカレンダーを含むコンポーネントを処理しています。

ご覧のとおり、このオブジェクトには、ドラッグ アンド ドロップ イベントをリッスンするeventReceive()メソッドが含まれています。したがって、オブジェクトをリスト イベント コンポーネントからこのカレンダーにドラッグできます。現時点では、次の行をコメントアウトしています。

カレンダーでイベントの重複を避けるため (これについてはすぐに説明します)。したがって、イベントがカレンダーにドラッグされると、このサービス メソッドによってイベントの配列に挿入されます。

ここで、eventDataはBehaviorSubjectとしてサービス クラスに次のように定義されます。

カレンダーにイベントを表示するには、このアプローチを使用しています (代わりに、eventReceiveEvent.event.setAllDay(false, {maintainDuration: true})を使用します。イベントが追加されるたびにこの色の決定を自動的に行うためです。サービスのaddEvent()メソッドによる新しいイベント--> コンポーネントの ngoninit でのサブスクリプションは、更新されたデータを受け取り、正しい色でイベントを表示する背景色を適用します。

わかりました、夜間のユース ケース(時間値が 23 に等しい) を除いて、問題なく動作するようです。

ここに問題を示すプリントスクリーンがあります:

1) MORNING EVENT (07:00 から開始) を挿入すると、次の正しい動作が得られます。

2) AFTERNOON EVENT (15:00 から開始) を挿入すると、次の正しい動作が得られます。

3) ここでNIGHT EVENT (23:00 から) を挿入すると、次のまったく奇妙な動作が発生します。

ご覧のとおり、問題はイベントが重複していることです。特に:

• BLACKバックグラウンド イベントは、ngOnInit() に定義されたサブスクリプション関数に正しく追加されました(これは正しいものです)。

• BLUEバックグラウンド イベント(追加する必要がない) は、次の方法で追加されます。

  /li>

そして、私はその理由を理解できません!!! 投稿の冒頭で、**eventReceive() メソッドから次の行を削除したと述べています。

これは、有効にすると、午前と午後のイベントも同じ複製動作になるためです。

何が問題ですか？コードの何が問題になっていますか? どうすれば修正できますか?

デフォルトではp-calendar、日時が現在の日付+1としてテキストボックスに表示されます。

私が達成しようとしているのは、更新された日時でテキストボックスを更新する必要があるということです。つまり、テキストボックスはドロップダウンオプションに基づいてのみ表示されます。

そのため、ドロップダウン オプションが変更されると、テキスト ボックスが非表示になり、ドロップダウン値に基づいて再び有効になります。間隔の設定オプションを使用してみました。これにより、更新された日時が明確に提供されますが、間隔を設定すると、次の月をナビゲートできなくなります。

また、今日より前の過去の日付を無効にする必要があります [完了]。

Typescript コード :

HTML コード :

どこが間違っているのかわかりませんが、設定された間隔コードを削除すると、次の月に移動できます.

こんにちは、angular バージョン 8 でprimeng ライブラリを使用しています。3 つのドロップダウンと 1 つのカレンダーを使用しています。そして、モバイルビューのiOSデバイスのみドロップダウンからオプションを選択するか、カレンダーでクリックして日を選択すると、ズームインします.chrome、safari、firefoxでテストしました->すべてのブラウザで同じ問題

ビデオへのリンク

ボタンをクリックすると、NgbModal モーダル ボックスがロードされます。モーダルには ag-grid-angular コンポーネントがあります。

このグリッドには日付ピッカー列があります。私はprimeng日付ピッカーを使用しています。カレンダー表示用の HTML コード。

ここでの問題は、日付ピッカーのカレンダーが常にグリッド内に隠されていることです。このような。どうすればこれを解決できますか。

PrimeNG を使用して Angular プロジェクトに取り組んでおり、ページのp-calendarコンポーネントに正しい CSS スタイルを適用しようとすると、次の問題が発生します。

基本的に、HTML コードには次のようなものがあります。

ご覧のとおり、2 番目のタグには次のp-calendarコンポーネントが含まれています。

このコンポーネントのスタイルを設定しようとしています。次の他の入力タグとは異なり、スタイル (基本的には幅とフォント サイズ) を正確に設定できません。

ここに示すようにしようとしていました: https://forum.primefaces.org/viewtopic.php?t=2610

だから私のCSSコードに入れました：

また、p-calendarコンポーネント タグにstyleClass="dateTimeField"を設定してから、次のように設定しようとしました。

しかし、それでも機能せず、この間違った視覚化が得られます:

ご覧のとおり、大きすぎて、私の CSS 設定を使用していません。奇妙なことに、Chrome ツールを使用すると、次の方法で正しい幅を設定できます。

しかし、この CSS 設定をコピーして Angular コンポーネントの CSS ファイルに貼り付けようとすると、まだ機能しません。

この問題を解決するにはどうすればよいですか?