How to Use/Integrate SweetAlerts 2 with FullCalendar

For this guide we will be using SweetAlerts 2 to interact with events on our integrated calendar. We will be using Meteor for this project. If you are looking on how to setup FullCalendar for Meteor go here.

Getting Started:

First we will need to add SweetAlerts to our meteor project. We will be using NPM to add the package to our project. This can be done by typing npm install sweetalert2 into your terminal.

We will need to set up a calendar to implement SweetAlerts into. We can start with an html file and the code bellow.

<template name="calendar">
<div id="calendarDiv"></div>
</template>

This makes a simple template where the calendar can be rendered. Next we need a js file to edit the settings for the calendar. If you want more info on the the settings that can be changed go here.

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"));
}
});
});

This is the code that we will be starting with, it includes a simple calendar with some events and methods to test the dayClick and eventClickfunctions. If you want more info on the code above and how it was written you can check out the guide here.

In order to start using SweetAlerts 2 we will need to import it to the js file that will be using it.

import swal from 'sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

This imports swal which is needed for SweetAlerts and the css file related to it. The directory for the css file can be found by going to your npm_modules folder and getting the path for the sweetalert2.min.css file.

For this guide we will be switching out the alert() functions with SweetAlerts. These new functions will allow you to edit and make new events. You can look at all the SweetAlerts 2 options here.

Adding DayClick Function:

We will need to start by making a few variables that will hold what we input.

var inputName, inputTime, inputDescription;

Then we will make the dayClick function. This is what the code will look like, I will break each part down and explain it.

dayClick: function(date) {
swal.setDefaults({
confirmButtonText: 'Next &rarr;',
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()
})
}

This is what it will look like when we are done with the dayClick Function.

For this function we will be making a chain of modals which each ask a different question that will be used to create the event. This chain requires the use of the queue function.

We can start by setting the default settings for each of the different modals that will be displayed. It will set things like the confirm button text and the progress steps.

swal.setDefaults({
confirmButtonText: 'Next &rarr;',
showCancelButton: true,
animation: false,
progressSteps: ['1', '2', '3'],
})

Next we need to make the queue function with the first event. This sets the the setting for this particular modal like the title and input type. This also has the preConfirm function which can take the input and do stuff with it before you move on. It allows for rejection which doesn't let you continue unless a correct answer is inputted. It also gives us a chance to store the input that we entered. For this first case we are saving the name of the event in the variable 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()
}
})
}
}

This same format is used to enter the next two modals for the chain. We are also adding a drop down for the time input which can be done by making the input type select instead of text. You also need to set the input options that people will be able to click.

{
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()
}
})
}
}])

Finally we want to use the .then() command to set what will happen after everything is entered. This will create the event using the renderEvent and also create a completion modal that tells you everything you entered.

.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()
})

Adding EventClick Function:

This is what the code will look like for the eventClick function, I will break each part down and explain it.

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 &rarr;',
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()
})
})
}

This is what it will look like when we are done with the eventClick Function.

First we want to make a modal that shows all the info related to the event. For this we will need to format the time so that it is readable. Formatting time is done through moments and the package momentjs:moment and will needed to be added to the project.

swal({
title: event.title,
html: "Description: " + event.description + "<br>Time: " + moment(event.start).format("hh:mm A"),
showCancelButton: true,
confirmButtonColor: '#3085d6',
confirmButtonText: 'Edit'
})

Next we need to set what happens when the edit button is clicked. This will be the same as the dayClick and go through the same modals. But this time we also need to set the inputs to the event object. This is done by adding event.title = inputName; and event.description = inputDescription;. We also use the updateEvent command to change all the inputs we added.

.then(function() {
swal.setDefaults({
confirmButtonText: 'Next &rarr;',
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()
})
})

Conclusion:

That is it you are done and have successfully added SweetAlerts 2 to your FullCalendar in you meteor project. Now you can go further and continue making your Calendar more optimized for you. If you want to see how the calendar was made in this guide check out this other guide here.

Credits:

https://limonte.github.io/sweetalert2/

https://fullcalendar.io/docs/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.