В этом руководстве мы будем использовать SweetAlerts 2 для взаимодействия с событиями в нашем интегрированном календаре. Мы будем использовать Meteor для этого проекта. Если вы ищете, как настроить FullCalendar для Meteor, перейдите здесь.
Начиная:
Сначала нам нужно добавить SweetAlerts в наш метеоритный проект. Мы будем использовать NPM для добавления пакета в наш проект. Это можно сделать, набрав npm install sweetalert2 в терминале.
Нам нужно настроить календарь для реализации SweetAlerts. Мы можем начать с html-файла и приведенного ниже кода.
<template name="calendar">
<div id="calendarDiv"></div>
</template>
Это делает простой шаблон, в котором можно отображать календарь. Далее нам нужен файл js для редактирования настроек календаря. Если вам нужна дополнительная информация о настройках, которые можно изменить, перейдите здесь.
Template.calendar.onRendered(() => {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendarDiv').fullCalendar({
header: {
left: 'basicDay, basicWeek, month',
center: 'title',
right: 'today prev,next'
},
editable: true,
events: [{
id: 1,
title: 'Birthday',
start: new Date(y, m, 1),
allDay: true,
description: 'Happy Birthday',
}, {
id: 2,
title: 'Concert',
start: '2016-12-07T21:00:00',
end :'2016-12-07T23:00:00',
allDay: false,
color: '#e74c3c'
}, {
id: 3,
title: 'Lunch',
start: new Date(y, m, 16, 14),
end: new Date(y, m, 16, 16),
allDay: false,
color: '#3498db'
}, {
id: 4,
title: 'Class',
start: new Date(y, m, 20, 10),
allDay: false,
color: '#9b59b6'
}, {
id: 5,
title: 'Party',
start: new Date(y, m, 5, 18),
allDay: false,
color: '#e67e22'
}],
dayClick: function(date) {
alert("Clicked on " + date.format());
},
eventClick: function(event) {
alert("Event title: " + event.title + "\nEvent description: " + event.description + "\nEvent time: " + moment(event.start).format("hh:mm A"));
}
});
});
Это код, с которого мы начнем, он включает в себя простой календарь с некоторыми событиями и методами для тестирования функций dayClick и eventClick. Если вам нужна дополнительная информация о приведенном выше коде и о том, как он был написан, вы можете ознакомиться с руководством здесь.
Чтобы начать использовать SweetAlerts 2, нам нужно импортировать его в файл js, который будет его использовать.
import swal from 'sweetalert2'; import 'sweetalert2/dist/sweetalert2.min.css';
Это импортирует swal, который необходим для SweetAlerts, и связанный с ним файл css. Каталог для файла css можно найти, перейдя в папку npm_modules и получив путь к файлу sweetalert2.min.css.
В этом руководстве мы будем отключать функции alert() с помощью SweetAlerts. Эти новые функции позволят вам редактировать и создавать новые события. Посмотреть все опции SweetAlerts 2 можно здесь.
Добавление функции DayClick:
Нам нужно начать с создания нескольких переменных, которые будут хранить то, что мы вводим.
var inputName, inputTime, inputDescription;
Затем мы создадим функцию dayClick. Вот как будет выглядеть код, я разобью каждую часть и объясню.
dayClick: function(date) {
swal.setDefaults({
confirmButtonText: 'Next →',
showCancelButton: true,
animation: false,
progressSteps: ['1', '2', '3'],
})
swal.queue([{
title: 'New Event',
text: 'Event Name:',
input: 'text',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Name')
} else {
inputName = inputValue;
resolve()
}
})
}
}, {
title: 'New Event',
text: 'Event Description:',
input: 'text',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Description')
} else {
inputDescription = inputValue;
resolve()
}
})
}
}, {
title: 'New Event',
text: 'Event Time:',
input: 'select',
inputOptions: {
'06:00:00': '06:00 AM',
'07:00:00': '07:00 AM',
'08:00:00': '08:00 AM',
'09:00:00': '09:00 AM',
'10:00:00': '10:00 AM',
'11:00:00': '11:00 AM',
'12:00:00': '12:00 PM',
'13:00:00': '01:00 PM',
'14:00:00': '02:00 PM',
'15:00:00': '03:00 PM',
'16:00:00': '04:00 PM',
'17:00:00': '05:00 PM',
'18:00:00': '06:00 PM',
'19:00:00': '07:00 PM',
'20:00:00': '08:00 PM',
'21:00:00': '09:00 PM',
'22:00:00': '10:00 PM'
},
inputPlaceholder: 'Select Time',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Time')
} else {
inputTime = inputValue;
resolve()
}
})
}
}]).then(function(inputValue) {
$('#calendarDiv').fullCalendar('renderEvent', {
title: inputName,
description: inputDescription,
start: date.format() + 'T' + inputTime,
allDay: false,
}, 'stick');
swal.resetDefaults()
swal({
title: 'Event Created',
html: "Name: " + inputName + "<br>Description: " + inputDescription + "<br>Time: " + inputTime,
confirmButtonText: 'Done',
showCancelButton: false
})
}, function() {
swal.resetDefaults()
})
}
Вот как это будет выглядеть, когда мы закончим с функцией dayClick.
Для этой функции мы создадим цепочку модальных окон, каждое из которых будет задавать разные вопросы, которые будут использоваться для создания события. Эта цепочка требует использования функции очереди.
Мы можем начать с установки настроек по умолчанию для каждого из различных модальных окон, которые будут отображаться. Он установит такие вещи, как текст кнопки подтверждения и шаги выполнения.
swal.setDefaults({
confirmButtonText: 'Next →',
showCancelButton: true,
animation: false,
progressSteps: ['1', '2', '3'],
})
Далее нам нужно сделать функцию очереди с первым событием. Это устанавливает настройку для этого конкретного модального окна, такого как заголовок и тип ввода. У этого также есть функция preConfirm, которая может принимать входные данные и делать с ними что-то, прежде чем двигаться дальше. Он допускает отклонение, которое не позволяет вам продолжить, пока не будет введен правильный ответ. Это также дает нам возможность сохранить ввод, который мы ввели. В этом первом случае мы сохраняем имя события в переменной inputName.
swal.queue([{
title: 'New Event',
text: 'Event Name:',
input: 'text',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Name')
} else {
inputName = inputValue;
resolve()
}
})
}
}
Этот же формат используется для ввода следующих двух модальных окон цепочки. Мы также добавляем раскрывающийся список для ввода времени, который можно сделать, сделав тип ввода select вместо text. Вам также необходимо установить параметры ввода, на которые люди смогут нажимать.
{
title: 'New Event',
text: 'Event Description:',
input: 'text',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Description')
} else {
inputDescription = inputValue;
resolve()
}
})
}
}, {
title: 'New Event',
text: 'Event Time:',
input: 'select',
inputOptions: {
'06:00:00': '06:00 AM',
'07:00:00': '07:00 AM',
'08:00:00': '08:00 AM',
'09:00:00': '09:00 AM',
'10:00:00': '10:00 AM',
'11:00:00': '11:00 AM',
'12:00:00': '12:00 PM',
'13:00:00': '01:00 PM',
'14:00:00': '02:00 PM',
'15:00:00': '03:00 PM',
'16:00:00': '04:00 PM',
'17:00:00': '05:00 PM',
'18:00:00': '06:00 PM',
'19:00:00': '07:00 PM',
'20:00:00': '08:00 PM',
'21:00:00': '09:00 PM',
'22:00:00': '10:00 PM'
},
inputPlaceholder: 'Select Time',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Time')
} else {
inputTime = inputValue;
resolve()
}
})
}
}])
Наконец, мы хотим использовать команду .then(), чтобы установить, что произойдет после того, как все будет введено. Это создаст событие с использованием renderEvent, а также создаст модальное завершение, которое сообщит вам все, что вы ввели.
.then(function(inputValue) {
$('#calendarDiv').fullCalendar('renderEvent', {
title: inputName,
description: inputDescription,
start: date.format() + 'T' + inputTime,
allDay: false,
}, 'stick');
swal.resetDefaults()
swal({
title: 'Event Created',
html: "Name: " + inputName + "<br>Description: " + inputDescription + "<br>Time: " + inputTime,
confirmButtonText: 'Done',
showCancelButton: false
})
}, function() {
swal.resetDefaults()
})
Добавление функции EventClick:
Вот как будет выглядеть код для функции eventClick, я разберу каждую часть и объясню ее.
eventClick: function(event) {
swal({
title: event.title,
html: "Description: " + event.description + "<br>Time: " + moment(event.start).format("hh:mm A"),
showCancelButton: true,
confirmButtonColor: '#3085d6',
confirmButtonText: 'Edit'
}).then(function() {
swal.setDefaults({
confirmButtonText: 'Next →',
showCancelButton: true,
animation: false,
progressSteps: ['1', '2', '3'],
})
swal.queue([{
title: 'New Event',
text: 'Event Name:',
input: 'text',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Name')
} else {
inputName = inputValue;
event.title = inputName;
resolve()
}
})
}
}, {
title: 'New Event',
text: 'Event Description:',
input: 'text',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Description')
} else {
inputDescription = inputValue;
event.description = inputDescription;
resolve()
}
})
}
}, {
title: 'New Event',
text: 'Event Time:',
input: 'select',
inputOptions: {
'06:00:00': '06:00 AM',
'07:00:00': '07:00 AM',
'08:00:00': '08:00 AM',
'09:00:00': '09:00 AM',
'10:00:00': '10:00 AM',
'11:00:00': '11:00 AM',
'12:00:00': '12:00 PM',
'13:00:00': '01:00 PM',
'14:00:00': '02:00 PM',
'15:00:00': '03:00 PM',
'16:00:00': '04:00 PM',
'17:00:00': '05:00 PM',
'18:00:00': '06:00 PM',
'19:00:00': '07:00 PM',
'20:00:00': '08:00 PM',
'21:00:00': '09:00 PM',
'22:00:00': '10:00 PM'
},
inputPlaceholder: 'Select Time',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Time')
} else {
inputTime = inputValue;
event.start = moment(event.start).format("YYYY-MM-DD") + 'T' + inputTime;
resolve()
}
})
}
}]).then(function(inputValue) {
$('#calendarDiv').fullCalendar('updateEvent', event);
swal.resetDefaults()
swal({
title: 'Event Created',
html: "Name: " + inputName + "<br>Description: " + inputDescription + "<br>Time: " + inputTime,
confirmButtonText: 'Done',
showCancelButton: false
})
}, function() {
swal.resetDefaults()
})
})
}
Вот как это будет выглядеть, когда мы закончим с функцией eventClick.
Сначала мы хотим сделать модальное окно, которое показывает всю информацию, связанную с событием. Для этого нам нужно отформатировать время так, чтобы оно было читабельным. Время форматирования делается через моменты и пакет momentjs:moment нужно будет добавить в проект.
swal({
title: event.title,
html: "Description: " + event.description + "<br>Time: " + moment(event.start).format("hh:mm A"),
showCancelButton: true,
confirmButtonColor: '#3085d6',
confirmButtonText: 'Edit'
})
Далее нам нужно установить, что происходит при нажатии кнопки редактирования. Это будет то же самое, что и dayClick, и пройдите через те же модальные окна. Но на этот раз нам также нужно установить входные данные для объекта события. Это делается путем добавления event.title = inputName; и event.description = inputDescription;. Мы также используем команду updateEvent для изменения всех добавленных нами входных данных.
.then(function() {
swal.setDefaults({
confirmButtonText: 'Next →',
showCancelButton: true,
animation: false,
progressSteps: ['1', '2', '3'],
})
swal.queue([{
title: 'New Event',
text: 'Event Name:',
input: 'text',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Name')
} else {
inputName = inputValue;
event.title = inputName;
resolve()
}
})
}
}, {
title: 'New Event',
text: 'Event Description:',
input: 'text',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Description')
} else {
inputDescription = inputValue;
event.description = inputDescription;
resolve()
}
})
}
}, {
title: 'New Event',
text: 'Event Time:',
input: 'select',
inputOptions: {
'06:00:00': '06:00 AM',
'07:00:00': '07:00 AM',
'08:00:00': '08:00 AM',
'09:00:00': '09:00 AM',
'10:00:00': '10:00 AM',
'11:00:00': '11:00 AM',
'12:00:00': '12:00 PM',
'13:00:00': '01:00 PM',
'14:00:00': '02:00 PM',
'15:00:00': '03:00 PM',
'16:00:00': '04:00 PM',
'17:00:00': '05:00 PM',
'18:00:00': '06:00 PM',
'19:00:00': '07:00 PM',
'20:00:00': '08:00 PM',
'21:00:00': '09:00 PM',
'22:00:00': '10:00 PM'
},
inputPlaceholder: 'Select Time',
preConfirm: function(inputValue) {
return new Promise(function(resolve, reject) {
if (!inputValue) {
reject('Enter a Time')
} else {
inputTime = inputValue;
event.start = moment(event.start).format("YYYY-MM-DD") + 'T' + inputTime;
resolve()
}
})
}
}]).then(function(inputValue) {
$('#calendarDiv').fullCalendar('updateEvent', event);
swal.resetDefaults()
swal({
title: 'Event Created',
html: "Name: " + inputName + "<br>Description: " + inputDescription + "<br>Time: " + inputTime,
confirmButtonText: 'Done',
showCancelButton: false
})
}, function() {
swal.resetDefaults()
})
})
Вывод:
Вот и все, вы закончили и успешно добавили SweetAlerts 2 в свой FullCalendar в своем метеорном проекте. Теперь вы можете пойти дальше и продолжить оптимизацию Календаря. Если вы хотите увидеть, как создавался календарь в этом руководстве, ознакомьтесь с другим руководством здесь.
