单击事件即可显示具有FullCalendar功能的所选数据 [英] Event click show the selected data with FullCalendar function
本文介绍了单击事件即可显示具有FullCalendar功能的所选数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
事件单击时出现问题，在弹出模式中使用FullCalendar函数显示所选数据.我只是可以在弹出模式中显示开始日期数据.
I have a problem for event click show the selected data with FullCalendar function in the popup modal. I just can show the start date data in the popup modal.
下面是我的示例代码:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.6.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.6.0/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
//suppose this is array
var arrays = [{
"title": "All Day Event",
"start": "2021-04-01 00:00:00",
"color": "#40E0D0"
}, {
"title": "Long Event",
"start": "2016-01-07 00:00:00",
"color": "#FF0000"
}, {
"title": "Repeating Event",
"start": "2016-01-09 16:00:00",
"color": "#0071c5"
}, {
"title": "Conference",
"start": "2016-01-11 00:00:00",
"color": "#40E0D0"
}, {
"title": "Meeting",
"start": "2016-01-12 10:30:00",
"color": "#000"
}, {
"title": "Lunch",
"start": "2016-01-12 12:00:00",
"color": "#0071c5"
}, {
"title": "Happy Hour",
"start": "2016-01-12 17:30:00",
"color": "#0071c5"
}, {
"title": "Dinner",
"start": "2016-01-12 20:00:00",
"color": "#0071c5"
}, {
"title": "Birthday Party",
"start": "2016-01-14 07:00:00",
"color": "#FFD700"
}, {
"title": "Double click to change",
"start": "2016-01-28 00:00:00",
"color": "#008000"
}, {
"title": "512",
"start": "2021-04-04 00:00:00",
"color": "#FF0000"
}, {
"title": "21512",
"start": "2021-04-06 00:00:00",
"color": "#FF0000"
}, {
"title": "236234",
"start": "2021-04-07 00:00:00",
"color": "#FF0000"
}, {
"title": "3521",
"start": "2021-04-03 00:00:00",
"color": "#00FF00"
}, {
"title": "HHH",
"start": "2021-04-02 00:00:00",
"color": "#FFFF00"
}]
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialDate: '2021-04-25',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
eventDidMount: function(view) {
//loop through json array
$(arrays).each(function(i, val) {
//find td->check if the title has same value-> get closest daygird ..change color there
$("td[data-date=" + moment(val.start).format("YYYY-MM-DD") + "] .fc-event-title:contains(" + val.title + ")").closest(".fc-daygrid-event-harness").css("background-color", val.color);
})
},
select: function(arg) {
$('#createEventModal #startTime').val(arg.start);
$('#createEventModal #endTime').val(arg.end);
$('#createEventModal #when').text(arg.start);
$('#createEventModal').modal('toggle');
},
eventClick: function(arg) {
// endtime = $.fullCalendar.moment(event.end).format('h:mm');
// starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
// var mywhen = starttime + ' - ' + endtime;
$('#title').html(arg.event.title);
$('#modalWhen').text(arg.event.start);
$('#eventID').val(arg.event.id);
$('#calendarModal').modal();
},
editable: true,
dayMaxEvents: true,
events: arrays //pass array here
});
calendar.render();
});
</script>
<div id='calendar'></div>
<!-- Modal -->
<div id="createEventModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Event</h4>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="inputPatient">Event:</label>
<div class="field desc">
<input class="form-control" id="title" name="title" placeholder="Event" type="text" value="">
</div>
</div><br>
<div class="control-group">
<label class="control-label" for="inputPatient">Color:</label>
<div class="field desc">
<select class="form-control" id="color" name="color" placeholder="Color" type="text" value="">
<option value="#FF0000">Red</option>
<option value="#800000">Maroon</option>
<option value="#FFFF00">Yellow</option>
<option value="#008000">Green</option>
<option value="#00FF00">Light Green</option>
<option value="#00FFFF">Aqua</option>
<option value="#0000FF">Blue</option>
<option value="#000080">Navy</option>
<option value="#FF00FF">Fuchsia</option>
<option value="#800080">Purple</option>
</select>
</div>
</div>
<input type="hidden" id="startTime"/>
<input type="hidden" id="endTime"/>
<div class="control-group" style="display:none;">
<label class="control-label" for="when">When:</label>
<div class="controls controls-row" id="when" style="margin-top:5px;">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</div>
</div>
</div>
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Event Details</h4>
</div>
<div id="modalBody" class="modal-body">
<h4 id="title" class="modal-title"></h4>
<div id="modalWhen" style="margin-top:5px;"></div>
</div>
<input id="eventID"/>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
</div>
</div>
</div>
</div>当我点击 2021-04-01全天活动时，现在得到的结果如下图所示:
Now my result when I've clicked 2021-04-01 All Day Event like below the picture:
实际上，我希望得到如下图所示的预期结果:
Actually, I want the expected result like below the picture:
希望有人可以指导我如何解决它.谢谢.
Hope someone can guide me on how to solve it. Thanks.
推荐答案
由于选择了错误的元素而导致错误， eventClick 应该类似于
It error because you select wrong elements, eventClick should be like
eventClick: function(arg) {
$('#modalBody > #title').text(arg.event.title);
$('#modalWhen').text(arg.event.start);
$('.modal-content > #eventID').val(arg.event._def.defId);
$('#calendarModal').modal();
},
editable: true,
dayMaxEvents: true,
events: arrays //pass array here
});
这篇关于单击事件即可显示具有FullCalendar功能的所选数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
