求推荐Angular 5中支持点击日期块增删改标题的日历组件

Hey there! I’ve worked with Angular 5 extensively, so I can share some reliable options that fit your requirement of adding/editing titles when clicking date blocks.

Top Recommended Components #

1. angular-calendar #

This is one of the most flexible calendar libraries for older Angular versions like 5. It fully supports customizing date cell templates, which is exactly what you need for the click-to-edit functionality.

Here’s a quick breakdown of how to implement the feature:

• Use the dayCellContent template to render custom content inside each date block.
• Bind a click event to the cell that triggers a modal (you can use Angular Material’s modal or a simple custom one) with an input field for the title.
• When the user saves the title, update the calendar’s events array to reflect the change—this will automatically refresh the cell display.

A simplified snippet to give you an idea:

<mwl-calendar
  [view]="'month'"
  [viewDate]="new Date()"
  [events]="calendarEvents"
>
  <ng-template #dayCellContent let-day>
    <div class="date-cell" (click)="openTitleEditor(day)">
      {{ day.events.length ? day.events[0].title : 'Click to add title' }}
    </div>
  </ng-template>
</mwl-calendar>

Just make sure to install a version of angular-calendar that’s compatible with Angular 5—check the package’s peer dependencies on npm to find the right one.

2. ngx-bootstrap Calendar #

If you’re already using Bootstrap in your Angular 5 project, the ngx-bootstrap calendar is a great fit. It’s lightweight and integrates seamlessly with Bootstrap styles.

Like angular-calendar, it lets you override the default date cell template. You can add a click handler to each cell, open an edit form, and update the calendar data once the title is saved. The official docs for the Angular 5-compatible version have examples of custom cell rendering to get you started.

Bonus: Custom Lightweight Option #

If you don’t want to add a full library, you could build a simple calendar using moment.js (a go-to date library for Angular 5) to handle date calculations. Render each date as a clickable div, and wire up a modal for editing titles. This gives you full control but requires more manual work.

Whichever option you pick, the core idea is leveraging custom templates to add click interactions and manage the title data in a way that updates the calendar display.

内容的提问来源于stack exchange，提问作者Preev