カレンダーをクリックすると、フルカレンダーでイベントを作成します（Rails）

Question

ユーザーがカレンダーの任意の部分をクリックしたときに、どのようにイベントを作成しますか？そしてそれを新しいイベントとしてデータベースに保存しますか？ 「開始」時刻と「終了」時刻を取得するには、次を使用する必要があることを知っています。select：function（start、end、allDay）。しかし、このデータを取得した後、どのようにデータベースに渡すのですか？

ありがとう！

Answer 1

Ajaxリクエストを使用して、新しいイベントをDBに保存できます。

プロジェクトのホームページには デモ があり、簡単に調整できます。
たとえば次のようなjQueryを介して：

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

特定のクリックに反応する必要がある場合は、これを試すこともできますが、イベントの終了または期間を自分でgrepする必要があります。

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

ここで私は今まで私がしたことを共有しています。ポップアップを作成し、ユーザーからアパート番号とPIN番号を取得してから、ajaxを介して、カスタムのinsert_data.phpファイルをリクエストして新しいイベントを作成します。これが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');
                        },

//次にajaxリクエストはinsert_data.phpに送られます以下のコードは別のファイルに配置する必要があります

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