如何将日历组件插入 Angular 2 应用程序？

Posted 2023-02-22

【中文标题】如何将日历组件插入 Angular 2 应用程序？

【英文标题】：How can I insert a calendar component into an Angular 2 application?

【发布时间】：2018-01-19 15:45:09

【问题描述】：

我是 Angular 2 的新手，我有一个疑问：我只需将日历插入到用户可以添加事件的页面中。

类似这样的：https://angular-material-calendar.bradb.net/

我不明白这个 angular material calendar 项目是用于 Angular 2 还是用于旧的 AngularJS。

我也不知道它是否是一个好的组件，或者是否存在更好的东西。

你对我完成这项任务有什么建议？

EDIT-1：我还发现了这个PrimeNG日历组件：https://www.primefaces.org/primeng/#/schedule

可能是一个想法，还是我为我的应用增加了另一层复杂性？

【问题讨论】：

这是 angularjs ( 1.x )

@brijmcq 好的，我在关于 PrimeNG 的原始帖子末尾添加了一个编辑

插入没问题，但你应该知道你必须将事件存储在某个地方。您是否已经在项目中使用数据库？哦，你搜索的是 Angular 1。如果它命名为 angularjs（它是 Angular 1.x）。

@Doomenik 我主要是一名 Java 后端开发人员。我正在研究 Angular 2 (ops...Angular 4)，因为我想做一些实验。 REST API 的后端对我来说不是问题

完美，您可以使用github.com/mattlewis92/angular-calendar，但还有更多。这对你来说很容易，角度最前端的东西。

【参考方案1】：

我请求使用 angular-calendar ，参考这个 npm https://www.npmjs.com/package/angular-calendar

【参考方案2】：

这是来自完整日历的component。你没有包括你的用例，但我认为 ng2-fullcalendar 可能有你需要的一切。

PrimeNG 也不错，也是基于全日历的。

我认为这是必要的复杂性，因为实现调度程序可能很困难（至少对我而言）

【讨论】：

这对我来说似乎很好。唯一的问题是：我可以简单地选择一天并在特定的一天用鼠标单击来插入一个事件吗？

如果是这样的话，PrimeNG 就有这个功能。用ng2-fullcalendar，恐怕需要自己实现

是的，PrimeNG 似乎对我来说非常好。只有最后一个疑问。使用 PrimeNG，您认为我可以更新它是否会在预定事件中添加一些其他信息？ （例如描述，而不仅仅是事件名称）

是的，这是可能的。但是你可能需要弄脏你的手。您可以查看源代码。附加信息fullcalendar.io/docs/event_data/Event_Object, github.com/primefaces/primeng/tree/master/src/app/showcase/…