问题标签 [primeng-calendar]

我正在为一个非常奇怪的问题而发疯，我正在使用PrimeNG FullCalendar组件，这个：https ://primefaces.org/primeng/showcase/#/fullcalendar

这是基于Angular FullCalendar组件，这个：https ://fullcalendar.io/

特别是我正在尝试实现一种行为，例如将可拖动事件移动到日历中的最后一个链接。

与链接示例不同，我的可拖动事件有开始时间和结束时间。例如，我想将一个 evet 拖到我日历的特定日期，指定它从07:00开始并在15:00结束（这是因为我的日历代表一个工作班次日历，其中将人员放在特定的时间范围内工作）。

在这里你可以找到我的整个代码：https ://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

好的，正如您在应用程序组件视图中看到的那样：

左侧是<app-people-list>显示事件\人员列表的组件，我可以将其拖到我的日历中以进行特定的工作班次。

在右侧，我有<app-fullcalendar>渲染我的日历的组件。

进入PeopleListComponent类（app-people-list组件的控制器）我有这个ngAfterViewInit方法：

如您所见，它正在创建一个Draggable对象，用于将我列表中的事件\人员拖到日历中。目前它正在返回一个像这样的对象：

我把人\事件的标题放在哪里（它工作正常）。然后我把（现在它是静态的，然后我将它变成动态的）startTime那个是事件的开始时间（例如：我将人\事件拖到特定的一天，这意味着这个事件必须开始于事件被拖动当天的 18:00）以及duration事件在开始时间后 8 小时结束的含义。

好的，在这种情况下，它似乎工作“很好”，事实上，当我将一个人\事件拖到它出现在日历中的特定日期时，这里是一个截图：

例如，在上一个屏幕截图中，我将PERSONA 2事件拖到日期为 2017 年 2 月 22 日的那一天，它就在这里（其他事件来自我的代码中定义的静态事件数组）

注意到的第一个奇怪的事情是：我希望因此事件以指示开始时间的内容开始（至于 2 月 9 日的事件，以4p开始，表示该事件从该特定日期的 16:00 开始）。

好的，那么非常奇怪的事情：如果我将返回的事件对象的startTime属性更改为小于16:00的值，它就不再起作用了！！！

例如，使用：

这意味着：活动从日历中所选日期的下午 4 点开始，并在同一天的 00:00 结束。当我将此事件拖到日历中时，该事件不会出现在日历上。没有渲染！！！它发生在startTime之前的所有 17:00，我不明白为什么。进入 JavaScript 控制台，我没有收到任何错误消息。

为了完整起见，进入FullcalendarComponent类（控制完整日历组件的类）我有：

如您所见，它包含此方法：

接收人员列表组件发出的上一个事件并将此事件放入数组中（调用服务），它工作正常。

我真的不明白我的代码可能有什么问题，以及为什么使用startTime值<“17:00”它不起作用。

怎么了？我错过了什么？如何更改我的代码来解决这个问题？

我正在使用PrimeNG Full Calendar组件开发一个 Angular 应用程序，这个：https ://primefaces.org/primeng/showcase/#/fullcalendar

这是基于Angular FullCalendar组件，这个：https ://fullcalendar.io/

在这里你可以找到我的整个代码：https ://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

我有一个疑问，我没有找到阅读官方文档的答案。

如果我有一个在特定日期开始的事件并且爬过午夜我会得到这样的东西：如你所见，我突出显示了一个从 2017 年 2 月 27 日23:00开始的 8 小时事件，该事件的持续时间为8 小时，所以它也在 2 月 28 日显示。这种行为是绝对正确的，但在我的情况下，我希望事件仅显示在开始日的单元格中。这是因为这个日历是一个工作轮班日历，所有单元格将从 23:00 开始轮班，所以我认为可视化可以更好地仅在起始日显示事件，避免它以图形方式扩展到第二天。

是否有可能以某种方式实现这种行为？

为了完整起见，这是显示日历的组件视图的代码：

这是控制该组件的类的代码：

