2017-01-05 4 views
3

Я настраиваю полный календар, который извлекает события из бэкэнд и показывает его. Кроме того, пользователи могут удалять события.fullcalendar- невозможно получить дату события с нажатием

То, что я пытаюсь сделать, - это выбрать дату события, на которое было нажата кнопка. Пользователи могут нажать на событие и удалить его. Но я хочу получить дату этого события и передать дату на бэкэнд-услугу с помощью вызова ajax.

// FullCalendar v1.5 
// Script modified from the "theme.html" demo file 
$(document).ready(function() { 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
    theme: true, 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    editable: true, 

    // add event name to title attribute on mouseover 
    eventMouseover: function(event, jsEvent, view) { 
     if (view.name !== 'agendaDay') { 
     $(jsEvent.target).attr('title', event.title); 
     } 
    }, 
    eventDestroy: function(event, element, view) { 
     alert("removing stuff"); 
    }, 
    eventClick: function(date,calEvent, jsEvent, view) { 
     alert('Clicked on: ' + date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear()); 
    //pass it to ajax function. Ajax function comes here 
     var r = confirm("Delete " + calEvent.title); 
     if (r === true) { 
     $('#calendar').fullCalendar('removeEvents', calEvent._id); 
     } 
    }, 

    // For DEMO only 
    // ************* 
    events: [{ 
     title: 'All Day Event', 
     start: new Date(y, m, 1) 
    }, { 
     title: 'Long Event', 
     start: new Date(y, m, d - 5), 
     end: new Date(y, m, d - 2) 
    }, { 
     id: 999, 
     title: 'Repeating Event', 
     start: new Date(y, m, d - 3, 16, 0), 
     allDay: false 
    }, { 
     id: 999, 
     title: 'Repeating Event', 
     start: new Date(y, m, d + 4, 16, 0), 
     allDay: false 
    }, { 
     title: 'Meeting', 
     start: new Date(y, m, d, 10, 30), 
     allDay: false 
    }, { 
     title: 'Lunch', 
     start: new Date(y, m, d, 12, 0), 
     end: new Date(y, m, d, 14, 0), 
     allDay: false 
    }, { 
     title: 'Birthday Party', 
     start: new Date(y, m, d + 1, 19, 0), 
     end: new Date(y, m, d + 1, 22, 30), 
     allDay: false 
    }, { 
     title: 'Click for Google', 
     start: new Date(y, m, 28), 
     end: new Date(y, m, 29), 
     url: 'http://google.com/' 
    }] 
    }); 

}); 

Я попытался предупредить дату на клике события, которое я не получаю. Как я могу решить эту проблему?

FIDDLE

+0

я могу использовать этот код, чтобы получить дату, когда я нажимаю на один день. Но я хочу получить дату, когда я нажимаю на событие. dayClick: function (date, jsEvent, view) { alert ('Clicked on:' + date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear()); } –

+0

См. Мое решение ниже. 'dt', где я храню дату, полученную из календаря. –

ответ

2

Попробуйте заменить eventClick с:

eventClick: function(calEvent, jsEvent, view) { 
    var dt = calEvent.start; 
    //alert('Event Clicked on : ' + dt); 
    var r = confirm("Delete " + calEvent.title + "\n" + dt); 
    if (r === true) { 
     $('#calendar').fullCalendar('removeEvents', calEvent._id); 
    } 
}, 

Код: fullcalendar.io - eventClick

+0

Это сработало. Отлично! Благодаря! –

0

Здесь

Объект данных имеет параметр запуска. date.start.getDate()

http://jsfiddle.net/0o2ybsLu/3/

// FullCalendar v1.5 
 
// Script modified from the "theme.html" demo file 
 
$(document).ready(function() { 
 

 
    var date = new Date(); 
 
    var d = date.getDate(); 
 
    var m = date.getMonth(); 
 
    var y = date.getFullYear(); 
 

 
    $('#calendar').fullCalendar({ 
 
    theme: true, 
 
    header: { 
 
     left: 'prev,next today', 
 
     center: 'title', 
 
     right: 'month,agendaWeek,agendaDay' 
 
    }, 
 
    editable: true, 
 

 
    // add event name to title attribute on mouseover 
 
    eventMouseover: function(event, jsEvent, view) { 
 
     if (view.name !== 'agendaDay') { 
 
     $(jsEvent.target).attr('title', event.title); 
 
     } 
 
    }, 
 
    eventDestroy: function(event, element, view) { 
 
     alert("removing stuff"); 
 
    }, 
 
    eventClick: function(date, calEvent, jsEvent, view) { 
 
    console.log(date.start.getDate()); 
 
     alert('Clicked on: ' + date.start.getDate()+"/"+date.start.getMonth()+"/"+date.start.getFullYear()); 
 
     var r = confirm("Delete " + calEvent.title); 
 
     if (r === true) { 
 
     $('#calendar').fullCalendar('removeEvents', calEvent._id); 
 
     } 
 
    }, 
 

 
    // For DEMO only 
 
    // ************* 
 
    events: [{ 
 
     title: 'All Day Event', 
 
     start: new Date(y, m, 1) 
 
    }, { 
 
     title: 'Long Event', 
 
     start: new Date(y, m, d - 5), 
 
     end: new Date(y, m, d - 2) 
 
    }, { 
 
     id: 999, 
 
     title: 'Repeating Event', 
 
     start: new Date(y, m, d - 3, 16, 0), 
 
     allDay: false 
 
    }, { 
 
     id: 999, 
 
     title: 'Repeating Event', 
 
     start: new Date(y, m, d + 4, 16, 0), 
 
     allDay: false 
 
    }, { 
 
     title: 'Meeting', 
 
     start: new Date(y, m, d, 10, 30), 
 
     allDay: false 
 
    }, { 
 
     title: 'Lunch', 
 
     start: new Date(y, m, d, 12, 0), 
 
     end: new Date(y, m, d, 14, 0), 
 
     allDay: false 
 
    }, { 
 
     title: 'Birthday Party', 
 
     start: new Date(y, m, d + 1, 19, 0), 
 
     end: new Date(y, m, d + 1, 22, 30), 
 
     allDay: false 
 
    }, { 
 
     title: 'Click for Google', 
 
     start: new Date(y, m, 28), 
 
     end: new Date(y, m, 29), 
 
     url: 'http://google.com/' 
 
    }] 
 
    }); 
 

 
});
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title></title> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://dl.dropboxusercontent.com/u/1510510/temp/demo/fullcalendar.css" rel="stylesheet"/> 
 
