How to move the image in the calendar dates?

Question

I am using fullcalendar/react. I have added the events on the calendar with the employee images:

As shown in the picture, for every event there is an employee photo with it. The employee can take leave from start to end date. The bar should be shown on that start date and end date but the I want that the employee image should be shown on the date when employee is on leave. So the image will move between the dates.

In simple terms, I want to move the image between the dates on that bar of the events.

Here is my code:

 function renderEventContent(eventInfo) {
      // console.log("event info")
      // console.log(eventInfo)
      return (
        <div>
         <img  className="rounded-circle"  src = {eventInfo.event.url} width="25" height="25"  />

       {/*   <i>&nbsp;&nbsp;{eventInfo.event.title}</i>*/}

        </div>
      )

 <FullCalendar
 plugins = {[dayGridPlugin]}
     initialView= {"dayGridMonth"}
     headerToolbar={{
        start : "today prev,next", 
        center : "title",
        //end : "dayGridMonth,timeGridWeek,timeGridDay"
        end : "dayGridMonth"
  height={"90vh"}
      dayMaxEvents={true}
      selectable={true}
 eventContent={renderEventContent}
      displayEventTime={false}
      timeZone="GMT+5"
events={events}

    eventDidMount={(info) => {
        return new bootstrap.Popover(info.el, {
            title : info.event.title.split("-")[0],
            placement : "auto",
            trigger : "hover",
            customClass : "popoverStyle",
            content : 
            `<p><strong>${info.event.title}</strong></p>`,
            html :true
        })
     }}

/>

Answer 1

To show an employee image that moves between the start and end dates of an event in the FullCalendar/React application, you'll need to customize the rendering of the event content to include the employee image and adjust its position based on the current date.

First modify the renderEventContent function to include the employee image and calculate its position based on the current date.

function renderEventContent(eventInfo) {
  const { event, timeText, view } = eventInfo;

  // Calculate the position of the employee image based on the current date
  const startDate = event.start;
  const endDate = event.end;
  const currentDate = view.calendar.currentDataManager.currentDate;

  // Calculate the percentage position based on the current date
  const startPosition = (currentDate - startDate) / (endDate - startDate) * 100;

  // Determine whether to show the employee image within the event
  const showImage = currentDate >= startDate && currentDate <= endDate;

  return (
    <div>
      <div className="event-content">
        {showImage && (
          <img
            className="rounded-circle"
            src={event.url}
            alt="Employee"
            width="25"
            height="25"
            style={{ left: `${startPosition}%` }}
          />
        )}
        <i>&nbsp;&nbsp;{event.title}</i>
      </div>
      <div className="event-time">{timeText}</div>
    </div>
  );
}

Then update your FullCalendar component to use the modified renderEventContent function.

<FullCalendar
  // Other props
  eventContent={renderEventContent}
  // Other props
/>

I hope this will be helpful.