Fullcalendar display additional details in timegridweek

Question

I am new to Angular and using angular version 15. I want to display additional details like Name and Employee ID in the week view calendar but look like the entire row will not adjust to autofit with the details and also the background.

Image 1 Image 2

Here is my source code text

I hope the background color can fit with the details and the entire row will auto adjust based on the details. Can it work or how to fix this ?

Answer 1

The tables do not seem to be related to each other for them to adjust dynamically, to my knowledge, you can display a tooltip on hover to display the full details, hope it helps!

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 };
  }
}

stackblitz