Search code examples
angularfullcalendartooltip

Can we remove the time and date info from the tooltip generated on hover over the event in fullcalendar

enter image description here

here I want to remove the time and date info from the tooltip, how can we do that?

The tooltip comes in on hover over the fullcalendar on the events on a perticular day. so i just want to display the information of the event not the time and date info along with it .

below is the code - 

  ngOnInit() {
    this.calendarTitle = this.calendarInfo.Name;  
    this.calendarTitleJql = this.calendarInfo.jql;
    // if (this.calendarData[0]) {
    //   this.eventField = Object.keys(this.calendarData[0])[6];
    // }

    this.eventsInfo = JSON.parse(JSON.stringify(this.calendarData).split(this.eventField).join('eventDate'));

    this.events = this.eventsInfo.map(function (_ref) {
      var Status = _ref.Status,
        eventDate = _ref.eventDate,
        Created = _ref.Created,
       Key = _ref.Key;
      return { title: Status, start: eventDate, id: Key };
    });


  }

  isloading(e) {
    console.log('loading');
  }

  handleEventClick(e) {
    this.userService.showTicket(e.calEvent.id);
  }

  calendarTitleClick() {
    this.userService.search(this.calendarTitleJql);
  }

  loadEvents(e) {

    if (this) {
      let month = e.view.start._d.getMonth() + 2;
      let year = e.view.start._d.getFullYear();

      if (month == '13') {
        month = 1;
        year = year + 1;
      }





        });

        this.events = this.eventsData;
      });
    }
  }

  onEventMouseover({calEvent:data,jsEvent:event,view}){
    const el = event.currentTarget;
    var coord = el.getBoundingClientRect();
    if(this.timeoutId) {
      clearTimeout(this.timeoutId)
    }

    this.hoveredEventData = { 
      event: data,
      position: {
        top: coord.top - 80 ,
        left: coord.left + el.offsetWidth - 350 
      },
    };
  }

  onEventMouseout({ calEvent: data, jsEvent: event, view }) {
    {
      this.timeoutId = setTimeout(() => this.hoveredEventData = null, 3000);
    } 
  }

html -

<div class="gadget-body">
   <p-schedule [events]="events" 

   </p-schedule>
  </div>
</div>

<div *ngIf="hoveredEventData" class="event-tooltip"
  [style.top.px]="hoveredEventData.position.top"
  [style.left.px]="hoveredEventData.position.left">
  {{ hoveredEventData.event.title }}
  {{ hoveredEventData.event.start }}
</div>

so here i am confused where to edit code so in tooltip the time should not show up and also in tooltip the wwc-414 key should be in bold , how can i do that.

Solution

  • Simply remove {{ hoveredEventData.event.start }} from the <div *ngIf="hoveredEventData" section and the date will no longer be shown in the tooltip.