Trước khi sử dụng plugin lịch, bạn cần thêm các tệp script sau vào trước khi kết thúc thẻ
1
Bạn cũng cần bao gồm tệp biểu định kiểu sau trước khi kết thúc thẻ
0
Đang khởi tạo lịch
Trong tệp html của bạn, bạn cần tạo thẻ
1 với thuộc tính id
Sau đó, trong các tệp Javascript của bạn, bạn sẽ cần khởi tạo lịch như thế này
var calendarEl = d.getElementById['calendar'];
var events = [
{
id: 1,
title: 'Call with Jane',
start: '2020-11-18',
end: '2020-11-19',
className: 'bg-red'
},
{
id: 2,
title: 'Dinner meeting',
start: '2020-11-21',
end: '2020-11-22',
className: 'bg-orange'
},
// ...
{
id: 10,
title: 'Cyber Week',
start: '2020-12-02',
end: '2020-12-03',
className: 'bg-red'
}
];
var addNewEventModalEl = d.getElementById['modal-new-event'];
var addNewEventModal = new bootstrap.Modal[addNewEventModalEl];
var newEventTitleInput = d.getElementById['eventTitle'];
var newEventStartDatepicker = new Datepicker[d.getElementById['dateStart'], { buttonClass: 'btn' }];
var newEventEndDatepicker = new Datepicker[d.getElementById['dateEnd'], { buttonClass: 'btn' }];
var editEventModalEl = d.getElementById['modal-edit-event'];
var editEventModal = new bootstrap.Modal[editEventModalEl];
var editEventTitleInput = d.getElementById['eventTitleEdit'];
var editEventStartDatepicker = new Datepicker[d.getElementById['dateStartEdit'], { buttonClass: 'btn' }];
var editEventEndDatepicker = new Datepicker[d.getElementById['dateEndEdit'], { buttonClass: 'btn' }];
// current id selection
var currentId = null;
var calendar = new FullCalendar.Calendar[calendarEl, {
selectable: true,
initialView: 'dayGridMonth',
themeSystem: 'bootstrap',
initialDate: '2020-12-01',
editable: true,
events: events,
dateClick: function[d] {
addNewEventModal.show[];
newEventTitleInput.value = '';
newEventStartDatepicker.setDate[d.date];
newEventEndDatepicker.setDate[d.date.setDate[d.date.getDate[] + 1]];
addNewEventModalEl.addEventListener['shown.bs.modal', function [] {
newEventTitleInput.focus[];
}];
},
eventClick: function[info, element] {
// set current id
currentId = info.event.id;
editEventTitleInput.value = info.event.title;
editEventStartDatepicker.setDate[info.event.start];
editEventEndDatepicker.setDate[info.event.end ? info.event.end : info.event.start];
editEventModal.show[];
editEventModalEl.addEventListener['shown.bs.modal', function [] {
editEventTitleInput.focus[];
}];
}
}];
calendar.render[];
d.getElementById['addNewEventForm'].addEventListener['submit', function [event] {
event.preventDefault[];
calendar.addEvent[{
id: Math.random[] * 10000, // this should be a unique id from your back-end or API
title: newEventTitleInput.value,
start: moment[newEventStartDatepicker.getDate[]].format['YYYY-MM-DD'],
end: moment[newEventEndDatepicker.getDate[]].format['YYYY-MM-DD'],
className: 'bg-blue',
dragabble: true
}];
addNewEventModal.hide[];
}];
d.getElementById['editEventForm'].addEventListener['submit', function [event] {
event.preventDefault[];
var editEvent = calendar.getEventById[currentId];
var startDate = moment[editEventStartDatepicker.getDate[]].format['YYYY-MM-DD'];
var endDate = moment[editEventEndDatepicker.getDate[]].format['YYYY-MM-DD']
editEvent.setProp['title', editEventTitleInput.value];
editEvent.setStart[startDate];
editEvent.setEnd[endDate];
editEventModal.hide[];
}];
d.getElementById['deleteEvent'].addEventListener['click', function [] {
swalWithBootstrapButtons.fire[{
icon: 'error',
title: 'Confirm deletion',
text: 'Are you sure you want to delete this event?',
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: 'No, cancel!',
}].then[function[result] {
if [result.value] {
swalWithBootstrapButtons.fire[
'Deleted!',
'The event has been deleted.',
'success'
];
calendar.getEventById[currentId].remove[];
} else if [result.dismiss === Swal.DismissReason.cancel] {
editEventModal.hide[];
}
}]
}];
Đây là rất nhiều mã để bắt đầu, nhưng mã này cũng chứa mã vanilla JS tùy chỉnh của chúng tôi mà bạn có thể thêm, chỉnh sửa hoặc xóa các mục khỏi lịch
Thêm một sự kiện
Nếu bạn muốn cập nhật loại dữ liệu mà bạn muốn có khi thêm một sự kiện thì đây là đánh dấu HTML phương thức và trình xử lý sự kiện nơi mục thực sự được thêm vào đối tượng lịch
đánh dấu phương thức
Event title
Select start date
Select end date
Add new event
Close
Javascript
d.getElementById['addNewEventForm'].addEventListener['submit', function [event] {
event.preventDefault[];
calendar.addEvent[{
id: Math.random[] * 10000, // this should be a unique id from your back-end or API
title: newEventTitleInput.value,
start: moment[newEventStartDatepicker.getDate[]].format['YYYY-MM-DD'],
end: moment[newEventEndDatepicker.getDate[]].format['YYYY-MM-DD'],
className: 'bg-blue',
dragabble: true
}];
addNewEventModal.hide[];
}];
Chỉnh sửa một sự kiện
Nếu bạn muốn cập nhật loại dữ liệu mà bạn muốn có khi chỉnh sửa một sự kiện thì đây là đánh dấu HTML phương thức và trình xử lý sự kiện nơi mục thực sự được thêm vào đối tượng lịch
đánh dấu phương thức
________số 8
Javascript
d.getElementById['editEventForm'].addEventListener['submit', function [event] {
event.preventDefault[];
var editEvent = calendar.getEventById[currentId];
var startDate = moment[editEventStartDatepicker.getDate[]].format['YYYY-MM-DD'];
var endDate = moment[editEventEndDatepicker.getDate[]].format['YYYY-MM-DD']
editEvent.setProp['title', editEventTitleInput.value];
editEvent.setStart[startDate];
editEvent.setEnd[endDate];
editEventModal.hide[];
}];
Xóa một sự kiện
Đoạn mã javascript sau đây là nơi bạn có thể cập nhật dữ liệu khi xóa một sự kiện khỏi lịch
0Plugin lịch khá phức tạp và có nhiều tùy chọn hơn mà bạn có thể sử dụng khi làm việc với nó. Chúng tôi khuyên bạn nên duyệt FullCalendar chính thức. tài liệu io từ trang web của họ