我想将数据库中的数据加载到完整的日历中，但是我不知道要用JavaScript来完成。我发现的每个代码都是针对PHP的，并且由于我试图将其应用于Node Express框架，所以我无法将数据库中的数据显示到完整的日历中。
这是我完整日历的脚本：
<script type="text/javascript">
var Fullcalendar = (function() {
var $calendar = $('[data-toggle="calendar"]');
function init($this) {
var events = [
{
id: 1,
title: 'Call with Dave',
start: '2019-05-18',
allDay: true,
className: 'bg-red',
description: 'Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
},
],
// Full calendar options
// For more options read the official docs: https://fullcalendar.io/docs
options = {
header: {
right: '',
center: '',
left: 'title, today'
},
buttonIcons: {
prev: 'calendar--prev',
next: 'calendar--next'
},
defaultView: 'month',
theme: false,
selectable: true,
selectHelper: true,
editable: true,
events: events,
dayClick: function(date) {
var isoDate = moment(date).toISOString();
$('#new-event').modal('show');
$('.new-event--title').val('');
$('.new-event--start').val(isoDate);
$('.new-event--end').val(isoDate);
},
viewRender: function(view) {
var calendarDate = $this.fullCalendar('getDate');
var calendarMonth = calendarDate.month();
//Set data attribute for header. This is used to switch header images using css
// $this.find('.fc-toolbar').attr('data-calendar-month', calendarMonth);
//Set title in page header
$('.fullcalendar-title').html(view.title);
},
// Edit calendar event action
eventClick: function(event, element) {
$('#edit-event input[value=' + event.className + ']').prop('checked', true);
$('#edit-event').modal('show');
$('.edit-event--id').val(event.id);
$('.edit-event--title').val(event.title);
$('.edit-event--description').val(event.description);
}
};
// Initalize the calendar plugin
$this.fullCalendar(options);
//
// Calendar actions
//
//Add new Event
$('body').on('click', '.new-event--add', function() {
var eventTitle = $('.new-event--title').val();
// Generate ID
var GenRandom = {
Stored: [],
Job: function() {
var newId = Date.now().toString().substr(6); // or use any method that you want to achieve this string
if (!this.Check(newId)) {
this.Stored.push(newId);
return newId;
}
return this.Job();
},
Check: function(id) {
for (var i = 0; i < this.Stored.length; i++) {
if (this.Stored[i] == id) return true;
}
return false;
}
};
if (eventTitle != '') {
$this.fullCalendar('renderEvent', {
id: GenRandom.Job(),
title: eventTitle,
start: $('.new-event--start').val(),
end: $('.new-event--end').val(),
allDay: true,
className: $('.event-tag input:checked').val()
}, true);
$('.new-event--form')[0].reset();
$('.new-event--title').closest('.form-group').removeClass('has-danger');
$('#new-event').modal('hide');
} else {
$('.new-event--title').closest('.form-group').addClass('has-danger');
$('.new-event--title').focus();
}
});
//Update/Delete an Event
$('body').on('click', '[data-calendar]', function() {
var calendarAction = $(this).data('calendar');
var currentId = $('.edit-event--id').val();
var currentTitle = $('.edit-event--title').val();
var currentDesc = $('.edit-event--description').val();
var currentClass = $('#edit-event .event-tag input:checked').val();
var currentEvent = $this.fullCalendar('clientEvents', currentId);
//Update
if (calendarAction === 'update') {
if (currentTitle != '') {
currentEvent[0].title = currentTitle;
currentEvent[0].description = currentDesc;
currentEvent[0].className = [currentClass];
console.log(currentClass);
$this.fullCalendar('updateEvent', currentEvent[0]);
$('#edit-event').modal('hide');
} else {
$('.edit-event--title').closest('.form-group').addClass('has-error');
$('.edit-event--title').focus();
}
}
//Delete
if (calendarAction === 'delete') {
$('#edit-event').modal('hide');
// Show confirm dialog
setTimeout(function() {
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
buttonsStyling: false,
confirmButtonClass: 'btn btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonClass: 'btn btn-secondary'
}).then((result) => {
if (result.value) {
// Delete event
$this.fullCalendar('removeEvents', currentId);
// Show confirmation
swal({
title: 'Deleted!',
text: 'The event has been deleted.',
type: 'success',
buttonsStyling: false,
confirmButtonClass: 'btn btn-primary'
});
}
})
}, 200);
}
});
//Calendar views switch
$('body').on('click', '[data-calendar-view]', function(e) {
e.preventDefault();
$('[data-calendar-view]').removeClass('active');
$(this).addClass('active');
var calendarView = $(this).attr('data-calendar-view');
$this.fullCalendar('changeView', calendarView);
});
//Calendar Next
$('body').on('click', '.fullcalendar-btn-next', function(e) {
e.preventDefault();
$this.fullCalendar('next');
});
//Calendar Prev
$('body').on('click', '.fullcalendar-btn-prev', function(e) {
e.preventDefault();
$this.fullCalendar('prev');
});
}
//
// Events
//
// Init
if ($calendar.length) {
init($calendar);
}
})();
</script>
所以我想创建一个for循环来获取数据值并替换数据库中事件的值
var events = [
{
id: 1,
title: 'Call with Dave',
start: '2019-05-18',
allDay: true,
className: 'bg-red',
description: 'Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
},
],
答案 0 :(得分：0)
您尝试过
<% if (event.length > 0){%> <%event.forEach(function(item, index) { %> events: [
{ // this object will be "parsed" into an Event Object
title: '<%= item.eventName%>',
groupId: 'blueEvents',
daysOfWeek: [ '5' ],
startTime: '10:45:00',
endTime: '12:45:00'
}
]
<% }); %>
<% }else {%> <p><strong>No event Found</strong><p>
<% } %>
在使用ejs并在节点上时 ..........您的其他代码
res.render('calendar', {
pageTitle: 'Calendar',
event: event //the result of the db query,