0

所以我有这个 jquery (FullCalendar) 及其通过数据库查询显示的记录。一切都很好，直到这里:)

现在我想要的是当人们点击一个日期时添加一个事件（只需要开始（日期）），但是这个人必须从一个组合框中选择（并且组合框也通过数据库填充）这是标题。

据我了解，我必须使用 ajax(?) 但我不知道该怎么做，因为我不知道 Ajax ..

我在完整日历中有这个：

dayClick: function(date, allDay, jsEvent, view) {
            if (allDay) {       
                alert('Clicked on the entire day: ' + date);
            }else{
                alert('Clicked on the slot: ' + date);
            }
        }

所以我假设我必须在“if（allDay）{”之后调用 ajax 函数并准备一个带有查询的 php 文件，但我不知道如何在其中放置一个选择选项。在选择之后用户单击添加运行另一个脚本以添加到数据库..

带有数据库查询的组合框将具有标题。日历仅显示月份（月份中的所有日期）。

对不起，如果我的英语不好！

4

1 回答 1

0

您可以打开有关dayClick事件的对话框（http://api.jqueryui.com/dialog/，注意：不包含在 FullCalendar jqueryui 源文件中）。向此对话框添加组合框/选择。使用 ajax / json ( http://api.jquery.com/jQuery.getJSON/ ) 获取数据。

在对话框中添加一个按钮并通过其函数添加事件 ( http://arshaw.com/fullcalendar/docs/event_data/addEventSource/ )。

操作选择的有用问题：

注意源包含一些示例。fullcalendar-1.6.1/demos/selectable.html 似乎对解决您的问题很有用。

我使用以下方式创建了一个演示页面：http ://arshaw.com/fullcalendar/docs/usage/

日历.html：

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel='stylesheet' type='text/css' href='fullcalendar-1.6.1/fullcalendar/fullcalendar.css' />
</head>
<body>
<div id="dialog" title="Dialog Title">
<select id="titles"></select>   
</div>

<div id='calendar'></div>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="fullcalendar-1.6.1/fullcalendar/fullcalendar.min.js"></script>
<script type="text/javascript">
//$(document).ready(function() {

    // page is now ready, initialize the calendar...


    $( "#dialog" ).dialog({ autoOpen: false });

    $('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $('#titles').find('option').remove(); //remove old options

        /* get the titles via json */

        $.getJSON('titles.php', function(data) {

          $.each(data, function(key, val) {

             //$("#titles").append(new Option(val.toString(),key));
             /* add the val as key to demo it*/
             $("#titles").append(new Option(val.toString(),val.toString()));
          });

         });

        $( "#dialog" ).dialog({buttons: { "Ok": function() 
        { 
                /* add the event to the Calendar */
                $('#calendar').fullCalendar( 'addEventSource', [{title: $("#titles").val(), start:date}]);
                $( this ).dialog( "close" );

        }}});
        $( "#dialog" ).dialog("open");
    }
});


//});
</script>
</body> 
</html>

标题.php：

    <?php
    header('Content-type: application/json');
    $rows = array('Title one','Title two','Title three');
    echo json_encode((object)$rows);
    exit;
于 2013-05-08T22:03:54.353 回答