Tooltip in FullCalendar

Question

I am trying to make a tooltip in my calendar, the calendar is working properly but I want to show more details of the patient, like Description of patient on mouseover. I have no idea how to do it? Can some one help me out?

ref link(https://fullcalendar.io/)

This is what I did

 <div id='calendar'></div>

Javascript(ajax)

Data take from dynamic

<link href='jscss/fullcalendar.min.css' rel='stylesheet' />
    <link href='jscss/fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <script src='lib/moment.min.js'></script>
    <script src='lib/jquery.min.js'></script>
    <script src='jscss/fullcalendar.min.js'></script>
    <script src='jscss/locale-all.js'></script>
        <script>
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Scheduler.aspx/GetEvents",
                    dataType: "json",
                    success: function (data) {
                        var initialLocaleCode = 'en';
                        var myJsonString = data.d;
                        $('#calendar').fullCalendar({
                            header: {
                                left: 'prev,next today',
                                center: 'title',
                                right: 'month,agendaWeek,agendaDay,listMonth'
                            },
                            defaultDate: new Date(),
                            locale: initialLocaleCode,
                            buttonIcons: false, // show the prev/next text
                            weekNumbers: true,
                            navLinks: true, // can click day/week names to navigate views
                            editable: true,
                            eventLimit: true, // allow "more" link when too many events   
                            events: data.d
                        });
                    }
                });
            });

    </script>

Method

    [WebMethod]
    public static IList GetEvents()
    {
        clsDBOperation obj = new clsDBOperation();
        DataTable dt1 = obj.GetDataTable("SELECT con.EDate as EDate ,  con.pfname , COUNT(*) OVER (PARTITION BY CAST(con.AppDate AS DATE)) Appointment, con.AppDate as Date, CAST(con.AppTime AS Time(0)) Time from Consultation as con inner join DoctorMaster as doc on con.DrCode=doc.id where con.DrCode='" + HttpContext.Current.Session["DrCode"] + "' ");
            IList events = new List<Event>();
            for (int i = 0; i < dt1.Rows.Count; i++)
            {
                DataRow dRow4 = dt1.Rows[i];
                events.Add(new Event
                {
                   start = Convert.ToDateTime(dRow4["Date"].ToString()).ToString("yyyy-MM-dd") + "T" + dRow4["Time"].ToString(),
                    end = Convert.ToDateTime(dRow4["Date"].ToString()).ToString("yyyy-MM-dd") + "T" + dRow4["Time"].ToString(),
                    title = dRow4["pfname"].ToString(),
                    Appointment = dRow4["Appointment"].ToString(),
                    Time = dRow4["Time"].ToString()

                });
            }
            return events;
    }
}
public class Event
{
    public string start { get; set; }
    public string end { get; set; }
    public string title { get; set; }
    public string Appointment { get; set; }
    public string Time { get; set; }
}

Answer 1

You need to override eventRender property of full calendar.

 $('#calendar').fullCalendar({
    defaultView: 'month',
    defaultDate: '2018-10-12',

    eventRender: function(eventObj, $el) {
      $el.popover({
        title: eventObj.title,
        content: eventObj.description,
        trigger: 'hover',
        placement: 'top',
        container: 'body'
      });
    },

    events: [
      {
        title: 'All Day Event',
        description: 'description for All Day Event',
        start: '2018-10-01'
      },
      {
        title: 'Long Event',
        description: 'description for Long Event',
        start: '2018-10-07',
        end: '2018-10-10'
      },
      {
        id: 999,
        title: 'Repeating Event',
        description: 'description for Repeating Event',
        start: '2018-10-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        description: 'description for Repeating Event',
        start: '2018-10-16T16:00:00'
      },
      {
        title: 'Conference',
        description: 'description for Conference',
        start: '2018-10-11',
        end: '2018-10-13'
      },
      {
        title: 'Meeting',
        description: 'description for Meeting',
        start: '2018-10-12T10:30:00',
        end: '2018-10-12T12:30:00'
      },
      {
        title: 'Lunch',
        description: 'description for Lunch',
        start: '2018-10-12T12:00:00'
      },
      {
        title: 'Meeting',
        description: 'description for Meeting',
        start: '2018-10-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        description: 'description for Birthday Party',
        start: '2018-10-13T07:00:00'
      },
      {
        title: 'Click for Google',
        description: 'description for Click for Google',
        url: 'http://google.com/',
        start: '2018-10-28'
      }
    ]
  });

working example is here

for more reference see this in fullcalendar docs