fullcalendar dayclick mysqli php

0
votes

So I have this jquery (FullCalendar) and its showing records through the database query. Everything is fine until here :)

Now what I want is to add an event when the person clicks on a date (Only start(date) is required) but then the person must choose from a combobox (And the combobox is populate through the database too) which is the title.

From my understanding I have to this with ajax(?) but I don't know how to because I don't know Ajax..

I have this in the fullcalendar:

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

So I assume I have to call the ajax function after the "if (allDay){" and prepare a php file with the query, but I don't know how I can put a select option in there.. After the selection when the user click add run another script to add to the database..

The combobox with the database query will have the Title. The calendar only shows the Month(all the days from month).

Sorry if my English is bad!

1
phpajaxmysqlifullcalendar

1 Answers

0
votes

You can open a dialog on the dayClick event (http://api.jqueryui.com/dialog/, NOTE: not included in the FullCalendar jqueryui source file). Add a combobox / select to this dialog. Get you data with ajax / json (http://api.jquery.com/jQuery.getJSON/).

Add a button to the dialog and add the event (http://arshaw.com/fullcalendar/docs/event_data/addEventSource/) via its function.

Useful Questions for manipulation the select:

NOTE the source contains some examples. fullcalendar-1.6.1/demos/selectable.html seems to be useful to solve your question.

I create a demo page using: 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;