Jquery Fullcalendar recurring event

Question

How to show recurring event in Jquery fullcalendar? like event start on particular day and keep on running for next one year then how would I display this in fullcalendar.

Note: the event information is Coming from Database

Answer 1

Full calendar doesn't support recurring events out of the box. Here is what I did.

When I add an event I have a select box that is for recurring events. Let's say a user selects it to repeat every week. I then insert an event into my events table with a parent ID which will be the same for all the instances of that event.

Full calendar makes it so that recurring events have to have the same event ID. So in my events table I have a unique event ID column and a parent ID which is the column I use to render events.

So anyway, immediately after I insert the first event I run a loop that selects the last inserted event with the same parent ID, add 7 days to it, and inserts it into the events table. I loop through this process 50 more times and then I have an event that occurs every week for a year.

Here's some code:

When a user selects a time frame I open a dialog

    select: function(start, end){

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

On the dialog, I have a drop down select

<div id="add_class" title="Add New Class">

    <form action="">
    <div id="recurring_event">
        <label for = "recurring">Recurring </label>
        <input type="checkbox" name="recurring" id="recurring"  /> 
        <div id = "recurring_options" >
            Repeat every <select name = "repeat_frequency" id = "repeat_frequency">
            <option value ="1">Day</option>
            <option value="7" selected="selected">Week</option>
            <option value = "28">Month</option>
            </select>
        </div>
        </div>
        </form>
</div>

Then I submit this info using AJAX to a php page called add_class.php

$( "#add_class" ).dialog({

    "Save Class": function() {
            var repeat_frequency = $("#repeat_frequency").val();
            $.ajax({
                type:"POST",
                url: "add_class.php",
                data: "repeat_frequency=" + repeat_frequency,
                async: false,
            });
                $('#calendar').fullCalendar('refetchEvents');
                $( this ).dialog( "close" );

            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },

Here comes the add_class.php part where I actually enter it into the database

        $repeat_frequency = $_POST['repeat_frequency'];

        $dbh = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
        $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_USE_BUFFERED_QUERY);
        $stmt = $dbh->prepare(
                    "INSERT INTO events (start, end)  //whatever variables you received from the AJAX post on the dialog form
                    VALUES (:start, :end)");

        $stmt->bindParam(':start', $start);
        $stmt->bindParam(':end', $end); 
        $stmt->execute();

        $id = $dbh->lastInsertId();

        for($x = 0; $x < "51"; $x++) {

        $stmt = $dbh->prepare("
                        SELECT start, end
                        FROM events
                        WHERE event_id = :event_id ");

        $stmt->bindParam(':event_id', $event_id, PDO::PARAM_STR);
        $stmt->execute();
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        $start = $result['start'];
        $end = $result['end'];

        $start_date= strtotime($start . '+' . $repeat_frequency . 'DAYS');
        $end_date= strtotime($end . '+' . $repeat_frequency . 'DAYS');
        $start = date("Y-m-d H:i", $start_date);
        $end = date("Y-m-d H:i", $end_date);
        unset($stmt);
        $stmt = $dbh->prepare(
                    "INSERT INTO events (start, end ) //and whatever other columns you need
                    VALUES (:start, :end)");


        $stmt->bindParam(':start', $start, PDO::PARAM_STR);
        $stmt->bindParam(':end', $end, PDO::PARAM_STR);
        $stmt->execute();
        $event_id = $dbh->lastInsertId();
 }

So that's just a general gist of things. Hopefully there are not too many typos as I tried to edit it down to just the essentials to get the point across. Let me know if you have any questions.

EDIT

To "display" events on fullcalendar you need to have an event source.

check out this link

http://fullcalendar.io/docs/event_data/events_json_feed/

In your json-events.php you echo the event data and then it is displayed on your calendar.

Have something like this to show events on your calendar page

$('#calendar').fullCalendar({
events: '/myfeed.php'
});

In your myfeed.php file have something along the lines of

    $dbh = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
        $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);  // set the error mode to excptions 
        $stmt = $dbh->prepare("SELECT 
                                event_id,  title, start, end
                                FROM events 


                                ORDER BY start");

        $stmt->execute();

        $events = array();

        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){   //important ! $start = "2010-05-10T08:30";  iso8601 format !!

            $eventArray['id'] = $row['event_id'];
            $eventArray['title'] =  $row['title'];
            $eventArray['start'] = $row['start'];
            $eventArray['end'] = $row['end'];

          $events[] = $eventArray;
          echo json_encode($events);

If you still have questions then search here on stackoverflow. I think I have explained it pretty well and provided plenty of code. Here is a blog post I made that may also help http://fajitanachos.com/Fullcalendar-and-recurring-events/ I found everything I needed to get fullcalendar running on here and on the fullcalendar home page http://fullcalendar.io/

I hope this helps.