2013-05-08 3 views
0

Итак, у меня есть этот jquery (FullCalendar) и его отображение записей через запрос базы данных. Все нормально: здесьfullcalendar dayclick mysqli php

Теперь я хочу добавить событие, когда человек нажимает на дату (требуется только начало (дата)), но затем человек должен выбрать из выпадающего списка (и поле со списком также заполняется через базу данных), которая является названием. (?)

Из моего понимания я должен это с помощью AJAX, но я не знаю, как, потому что я не знаю Ajax ..

У меня есть это в fullcalendar:

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

Итак, я предполагаю, что мне нужно вызвать функцию ajax после «if (allDay) {» и подготовить файл php с запросом, но я не знаю, как я могу поместить здесь опцию выбора. После выбора когда пользователь нажимает добавить запустить другой скрипт для добавления в базу данных.

В поле со списком с запросом базы данных будет название. В календаре отображается только месяц (все дни с месяца).

Извините, если мой английский плохой!

ответ

0

Вы можете открыть диалоговое окно на событии dayClick (http://api.jqueryui.com/dialog/, ПРИМЕЧАНИЕ: не включен в исходный файл FullCalendar jqueryui). Добавьте combobox/select в это диалоговое окно. Получите данные с помощью 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/

calendar.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> 

titles.php:

<?php 
    header('Content-type: application/json'); 
    $rows = array('Title one','Title two','Title three'); 
    echo json_encode((object)$rows); 
    exit; 
+0

Спасибо, показывая Его рекорды по выберите из базы данных, но как передать здесь переменные ?: '$ ('# calendar'). FullCalendar ('addEventSource', [{title: $ (" # titles "). Val(), start: date}]);' для добавления в базу данных по запросу ? Я узнал несколько вещей с вашей помощью :) – Enato

+0

вы можете изменить названия.php, чтобы получить данные из вашей базы данных –

+0

Я уже получал данные из своей базы данных, но если я попытаюсь получить json с идентификатором и заголовком, то вот что: [ [ - { ID: "1", название: «Воссоединение» }] то выпадающий появляется с «ОБЪЕКТ ОБЪЕКТ», но если я ид из он показывает правильное имя .. Я хочу, чтобы идентификатор заголовка, потому что мне нужно, чтобы затем добавить, что ID к базе данных с помощью запроса – Enato

Смежные вопросы