Question

我正在使用最简单的数据，我可以找到eventClick，我几乎听不懂。以下是我的输出。我有几个问题。

如何让这些项目显示在不同的行上？
我可以添加更多字段，因为这种接缝是什么？
有没有办法传递链接，以便我可以从数据库中提取结果？
如何使用jQuery UI Dialog而不是默认弹出窗口？
如何更改字体大小和颜色？对不起，我有很多问题但是在浏览了文档并阅读了关于这个主题的所有stackoverflow之后，我比以前更加困惑。

这是我的脚本打印出来的

活动：Richard Kurth星期四2014年3月6日18:55:00 GMT-0800（太平洋标准时间）2014年3月6日星期四19:55:00 GMT-0800（太平洋标准时间）7504 NE 110th St Vancouver

<script type='text/javascript'>
$(document).ready(function() { 
     $('#calendar').fullCalendar({ 
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
             eventClick: function(calEvent, jsEvent, view) {
        alert('Event: ' + calEvent.title + '  ' + calEvent.start + '  ' + calEvent.end + '  ' + calEvent.address1 + '  ' + calEvent.city);
            },

         events: "json_events.php", 


         loading: function(bool) { 
            if (bool) $('#loading').show(); 
            else $('#loading').hide(); 
         } 

      }); 

   });

</script>

Answer 1

使用\n放置换行符。例如：calEvent.title + '\n' + calEvent.start。
极限在哪里？在alert();？你没有限制。
要从数据库中获取结果，您应该看到fullCalendar的文档。你还有很多例子this one。您应该使用事件来指定搜索数据的位置：events: "your_request.php"其中php文件返回Json（由数据库提供）。

尊重元，一些线索：

<强> events.php

<?php
 // ... Your sql query ...

 // Your sql result to Json
 echo json_encode($result);
?>

<强> fullCalendar.js

$(document).ready(function() {
   // ...

   var calendar = $('#calendar').fullCalendar({
    editable: true,
    header: {
       //...
    },
    // Find events from database
    events: "http://localhost:8888/fullcalendar/events.php",

    //...

    // Add event when clicking on a field open dialog with Jquery UI dialog
    select: function(start, end, allDay) {
      $( "#dialog-form" ).dialog({
          buttons: {
            "Add": function() {
              $.ajax({
                url: 'http://localhost:8888/fullcalendar/add_events.php', // Add request
                data: { data },
                type: "POST",
                dataType: "json",
                 success: function(json) {
                   // retrieve json here
                   // see for refetchEvent() of fullCalendar (feed the calendar with new values)
                   $( this ).dialog( "close" );
             }
        },
      "Cancel": function() {
          $( this ).dialog( "close" );
      }
  return;
  });
 });
}

对于其他步骤，您可以在文档中获得所需的全部内容（fullCalendar和jQuery UI）。你有一切可以自己继续，但如果你有一些具体的问题/问题我会保持可用。

如何让eventClick数据看起来像我的方式

1 个答案: