全日历在时间网格周中显示更多详细信息

Question

我是 Angular 新手，正在使用 Angular 版本 15。我想在周视图日历中显示其他详细信息，例如姓名和员工 ID，但看起来整行不会根据详细信息和背景进行自动调整。

这是我的源代码 文字

我希望背景颜色能够贴合细节，并且整行会根据细节自动调整。它可以工作或者如何解决这个问题吗？

Answer 1

这些表格似乎没有相互关联，无法动态调整，据我所知，您可以在悬停时显示工具提示以显示完整的详细信息，希望它有所帮助！

CSS

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  width: 150px;
  text-align: center;
  border-radius: 6px;
  padding: 10px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.event-details {
  font-size: 14px;
}

ts

import { Component } from '@angular/core';
import {
  CalendarOptions,
  EventInput,
  EventContentArg,
} from '@fullcalendar/core'; // useful for typechecking
import timeGridPlugin from '@fullcalendar/timegrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  calendarOptions: CalendarOptions = {
    plugins: [timeGridPlugin],
    initialView: 'timeGridWeek',
    weekends: false,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,timeGridDay',
    },
    slotMinTime: '08:00',
    slotMaxTime: '18:00',
    allDaySlot: false,
    slotEventOverlap: false,
    height: 'auto',

    events: this.mockEvents(),
    eventContent: this.customEventContent.bind(this), // Custom function to render event content
    slotLabelFormat: { hour: 'numeric', minute: '2-digit' }, // Display time for each slot
  };

  private mockEvents(): EventInput[] {
    return [
      {
        start: '2024-01-29T10:00:00',
        end: '2024-01-29T11:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      {
        start: '2024-01-30T14:00:00',
        end: '2024-01-30T15:00:00',
        name: 'Jane Doe',
        employeeId: '67890',
      },
      {
        start: '2024-01-31T12:00:00',
        end: '2024-01-31T12:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      // Add more mock events as needed
    ];
  }

  private customEventContent(arg: EventContentArg) {
    const eventInfo = arg.event.extendedProps;
    const dummy =
      '<div class="event-details">' +
      '<div>Name: ' +
      eventInfo['name'] +
      '</div>' +
      '<div>Employee ID: ' +
      eventInfo['employeeId'] +
      '</div>' +
      '<div>Time: ' +
      arg.timeText +
      '</div>' +
      '</div>';

    const details = `<div class="event-details tooltip" style="font-size: 14px;cursor: pointer ;text-align: center"><div>${eventInfo['name']}
    
  <span class="tooltiptext">${dummy}</span>
    </div>`;

    return { html: details };
  }
}

堆栈闪电战