单击日历(边栏)时使用完整日历创建事件



当用户单击日历的任何部分时,如何创建事件? 然后将其作为新事件存储在数据库中?我知道你必须使用:选择:函数(开始,结束,所有一天)来获取"开始"和"结束"时间。但是在我获得这些数据后,如何将其传递到数据库?

谢谢!

您可以使用 ajax 请求将新事件存储在数据库中。

项目主页上有一个演示,可以轻松调整。
通过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');
} 

如果您需要对特定点击做出反应,您也可以尝试这样做,但您必须自己处理事件结束或持续时间。

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

在这里我分享我所做的一切。我创建了一个弹出窗口并从用户那里获取公寓号和 PIN 码然后通过 ajax,我通过请求自定义insert_data.php文件创建一个新事件这是完整日历的代码.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";
    }

从那以后,选择回调发生了变化。对于FullCalender v5使用这个...

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

资料来源:https://fullcalendar.io/docs/select-callback

相关内容

  • 没有找到相关文章