jQuery UI Widgets Forums Scheduler Custom appointment tooltip

This topic contains 7 replies, has 4 voices, and was last updated by  loganstill 4 years, 7 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Custom appointment tooltip #77116

    74bit
    Participant

    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

    Custom appointment tooltip #77121

    Peter Stoev
    Keymaster

    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

    Custom appointment tooltip #96720

    infinitel
    Participant

    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?

    Custom appointment tooltip #96724

    Peter Stoev
    Keymaster

    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

    Custom appointment tooltip #96731

    infinitel
    Participant

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

    Custom appointment tooltip #96743

    Peter Stoev
    Keymaster

    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

    Custom appointment tooltip #96751

    infinitel
    Participant

    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 🙂

    Custom appointment tooltip #97974

    loganstill
    Participant

    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

    • This reply was modified 4 years, 7 months ago by  loganstill.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.