weixin_33744141 2018-07-27 06:19 采纳率: 0%
浏览 172

FullCalendar中的工具提示

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; }
}
  • 写回答

1条回答

  • from.. 2018-11-02 09:00
    关注

    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

    评论

报告相同问题?

悬赏问题

  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料