create event with fullcalendar when clicking on calendar (rails)

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
        }
    );
}

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


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";
    }