Question

我正在使用Kendo UI Scheduler ......

如何在 jQuery 中悬停的工具提示中显示说明？

Online Demo

var _data = new kendo.data.SchedulerDataSource({
  data: [    {
    eventID: 8,
    title: "Group meeting.",
    start: new Date(),
    end: new Date(),
    pending:false,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Take my brother to his group meeting.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
  },{
    eventID: 9,
    title: "Make dinner.",
    start: new Date("2013/06/13 11:00"),
    end: new Date("2013/06/13 13:30"),
    pending:true,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Make dinner for my mom.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
  } ],
  schema: {
    model : {
      id : "eventID"
    }
  }
});

function save(){
  console.log(_data);    
}

$('#scheduler').kendoScheduler({
  date: new Date(),
  startTime: new Date("2013/6/13 07:00 AM"),
  height: 600,
  views: [
    { type: "agenda", title: "Agenda" },
    { type: "month", selected: true },
  ],

    save: save,
    dataSource:_data
    });

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.timezones.min.js"></script>
<div id="scheduler"></div>

是的，他们确实有一个例子，但它在Angular JS中:(

http://docs.telerik.com/kendo-ui/web/scheduler/how-to/AngularJS/show-tooltip

Answer 1

是啊......

我通过修改如下来得到它。

<script>
var _data = new kendo.data.SchedulerDataSource({
        data: [    {
          eventID: 8,
          title: "Group meeting.",
          start: new Date(),
          end: new Date(),
          pending:false,
          recurrenceRule: "",
          recurrenceException: "",
          description: "Take my brother to his group meeting.",
          isAllDay:false,
          ownTimeSlot:true,
          careAssistantId: 5,
          clientId: 6
        },{
          eventID: 9,
          title: "Make dinner.",
          start: new Date("2013/06/13 11:00"),
          end: new Date("2013/06/13 13:30"),
          pending:true,
          recurrenceRule: "",
          recurrenceException: "",
          description: "Make dinner for my mom.",
          isAllDay:false,
          ownTimeSlot:true,
          careAssistantId: 5,
          clientId: 6
        } ],
        schema: {
          model : {
            id : "eventID"
          }
        }
      });

      function save(){
        console.log(_data);    
      }

      $('#scheduler').kendoScheduler({
        date: new Date(),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [
          { type: "agenda", title: "Agenda" },
          { type: "month", selected: true },
        ],

        save: save,
        dataSource:_data
      });




      $(function () {
            $("#scheduler").kendoTooltip({
                filter: ".k-event",
                position: "top",
                width: 250,
                content: kendo.template($('#template').html())
            });
        });

</script>

  <script id="template" type="text/x-kendo-template">
    #var uid = target.attr("data-uid");#
    #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
    #var model = scheduler.occurrenceByUid(uid);#

    #if(model) {#
        <strong>event start:</strong> #=kendo.format('{0:d}',model.start)#<br />
        <strong>event end:</strong> #=kendo.format('{0:d}',model.end)#<br />
        <strong>event description:</strong> #=model.description#<br />
    #} else {#
        <strong>No event data is available</strong>
    #}#
</script>

<强> Working Demo

Kendo UI（Scheduler） - 显示描述Hover上的工具提示（jQuery）

1 个答案: