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; }
}