create event with fullcalendar when clicking on calendar (rails) - ruby-on-rails

Question

How do you create an event when the user clicks on any part of the calendar? and then store it in the database as a new event?
I know you have to use: select: function(start, end, allDay) to get the "start" and "end" times. But after I get this data how do I pass it to the database?
Thanks!

Answer 1

You may use an ajax request to store the new event in your DB.
There is a demo on the projects homepage, which can easily be adapted.
Via jQuery for example like this :
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
/**
* ajax call to store event in DB
*/
jQuery.post(
"event/new" // your url
, { // re-use event's data
title: title,
start: start,
end: end,
allDay: allDay
}
);
}
calendar.fullCalendar('unselect');
}
If you need to react on a specific click, you can also try this, but you have to grep the event end or duration by yourself.
dayClick: function(date, allDay, jsEvent, view) {
var title = prompt('Event Title:');
/**
* again : ajax call to store event in DB
*/
jQuery.post(
"event/new" // your url
, { // re-use event's data
title: title,
start: date
allDay: allDay
}
);
}

Answer 2

here i am sharing what ever i do.
i create a popup and get apartment number and pin number from user
and then through ajax i create a new event by requesting a custom insert_data.php file
here is the code for fullcalendar.php
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
//alert(start);
var title = $("#dialog").dialog();
//$(".popup").show();
//$(".title").focus();
var start = start; //Date.parse(start) / 1000;
var end = end; //Date.parse(end) / 1000;
var allDay = allDay;
//alert(allDay);
$("#save_frm").click(function(){
var pin_number = $("#pin_number").val();
var apartment_number =$("#apartment_number").val();
//alert(start);
//alert(end);
//alert(allDay);
$.ajax({
type: "POST",
url: "<?php echo WP_PLUGIN_URL; ?>/wp-fullcalendar/insert_data.php",
data: { apartment_number: apartment_number, pin_number: pin_number, start: start, end: end, allDay: allDay }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
$("#dialog").dialog("close");
window.location.reload(true);
calendar.fullCalendar('unselect');
calendar.fullCalendar('refetchEvents');
});
});//select function end here
// calendar.fullCalendar('unselect');
},
//and then ajax request goes to insert_data.php bellow code should be place seperate file
require("../../../wp-load.php"); //connection with database
require("../../../wp-config.php");
//print_r(explode(" ",$_POST['end']));
$start = explode(" ",$_POST['start']);
//coding for extracting date
$start_date=$start[3].'-';
//$start_date.=$start[1].'-';
if($start[1]=='Jan')
{
$start_date.='01';
}
else if($start[1]=='Feb')
{
$start_date.='02';
}
else if($start[1]=='Mar')
{
$start_date.='03';
}
else if($start[1]=='Apr')
{
$start_date.='04';
}
else if($start[1]=='May')
{
$start_date.='05';
}
else if($start[1]=='Jun')
{
$start_date.='06';
}
else if($start[1]=='Jul')
{
$start_date.='07';
}
else if($start[1]=='Aug')
{
$start_date.='08';
}
else if($start[1]=='Sep')
{
$start_date.='09';
}
else if($start[1]=='Oct')
{
$start_date.='10';
}
else if($start[1]=='Nov')
{
$start_date.='11';
}
else if($start[1]=='Dec')
{
$start_date.='12';
}
$start_date.='-'.$start[2];
//coding for extracting date end here
$start_time = $start[4];
$end = explode(" ",$_POST['end']);
$end_time = $end[4];
global $wpdb;
//$table_name = $wpdb->prefix . "em_events";
//$wpdb->insert( $table_name, array( 'album' => $_POST['album'], 'artist' => $_POST['artist'] ) );
// Create post object
$apartment_number = $_POST['apartment_number'];
$pin_number = $_POST['pin_number'];
$post_date = $start_date.' ' .$start_time;
$post = array( 'ID' => ''
, 'post_author' => '1'
, 'post_date' => ''
, 'post_date_gmt' => ''
, 'post_content' => $apartment_number
, 'post_tittle' => $apartment_number
, 'post_excerpt' => $apartment_number
, 'post_status' => 'publish'
, 'comment_status' => 'closed'
, 'ping_status' => 'closed'
, 'post_password' => $pin_number
, 'post_name' => $apartment_number
, 'to_ping' => ''
, 'pinged' => ''
, 'post_modified' => ''
, 'post_modified_gmt' => ''
, 'post_content_filtered'=> '0'
, 'post_parent' => '0'
, 'guid' => '1'
, 'menu_order' => '0'
, 'post_type' => 'event'
, 'post_mime_type' => $post_date
, 'comment_count' => '0'
);
// Insert the post into the database
$post_id=wp_insert_post( $post, $wp_error );
if($wpdb->insert( 'wp_em_events', array(
'post_id' => $post_id
, 'event_slug' => $_POST['apartment_number']
, 'event_owner' => 1
, 'event_status' => 1
, 'event_name' => $_POST['apartment_number']
, 'event_start_time' => $start_time
, 'event_end_time' => $end_time
, 'event_all_day' => 0
, 'event_start_date' => $start_date
, 'event_end_date' => $start_date
, 'post_content' => $_POST['apartment_number']
, 'event_rsvp' => 0
, 'event_rsvp_date' => $end_date
, 'event_rsvp_time' => '00:00:00'
, 'event_spaces' => 0
, 'event_private' => 0
, 'location_id' => 0
//, 'recurrence_id' => 1223
, 'event_category_id' => 1
, 'event_attributes' => 'a:0:{}'
, 'event_date_created' => $start_date." ".$start_time
, 'event_date_modified' => $start_date." ".$start_time
, 'recurrence' => 0
//, 'recurrence_interval' => 12
//, 'recurrence_freq' => 12
//, 'recurrence_byday' => 1231
//, 'recurrence_byweekno' => 4564
, 'recurrence_days' => 0
//, 'blog_id' => 456465
, 'group_id' => 0
) )){
echo "query execute";
}else{
echo "query not execute";
}

Answer 3

The select callback has changed since. For FullCalender v5 use this...
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
selectable: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
dateClick: function(info) {
alert('clicked ' + info.dateStr);
},
select: function(info) {
alert('selected ' + info.startStr + ' to ' + info.endStr);
}
});
calendar.render();
});
Source: https://fullcalendar.io/docs/select-callback