JQuery Fullcalender Repeat Event

How to show recurring event in jquery fullcalender ?? as the event started on a certain day and continued to work for the next year, then how would I display this in fullcalender.

Note: event information comes from the database

Thanks at Advance

+6
source share
1 answer

A full calendar does not support recurring events out of the box. Here is what I did.

When I add an event, I have a selection box for repeating events. Let them say that the user selects it for repetition every week. Then I insert the event into my event table with a parent identifier that will be the same for all instances of this event.

A full calendar does this so that recurring events have the same event identifier. Therefore, in my event table, I have a unique event identifier column and a parent identifier, which is the column that I use to display events.

Anyway, right after I insert the first event, I start a loop that selects the last inserted event with the same parent ID, adds 7 days to it and inserts it into the event table. I repeat this process another 50 times, and then I have an event that happens every week for a year.

Here is the code:

When the user selects a time interval, I open a dialog

select: function(start, end){ $( "#add_class" ).dialog( "open" ); }, 

In the dialog box I have a drop down list

 <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 send this information 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" ); } }, 

The add_class.php part is added here, 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("Ymd H:i", $start_date); $end = date("Ymd 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 this is just the general meaning of things. I hope there are not so many typos as I tried to edit it to the most necessary in order to understand the essence. Let me know if you have any questions.

EDIT

To “display” events in full calendar mode, you need an event source.

check this link

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

In json-events.php you echo the events of the event and then appear on your calendar.

There is something like this to display events on a calendar page

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

There is something like lines in myfeed.php file

  $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 have questions, do a search here on stackoverflow. I think I explained this pretty well and provided a lot of code. Here is a blog post I made that could also help http://fajitanachos.com/Fullcalendar-and-recurring-events/ I found everything I need to run fullcalendar here and on the fullcalendar main page http: // fullcalendar.io/

Hope this helps.

+14
source

Source: https://habr.com/ru/post/910600/


All Articles