<script src="https://dl.dropboxusercontent.com/u/1510510/temp/demo/fullcalendar.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel="stylesheet"/> 
 
    </head> 
 
    <body> 
 
     <div id='calendar'></div> 
 
    </body> 
 
</html>

+0

Исследуемый пример не работает. Кроме того, почему я не включил его в свой образец, так как этот календарь, похоже, отключает опцию запуска кода stackoverflows. –

+0

О, ой, даже я пытаюсь исправить код, но говорит, что jquery не определен. –

+0

@KraangPrime Итак, вы поняли, чего не хватает? –

3

В функции eventClick произошла ошибка. Вы определили 4 параметра, но функция имеет только 3 параметра в соответствии с official documentation. Таким образом, параметр, который вы назвали date, был фактически параметром calEvent с атрибутом и _id. Я исправил ваш код, и теперь он удаляет событие.

$(document).ready(function() { 
 

 
    var date = new Date(); 
 
    var d = date.getDate(); 
 
    var m = date.getMonth(); 
 
    var y = date.getFullYear(); 
 

 
    $('#calendar').fullCalendar({ 
 
    theme: true, 
 
    header: { 
 
     left: 'prev,next today', 
 
     center: 'title', 
 
     right: 'month,agendaWeek,agendaDay' 
 
    }, 
 
    editable: true, 
 

 
    // add event name to title attribute on mouseover 
 
    eventMouseover: function(event, jsEvent, view) { 
 
     if (view.name !== 'agendaDay') { 
 
     $(jsEvent.target).attr('title', event.title); 
 
     } 
 
    }, 
 
    eventDestroy: function(event, element, view) { 
 
     console.log("removing stuff"); 
 
    }, 
 
    eventClick: function(calEvent, jsEvent, view) { 
 
     console.log(calEvent.start.format()); 
 
     console.log(calEvent); 
 
     alert('Clicked on: ' + calEvent.start.format()); 
 
     var r = confirm("Delete " + calEvent.title); 
 
     if (r === true) { 
 
     $('#calendar').fullCalendar('removeEvents', calEvent._id); 
 
     } 
 
    }, 
 

 
    // For DEMO only 
 
    // ************* 
 
    events: [{ 
 
     title: 'All Day Event', 
 
     start: new Date(y, m, 1) 
 
    }, { 
 
     title: 'Long Event', 
 
     start: new Date(y, m, d - 5), 
 
     end: new Date(y, m, d - 2) 
 
    }, { 
 
     id: 999, 
 
     title: 'Repeating Event', 
 
     start: new Date(y, m, d - 3, 16, 0), 
 
     allDay: false 
 
    }, { 
 
     id: 999, 
 
     title: 'Repeating Event', 
 
     start: new Date(y, m, d + 4, 16, 0), 
 
     allDay: false 
 
    }, { 
 
     title: 'Meeting', 
 
     start: new Date(y, m, d, 10, 30), 
 
     allDay: false 
 
    }, { 
 
     title: 'Lunch', 
 
     start: new Date(y, m, d, 12, 0), 
 
     end: new Date(y, m, d, 14, 0), 
 
     allDay: false 
 
    }, { 
 
     title: 'Birthday Party', 
 
     start: new Date(y, m, d + 1, 19, 0), 
 
     end: new Date(y, m, d + 1, 22, 30), 
 
     allDay: false 
 
    }, { 
 
     title: 'Click for Google', 
 
     start: new Date(y, m, 28), 
 
     end: new Date(y, m, 29), 
 
     url: 'http://google.com/' 
 
    }] 
 
    }) 
 
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" /> 
 

 
<div id='calendar'></div>

+0

Как вы делали этот ход? Я пытался как 20 минут XD - отлично работает на jsfiddle. Даже попытался переключить свои скриптовые источники на CDN, но не добавил 'moment.js' или' jqueryui.min.js'? –

+0

Чтобы выяснить необходимые зависимости, мне пришлось загрузить полный календарь Calendar и проверить входящие файлы. К счастью, они предоставляют архив со всеми необходимыми зависимостями. :) – cringe

+0

+1 для подробного ответа и образца, который работает.Но другой парень уже предоставил решение. (: –

Смежные вопросы