CODEWITHSUNDEEP
angularfullcalendar
AGoranov
AGoranov

Reputation: 2244

Add Icon to each day in FullCalendar Angular

I have a FullCalendar and I want to add icons to each day. Please note that I have already done research on the issue, including these answers on SO:

  1. this Issue is that there does not seem to be a dayRender method.

  2. this Works good if the events are single day. Does not work for multi-day events

  3. this Same problem as in 1.

  4. I have checked the Documentation of FullCalendar/Angular and the given examples

Either the method dayRender does not exists or I am not able to call it correctly.

What I am currently doing:

 <full-calendar ... (dayRender)="dayRender(date, cell)"></full-calendar>

Please note that:

  1. I have only posted the relevant parts
  2. I want to add icons to each day
  3. I want to make them clickable

Upvotes: 0

Views: 1077

Answers (1)

AGoranov
AGoranov

Reputation: 2244

This answer only solves 2.. I am still unable to make the icons clickable.

To achieve this functionality you need to add the event listeners like this:

(dayRender)="dayRender($event)"

Then inside of your dayRender function, you receive an object with the following properties: date (of type Date), el (which is the specific element) and view1 (of type TimeGridView).

To add an icon to each day you need something like this:

dayRender(dayToBeRendered) {
  const imgElement: HTMLElement = document.createElement('img');
  // add the correct attributes to your img element
  dayToBeRendered.el.appendChild(divElement);
}

Upvotes: 1

Related Questions