Custom appointment tooltip

[74bitParticipant]

Good morning,

is it possible to have a custom tooltip for an appointment?

Something like

$('#scheduler').on('appointmentHover', function (event) { ... }

Thank you a lot for your support,
Witold

[Peter StoevKeymaster]

Hi Witold,

See the custom rendering of the appointments demo and implement your own appointments rendering with custom Title Attributes. That is how custom appointment tooltip can be achieved.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[infinitelParticipant]

I tried something like this on the jqxscheduler definition:

renderAppointment: function(data)
	            	{
	            		
                	
                		
                		var from = new Date(data.appointment.from);
                		var formatedFromDate = addZero(from.getUTCHours()) + ':' + addZero(from.getUTCMinutes());
                		var to = new Date(data.appointment.to);
                		var formatedToDate = addZero(to.getUTCHours()) + ':' + addZero(to.getUTCMinutes());
                		
                		data.html = "<p class='appointment' data-toggle='tooltip' data-placement='top auto' data-original-title='" + 
                						data.appointment.subject + "<br>" + 
                						data.appointment.description + "<br>" + 
                						formatedFromDate + " - " + formatedToDate + "<br>" + 
                						data.appointment.id + "'>" +
                								"<span class='subject'>" + data.appointment.subject + "</span/><br>" + 
                								"<span class='description'>" + data.appointment.description + "</span/><br>" +
                								"<span class='id'>" + data.appointment.id + "</span/>" +
                					"</p>";
                		
                		
	            	
	            	return data;
            	}

The result is a bootstrap tooltip on every appointment, but when I change the view to month and go back to week, it doesn’t work anymore. Any idea?

[Peter StoevKeymaster]

Hi infinitel,

It is probably related to an internal logic of the bootstrap’s tooltip widget. When you switch views, the scheduler will re-render the appointments. However, I do not know whether the bootsrap tooltip will understand that and re-initialize itself.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[infinitelParticipant]

Thanks Peter, is there any event where I can get that switch of view?

[Peter StoevKeymaster]

Hi infinitel,

The viewChange event occurs when the Scheduler’s view is changed.

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[infinitelParticipant]

Great Peter, I still need to know more about your great work.

Adding this:

$("#scheduler").on('viewChange', function (event) {

                console.log("viewChange is raised");
                
                $(document).ready(function(){
		    	    $('[data-toggle="tooltip"]').tooltip({html: true});   
		    	});
                
                
            });

Solved the problem 🙂

[loganstillParticipant]

I’m also trying to implement a customized tool-tip when hovering over an appointment.

Angular code:

  renderAppointment: any = function(data) {
    if (data && data.appointment) {
      const originalAppointment = this.appointments.find(
        appointment => appointment.id === data.appointment.id
      );
      let title = '';
      if (originalAppointment.originalData.IsPrivate) {
        data.html = '<b>Private</b>';
        data.background = '#dbdbdb';
        data.borderColor = '#dbdbdb';
        title = 'Private';
      } else {
        data.html = <code><b>${originalAppointment.subject}</b><br></code>;
        data.html += originalAppointment.description
          ? <code>${originalAppointment.description}<br></code>
          : '';
        if (originalAppointment.originalData.IsRecurring) {
          const endingRecurrence =
            originalAppointment.originalData.isLastRecurrrence;
          if (endingRecurrence) {
            data.html +=
              '<br><span style="color: red;">Warning: This recurring appointment series is ending soon</span>' +
              '<br><img src="assets/images/Refreshiconred.png">';
          } else {
            data.html += '<img src="assets/images/Recurrence.png">';
          }
        }
        data.html += originalAppointment.originalData.NoteStatus
          ? <code><span>${originalAppointment.originalData.NoteStatus}</span></code>
          : '';

        title += originalAppointment.originalData.PatientName ? originalAppointment.originalData.PatientName + '-\n' : originalAppointment.subject + '-\n';
        title += originalAppointment.originalData.NoteStatus + '\n';
        const format = 'h:mm tt';
        title += originalAppointment.from.toString(format) + '-';
        title += originalAppointment.to.toString(format) + '\n';
        title += originalAppointment.originalData.PatientPhone && originalAppointment.originalData.PatientPhone !== '0' ? 'Home: ' + originalAppointment.originalData.PatientPhone + '\n' : '' ;
        title += originalAppointment.originalData.PatientMobile && originalAppointment.originalData.PatientMobile !== '0' ? 'Cell: ' + originalAppointment.originalData.PatientMobile + '\n' : '\n' ;
        title += originalAppointment.description;
      }
      data.html = <code><div title=&quot;${title}&quot;></code> + data.html + '</div>';
    }
    data.textColor = '#black';
    return data;
  };

I’m getting a console error when I hover over an appointmentthat says:
Cannot read property ‘indexOf’ of null at b.(anonymous function).getJQXAppointmentByElement

I believe the problem arises in this line: data.html =<div title=”${title}”>+ data.html + '</div>';
Why is there a problem wrapping the rendered appointment’s html in a parent div

[Author]

Posts