create event with fullcalendar when clicking on calendar (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

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

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

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