我正在使用 PrimeNG Full Calendar 组件开发一个 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处理包含从外部组件接收事件的日历的组件：

我发现添加此选项eventColor: '#378006'，我可以更改默认事件背景颜色...但是这样它是静态的，我无法为不同类型的事件处理不同的颜色（我只是更改默认值所有事件的颜色，所以它不适合我的用例）。

我有这个方法用于修改拖到我的日历中的事件：

我在想它可能是放置这种行为的一个很好的候选位置......正如你在我的代码中看到的那样，我尝试使用某种方法来设置事件颜色，但它不起作用......我仍然获得呈现我的页面时的默认事件颜色。

为什么？怎么了？我错过了什么？如何获得所需的行为并通过代码设置事件颜色？

我正在使用 PrimeNG Full Calendar 组件开发一个 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() 方法中删除了这一行：

这是因为，如果启用，上午和下午的事件也将具有相同的复制行为。

问题是什么？我的代码有什么问题？我该如何尝试修复它？

我使用了 PrimeNG 的日历组件，我使用timeOnly属性仅显示时间，我有一个类似12:10.

我想将此字符串设置到日历中，是否有必要将其转换为日期还是有其他方法可以做到这一点？

我有一个p-calendar默认情况下日期时间将在文本框中显示为当前日期+1。

我想要实现的是，我需要使用更新的日期时间来更新文本框，即文本框仅基于下拉选项显示。

因此，当下拉选项更改时，文本框将被隐藏并根据下拉值再次启用。我尝试使用设置间隔选项，它清楚地为我提供了更新的日期时间，但现在我面临的是，一旦我设置了间隔，我将无法在下个月导航。

我还需要禁用今天之前的过去日期[完成]。

打字稿代码：

HTML 代码：

不知道哪里出了问题，但如果我删除设置的间隔代码，我可以导航到下个月。

嗨，我正在使用 angular 版本 8 的primeng 库。我正在使用 3 个下拉菜单和 1 个日历。并且仅在移动视图上的 iOS 设备上当我从下拉列表中选择一个选项或单击以选择日历上的一天时，它会放大。我使用 chrome、safari 和 firefox 对其进行了测试->所有浏览器上的相同问题

视频链接

在按钮上单击一个 NgbModal 模态框将被加载。模态具有 ag-grid-angular 组件。

此网格有一个日期选择器列。我正在使用primeng日期选择器。日历显示的 HTML 代码。

这里的问题是日期选择器日历总是隐藏在网格内。像这样。我该如何解决这个问题。

我正在使用 PrimeNG 开发一个 Angular 项目，我发现以下问题试图将正确的 CSS 样式提供给我的页面中的p-calendar组件。

基本上在我的 HTML 代码中，我有这样的东西：

如您所见，第二个标签包含此p-calendar组件：

试图为这个组件设置样式我快疯了。与其他以下输入标签不同，我无法正确设置样式（基本上是宽度和字体大小）。

我试图这样做：https ://forum.primefaces.org/viewtopic.php?t=2610

所以在我的 CSS 代码中我放了：

我还尝试在p-calendar组件标签上设置styleClass="dateTimeField"，然后设置：

但它仍然无法正常工作，我得到了这个错误的可视化：

如您所见，它太大了，它没有采用我的 CSS 设置。奇怪的是，如果使用 Chrome 工具，我可以通过以下方式设置正确的宽度：

但是如果我尝试将此 CSS 设置复制并粘贴到我的 Angular 组件的 CSS 文件中，仍然无法正常工作。

我该如何尝试解决此问题？

我使用 PrimeNG 日历组件发现以下问题。

在我的 Angular 组件的 HTML 视图中，我定义了这个 PrimeNG 组件标签：

这应该查看包含在由orderDetail.dettaglio_ordine.data_inserimento标识的 JSON 对象字段中的日期。该字段包含以下值：2020-08-08"

事实上，在我的 JSON 中，我有：

问题在于，以这种方式执行此日期不会显示在呈现的空表单中。

为什么？怎么了？我错过了什么？我该如何解决这个问题？