jquery - FullCalendar 上带有设计的工具提示

Question

如何在完整日历上显示带有设计的工具提示？如果您将鼠标悬停在日历中的 event 上，则必须显示工具提示。请帮我解决这个问题。太棒了!

  //reference
  <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/trueno" type="text/css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>


<div id="calendar"></div>
<script>

 $(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    height: 700,
    editable:false,
    eventColor: '#378006',
    eventBackgroundColor: "#cce5ff",
    eventBorderColor: "#b8daff",
    eventTextColor: '#004085',
    displayEventTime: false,
    header:{
     left:'prev,next today',
     center:'',
     right:'title'
    },
    events: 'load.php', 
    eventRender: function(event, element) {
    element.attr('title', event.tooltip);
    }

   });
  });

  </script>

 //php
<?php 

//load.php

$connect = new PDO('mysql:host=localhost;dbname=voters', 'root', 'P@ssw0rd@sql');

$data = array();

$query = "SELECT * FROM schedulling ORDER BY id";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach($result as $row)
{
 $data[] = array(
  'id'   => $row["id"],
  'title'   => $row["title"],
  'start'   => $row["start_date"],
  'end'   => $row["end_date"],
  'notes' => $row['start_time'],
  'tooltip' => "Random Data"
 );
}

echo json_encode($data);

 ?>

Answer 1

试试这个，对我来说效果很好。对于动态事件，每次都尝试通过 jQuery 调用获取数据。

 $(function){$('#calendar').fullCalendar({ defaultView: 'month',defaultDate: '2019-02-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: '2019-02-01'
  },
  {
    title: 'Long Event',
    description: 'description for Long Event',
    start: '2019-02-07',
    end: '2019-02-10'
  },
  {
    id: 999,
    title: 'Repeating Event',
    description: 'description for Repeating Event',
    start: '2019-02-09T16:00:00'
  },
  {
    id: 999,
    title: 'Repeating Event',
    description: 'description for Repeating Event',
    start: '2019-02-16T16:00:00'
  },
  {
    title: 'Conference',
    description: 'description for Conference',
    start: '2019-02-11',
    end: '2019-02-13'
  },
  {
    title: 'Meeting',
    description: 'description for Meeting',
    start: '2019-02-12T10:30:00',
    end: '2019-02-12T12:30:00'
  },
  {
    title: 'Lunch',
    description: 'description for Lunch',
    start: '2019-02-12T12:00:00'
  },
  {
    title: 'Meeting',
    description: 'description for Meeting',
    start: '2019-02-12T14:30:00'
  },
  {
    title: 'Birthday Party',
    description: 'description for Birthday Party',
    start: '2019-02-13T07:00:00'
  },
  {
    title: 'Click for Google',
    description: 'description for Click for Google',
    url: 'http://google.com/',
    start: '2019-02-28'
  }
]  });});